Алексей Швайка "Bundling: you are doing it wrong"
0 likes•520 views
The document discusses various front-end performance optimization techniques, including the use of HTTP/2 features, such as multiplexing and server push, to enhance delivery speed. It also addresses specific performance pitfalls and best practices around scripting, CSS, and module loading, particularly in relation to different libraries and frameworks like Lodash and jQuery. Overall, it emphasizes the importance of optimizing web performance appropriately across different technologies and standards.
![<hypertext response>
GET /http/0.9.html
[connection closed]](https://image.slidesharecdn.com/5-shvaika-160422080342/85/Bundling-you-are-doing-it-wrong-22-320.jpg)
![var modules = Object.create(null)
window.module = {
get exports() {
return modules[src()]
},
set exports(value) {
modules[src()] = value
}
}](https://image.slidesharecdn.com/5-shvaika-160422080342/85/Bundling-you-are-doing-it-wrong-46-320.jpg)
![var modules = Object.create(null)
window.module = {
get exports() {
return modules[src()]
},
set exports(value) {
modules[src()] = value
}
}
window.require = function(path) {
return modules[resolve(src(), path)]
}](https://image.slidesharecdn.com/5-shvaika-160422080342/85/Bundling-you-are-doing-it-wrong-47-320.jpg)
![var modules = Object.create(null)
window.module = {
get exports() {
return modules[src()]
},
set exports(value) {
modules[src()] = value
}
}
window.require = function(path) {
return modules[resolve(src(), path)]
}
function src() {
return document.currentScript.src
}](https://image.slidesharecdn.com/5-shvaika-160422080342/85/Bundling-you-are-doing-it-wrong-48-320.jpg)
![var $scripts = document.getElementsByTagName("script")
var loaded = Object.create(null)
document.addEventListener("load", function(event) {
var $target = event.target
if ($target.matches("script")) {
var source = $target.src
if (source) loaded[source] = null
}
}, true)](https://image.slidesharecdn.com/5-shvaika-160422080342/85/Bundling-you-are-doing-it-wrong-51-320.jpg)
![var $scripts = document.getElementsByTagName("script")
var loaded = Object.create(null)
document.addEventListener("load", function(event) {
var $target = event.target
if ($target.matches("script")) {
var source = $target.src
if (source) loaded[source] = null
}
}, true)
return searchStack(new Error().stack, function(source) {
if (source in loaded) return
return $scripts.find(function($script) {
return $script.src == source
})
})](https://image.slidesharecdn.com/5-shvaika-160422080342/85/Bundling-you-are-doing-it-wrong-52-320.jpg)
Алексей Швайка "Bundling: you are doing it wrong"
- 1. Bundling: you are doing it wrong Aleksey Shvayka @ Hell Yeah LLC
- 2. @shvaikalesh
- 5. Performance is a feature
- 8. Hacks • Sprites • Inlining • Sharding • Concatenation • Cookieless domains
- 11. <button> is slow
- 12. The cost of transpiling in 2016
- 13. jQuery vs DOM4
- 16. AMP: good parts • <script async> • GPU animations • Font optimization • DOM read/write batching • Microdata (JSON-LD)
- 17. Best practices • <script async> • GPU animations • Font optimization • DOM read/write batching • Microdata (JSON-LD)
- 18. AMP: bad parts • No <input>, <form>, <picture> • Inlined CSS • CSS micro-optimizations • Invalid attributes • <noscript>
- 20. Brief history of HTTP
- 23. HTTP/1.0 • Versioning, headers, methods • Simple caching, basic auth • Status codes
- 24. HTTP/1.1 • Advanced caching, Vary • Range requests • Compression, chunked • Content negotiation • OPTIONS method
- 25. HTTP/2 • Backwards compatible • Great multiplexing • Streams/frames • Server push, PING, GOAWAY
- 26. spdy.createServer(tls, (req, res) => { res.push('/main.js', (err, stream) => { stream.end('console.log("hello, world!")') }) res.end('<script src="/main.js"></script>') }).listen(443)
- 27. Hacks HTTP/2 • Sprites Separate resources • Inlining Server push • Sharding Single host • Concatenation Separate resources • Cookieless domains Single host
- 28. HTTP/2 rollout • Gradual • Right away • “Hack” per request • When % of traffic will support it
- 29. SPDY • IE 11 • Firefox • Chrome • Android 4 • Safari 8
- 30. HTTP/2 • IE 11 • Edge • Firefox 41 • Chrome 36 • Safari 9
- 31. HTTP/2 • IE 11 (Windows 10) • Edge (over TLS) • Firefox 41 (over TLS) • Chrome 36 (over TLS) • Safari 9 (OS X El Capitan)
- 32. Why TLS is enforced?
- 33. Is not that slow?
- 34. CSS
- 36. loadCSS.js
- 38. <link> unblocks content above
- 39. JavaScript
- 40. 300 <script>s?
- 41. 1. AMD
- 44. 2. CommonJS
- 46. var modules = Object.create(null) window.module = { get exports() { return modules[src()] }, set exports(value) { modules[src()] = value } }
- 47. var modules = Object.create(null) window.module = { get exports() { return modules[src()] }, set exports(value) { modules[src()] = value } } window.require = function(path) { return modules[resolve(src(), path)] }
- 48. var modules = Object.create(null) window.module = { get exports() { return modules[src()] }, set exports(value) { modules[src()] = value } } window.require = function(path) { return modules[resolve(src(), path)] } function src() { return document.currentScript.src }
- 50. var $scripts = document.getElementsByTagName("script") var loaded = Object.create(null)
- 51. var $scripts = document.getElementsByTagName("script") var loaded = Object.create(null) document.addEventListener("load", function(event) { var $target = event.target if ($target.matches("script")) { var source = $target.src if (source) loaded[source] = null } }, true)
- 52. var $scripts = document.getElementsByTagName("script") var loaded = Object.create(null) document.addEventListener("load", function(event) { var $target = event.target if ($target.matches("script")) { var source = $target.src if (source) loaded[source] = null } }, true) return searchStack(new Error().stack, function(source) { if (source in loaded) return return $scripts.find(function($script) { return $script.src == source }) })
- 53. 3. ES6 Modules
- 54. When: Spec for module loader?
- 58. Features • Only absolute or '/', './', '../' • <script defer> semantics • Module memorization • CORS, UTF-8, enforced Content-Type
- 61. Using today?