Downloaded 135 times
![Agenda
• Blocking JavaScript
• Flushing
• CSS and rendering
• Blocking <!--[if IE 6]>
• Preloading, MHTML…](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-23-320.jpg)
![Non-blocking JavaScript
• Asynchronous loading
html
js
png
png
var js = document.createElement('script');
js.src = 'myscript.js';
var h = document.getElementsByTagName('head')[0];
h.appendChild(js);](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-33-320.jpg)
![What…?! Case #1
<link type="text/css" rel="stylesheet"
href="1.css">
<!‐‐[if IE 6 ]>
<link type="text/css" rel="stylesheet"
href="ie.css">
<![endif]‐‐>](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-55-320.jpg)
![What…?! Case #2
<!‐‐[if IE 6]>
<body class="ie6">
<![endif]‐‐>
<!‐‐[if !IE]><!‐‐>
<body>
<!‐‐<![endif]‐‐>](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-56-320.jpg)
![Solution for case #1
<!DOCTYPE html>
<!‐‐[if IE 6]><![endif]‐‐>
<html>
...](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-57-320.jpg)
![Solution for case #2
<!‐‐[if IE 6]>
<html class="ie6">
<![endif]‐‐>
<!‐‐[if !IE]><!‐‐>
<html>
<!‐‐<![endif]‐‐>](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-58-320.jpg)
![MHTML - multi parts
Content-Type: multipart/related; boundary="MYSEPARATOR"
--MYSEPARATOR
[here comes part one] The
double-
--MYSEPARATOR dash of
doom
[here's part two]
--MYSEPARATOR--](https://image.slidesharecdn.com/progress-101011133502-phpapp01/85/Progressive-Downloads-and-Rendering-79-320.jpg)
Uploaded byStoyan Stefanov
Progressive Downloads and Rendering
Progressive downloads and rendering allow content to be delivered and displayed to the user incrementally to improve perceived performance. JavaScript should be placed at the bottom of the page to avoid blocking. CSS can block rendering so should also be delivered non-blocking when possible. Techniques like flushing output, non-blocking scripts, and data URIs can help deliver content progressively. MHTML and preloading can help optimize delivery across multiple HTTP requests. The overall goal is to start displaying content as soon as possible while content continues downloading in the background.
More Related Content
Similar to Progressive Downloads and Rendering
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
Progressive Downloads and Rendering
- 1. Progressive downloads and rendering StoyanStefanov, Yahoo! Fronteers, Amsterdam, 2010 http://slideshare.net/stoyan/
- 2. About me YSlow 2.0
- 3.
- 4. Importance of performance • Psychology, physiology • Effects of waiting • “Time is money” • Make people happy
- 5.
- 6.
- 7.
- 8.
- 11. Durations actual expected perceived rem’d time
- 12. It feels slowerwhen… • Unpleasant • Unknown • Boring • Too much to keep track
- 13. First time experience • Unfamiliar = slow • Optimize empty cache or there will be no full cache
- 14.
- 15. But before webegin…
- 16. The basics • Reducingthe # HTTP • Gzip • Minification • Image smushing • Expires • CDN
- 17. The basics • Yahoo!’sbest practices • Google’s • perfplanet.com
- 18.
- 19.
- 20.
- 22.
- 23. Agenda • Blocking JavaScript • Flushing • CSS and rendering • Blocking <!--[if IE 6]> • Preloading, MHTML…
- 24.
- 25. JavaScript blocks html js png png
- 26. JavaScript blocks • Ano-no! <script src="jquery.js"></script> <script src="jquery.twitter.js"></script> <script src="jquery.cookie.js"></script> <script src="myapp.js"></script>
- 27. This waterfall looksridiculous html js js js js png png
- 30. JavaScript at thebottom html png png js
- 31. Non-blocking JavaScript • deferand async • Defer: IE innovation, ok to delay, but keep order • Async: HTML5, whatever <script async src="my.js" onload="doIt()"></script> <script defer src="my.js" onload="doIt()"></script>
- 32. defer and asynctimeline async defer DOMContentLoaded load
- 33. Non-blocking JavaScript • Asynchronous loading html js png png var js = document.createElement('script'); js.src = 'myscript.js'; var h = document.getElementsByTagName('head')[0]; h.appendChild(js);
- 34.
- 35. flush() early html png js css html js png ✔ css
- 36. flush() <html> <head> <scriptsrc="my.js" type="text/javascript"></script> <link href="my.css" type="text/css" rel="stylesheet" /> </head> <?php flush() ?> <body> ....
- 37.
- 38. Chunked encoding • Progressiverendering - Semantic app chunks vs. - Server-level chunks
- 39. Progressive rendering Chunk #1 Chunk #2 Chunk #3
- 40. <!doctype html> <html> <head><title>My App</title></head> <body> <div id="header"> <img src="logo.png" /> ... </div> <!-- end of chunk #1 --> ... The full body of the page ... <!-- end of chunk #2 --> <script src="all_20100925.js"></script> </body> </html> <!-- end of chunk #3 -->
- 41. Progressive + sourceorder 1 3 2 4
- 42. HTTP chunking: notonly HTML
- 43. HTTP chunking: notonly HTML • Google Instant • /*""*/ - delimited JSON pieces • Chunk #1 suggestions • Chunk #2 results http://tinyurl.com/chunkview
- 44.
- 45. Worst enemy? CSS
- 46. CSS blocks rendering • The worst component type • Place way at the top • Inline all @media print, etc http://www.phpied.com/delay-loading-your-print-css/ http://www.phpied.com/rendering-styles/
- 47.
- 48.
- 49. CSS block downloads? But theydo block: • When followed by an inline script • When in conditional comments
- 50. Inline CSS • Googlesearch • Bing.com: inline + postload
- 51. Same domain • Ifyou split across domains • and if you don’t use CDN • Saves a DNS lookup
- 52.
- 53.
- 54.
- 55.
- 56.
- 57. Solution for case#1 <!DOCTYPE html> <!‐‐[if IE 6]><![endif]‐‐> <html> ...
- 58. Solution for case#2 <!‐‐[if IE 6]> <html class="ie6"> <![endif]‐‐> <!‐‐[if !IE]><!‐‐> <html> <!‐‐<![endif]‐‐>
- 59.
- 60. Preloads • Anticipate nextpage • Problems: - does next page anticipate you? - parsing and execution time • <link prefetch="http://..">
- 61. Preload sans execute varpreload; if (/*@cc_on!@*/false) { // IE preload = function (file) { new Image().src = file; }; } else { preload = function (file) { var obj = document.createElement('object'), body = document.body; obj.width = 0; obj.height = 0; obj.data = file; body.appendChild(obj); }; }
- 62.
- 64.
- 65. Fewer HTTP requests • Inline images: in CSS sprites with data: URI scheme http://csssprites.com http://spriteme.org
- 66. Fewer HTTP requests • data: URI scheme $ php ‐r "echo base64_encode(file_get_contents('my.png'));” iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4 DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC
- 67. Fewer HTTP requests • data: URI scheme background‐image: url("data:image/png;base64,iVBORw0KG...");
- 68. Fewer HTTP requests • data: URI scheme <img src="data:image/png;base64,iVBOR..." />
- 71.
- 74. Fewer HTTP requests • data: URI scheme • works in IE!...
- 75. Fewer HTTP requests • data: URI scheme • works in IE8!
- 76. Fewer HTTP requests • data: URI scheme • MHTML for IE < 8
- 77. MHTML • MIME HTML • Works in IE 6,7 • Indeed it actually absolutely does work in IE7/Vista too http://phpied.com /the-proper-mhtml-syntax/
- 78. MHTML - onepart Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSU....U5ErkJggg==
- 79. MHTML - multiparts Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR [here comes part one] The double- --MYSEPARATOR dash of doom [here's part two] --MYSEPARATOR--
- 80. MHTML.css – alltogether /* Content-Type: multipart/related; boundary="MYSEPARATOR" --MYSEPARATOR Content-Location: myimage Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAD....U5ErkJggg== --MYSEPARATOR Content-Location: another Content-Transfer-Encoding: base64 iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAA....U5ErkJggg== --MYSEPARATOR-- */ .myclass { background-image:url(mhtml:http://example.org/styles.css!myimage); } .myotherclass { background-image:url(mhtml:http://example.org/styles.css!another); }
- 81. MHTML: inline too <!doctypehtml> <html> <head> <title>Look Ma' No HTTP requests</title> <style type="text/css"> /* Content-Type: multipart/related; boundary="_" --_ Content-Location:locoloco Content-Transfer-Encoding:base64 iVBOR...CC --_ Content-Location:polloloco Content-Transfer-Encoding:base64 iVBOR....gg== --_-- */ .image1 { background-image: url("data:image/png;base64,iVBOR...CC"); /* normal */ *background-image: url(mhtml:http://...html!locoloco); /* IE < 8 */ } .image2 { background-image: url("data:image/png;base64,iVBOR...gg=="); /* normal */ *background-image: url(mhtml:http://...html!polloloco); /* IE < 8 */ } body { font: bold 24px Arial; } </style> </head> <body> http://phpied.com <h1>MHTML + Data:URIs inline in <code>style</code></h1> <p class="image1">hello<br>hello</p> <p class="image2">bonjour<br>bonjour</p> </body> </html> /inline-mhtml-data-uris/
- 82. MHTML + dataURI • X-browser single request web apps
- 83. Single request • WT☠? • Separation of concerns • Content-presentation- behavior • yes, it’s a tradeoff
- 84. MHTML + dataURI • drawback: repeats the same encoded image • solutions: - browser-specific CSS - keep close = better gzip - or… an ingenious hack
- 85. MHTML + dataURI • image header + css + data /9j/4AA0;background-image:url(data:image/jpeg;base64;00,/9j/4AA0 Reality: IE: Others: http://habrahabr.ru/blogs/webdev/90761/
- 86.
- 87.
- 88.
- 89. What not tosay… • “Everyone is on high-speed these days” • “It’s all in the cache”
- 90. Do care about • Progressive, non-blocking, asynchronous downloads • Progressive rendering
- 91.