Empfohlen
Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ăhnlich wie Please, dont touch the slow parts v.3.6 @webtechcon
Ăhnlich wie Please, dont touch the slow parts v.3.6 @webtechcon (20)
Mehr von Francesco Fullone
Mehr von Francesco Fullone (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Please, dont touch the slow parts v.3.6 @webtechcon
- 1. Please Donât Touch the Slow Parts V3.6 francesco.fullone@ideato.it http://www.ideato.it/ federico.galassi@gmail.com http://federico.galassi.net/
- 3. faster
- 4. WEBfaster
- 6. We have to wait
- 7. ... All the time
- 8. âSavings in time feels like simplicityâ
- 9. âTime is the only commodity that mattersâ
- 11. Faster web, more clicks http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
- 12. Faster web, better SEO http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
- 13. Faster web is hot
- 14. Say web, Say browser
- 16. User clicks on a link
- 18. Browser connects to web server TCP/IP 72.14.234.104 WEB domaindomain connectconnect
- 19. Browser sends a request for a page HTTP GET /language_tools?hl=en Host: www.google.com domaindomain connectconnect sendsend WEB
- 20. Browser receives a response with the page HTTP 200 OK domaindomain connectconnect sendsend receivereceive WEB
- 21. Browser renders the new page domaindomain connectconnect sendsend receivereceive renderrender
- 24. Each resource is another web request renderrender
- 25. Requests are processed in parallel renderrender
- 26. Rendering is parsing renderrender HTML CSS DOM TREE STYLE STRUCT <html> <head> <title>Title</title> </head> <body> <div>This is a Text</div> <div id="hidden">Hidden</div> body { padding: 0; } #hidden { display: none; } - document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div - text: This is a Text - elem: div - attr: id=hidden - text: Hidden - selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # site css - selector: hidden rule: display: none # site css
- 27. Rendering is layout renderrender DOM TREE STYLE STRUCT - document - elem: html - elem: head - elem: title - text: Title - elem: body - elem: div - text: This is a Text - elem: div - attr: id=hidden - text: Hidden - selector: body rule: display: block # default css padding-bottom: 0px # site css padding-left: 0px # site css padding-right: 0px # site css padding-top: 0px # fsite css - selector: hidden rule: display: none # site css - root - body - block - inline: This is - inline: a Text RENDER TREE reflow
- 28. Rendering is painting renderrender - root - body - block - inline: This is - inline: a Text RENDER TREE This is a Text repaint
- 29. Rendering is execution mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender INPUT OS EVENT QUEUE
- 30. Execution in one thread mouse movedmouse moved mouse pressedmouse pressed mouse releasedmouse released key pressedkey pressed key releasedkey released renderrender EVENT QUEUE JavascriptJavascript ExecutionExecution NativeNative BrowserBrowser ActionAction
- 31. Once upon a time... Few resources Static pages Less javascript
- 32. Most time on server domaindomain connectconnect sendsend receivereceive renderrender
- 33. Solution is faster serverside domaindomain connectconnect sendsend receivereceive renderrender
- 34. Ajax revolution
- 36. Page updating One time (classic) WEB
- 37. On demand (ajax) WEB ... later ... Page updating
- 40. Most time on browser domaindomain connectconnect sendsend receivereceive renderrender
- 41. Golden rule of faster web 80% of the end user response time is spent on the front-end
- 42. Start there. Golden rules of faster web
- 45. Each part has its rules
- 47. Network is slow
- 48. Less stuff Fewer requests Concatenate js/css Css sprites Inline images Too many resources
- 49. Less stuff Cache requests Expires header Revving Files External js/css Remove etags Resources re-downloaded
- 51. Smaller stuff Minify responses js, css, html remove formatting remove comments optimize images use tools Resources are too big
- 52. Closer stuff Use a CDN Resources are too far reduce latency
- 53. Closer stuff Flush document early Server can be slow Chunked encoding
- 54. Browser is slow
- 55. Scripts block loading javascriptjavascript csscss javascriptjavascript imgimg flashflash document.write location.href scripts order htmlhtml imgimg
- 57. csscss Unloaded styles block page rendering htmlhtml imgimg imgimg flashflash
- 60. Load scripts asynchronously var scriptTag = document.createElement("script") scriptTag.src = "http://www.example.org/js/lib.js" document.getElementsByTagName("head")[0] .appendChild(scriptTag)
- 61. Yield with timers // doSomethingLong() is too slow, split it doSomething() setTimeout(function() { doSomethingElse() }, 50)
- 64. is alive Collections to arrays Cache values to variables DOM access triggers a live query DOM
- 65. triggers events Event Delegation Events execute JS code DOM
- 66. Reflow is expensive Batch DOM changes âofflineâ Cloned element Document Fragment Display: none
- 67. Reflow is expensive Batch CSS changes One class to rule em all Dynamic style property
- 68. Inefficient element location CSS are bottom-up! Be specific on the ârightâ #header li a direction
- 69. Inefficient element location Go native in DOM getElementById Xpath querySelectorAll
- 70. Rules pitfalls
- 72. Expect the unexpected empty cache no compression
- 73. Know your users Track user capabilities
- 74. Conflicting rules DNS vs Parallel Inline vs External Concatenated vs Reuse
- 75. All that glitters is not gold
- 78. know the rules but...
- 81. Use tools at build time http://code.google.com/speed/tools.html
- 82. Use tools at build time Apache mod_pagespeed http://code.google.com/speed/tools.html
- 83. Code smart at run time http://www.slideshare.net/ajaxexperience2009/david-wei-and-changhao-jiang-presentation Adaptive Optimization
- 85. Questions?