It works on your computer... but does it render fast enough?
•
0 gostou•2,218 visualizações
Most of us devs have a nice machine and/or a pretty fancy phone. The sites you develop always look smooth and sweet on your devices but... Do your users have the kind of experience you wish? In this talk I will review, on a high level, how the browser rendering works, how your HTML, CSS and/or js impacts on page rendering/loading and share techniques to minimize the impact. presented @ codebits VI (2012) in Lisbon
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a It works on your computer... but does it render fast enough?
Semelhante a It works on your computer... but does it render fast enough? (20)
Último
Último (20)
It works on your computer... but does it render fast enough?
- 1. IT WORKS ON YOUR COMPUTER BUTDOESITRENDERFASTENOUGH?
- 2. WHO AM I? Diogo Antunes infrastructure team @ Booking.com client side performance improvement/optimization @dicode
- 4. HOW DO BROWSERS DO THEIR JOB?
- 5. ARCHITECTURE
- 6. RENDERING
- 7. PARSING FLOW
- 8. WANT TO GO DEEPER? http://taligarsiel.com/Projects/howbrowserswork1.htm
- 9. BACK TO THE BROWSERS!
- 10. CHROME layout engine - webkit js engine - v8
- 11. FIREFOX layout engine - gecko js engine - JägerMonkey (since 4.0)
- 12. SAFARI layout engine - webkit js engine - Nitro
- 13. INTERNET EXPLORER layout engine - trident (since 4.0) js engine - Chakra (since 9), JScript before
- 14. OPERA layout engine - presto (since 7.0) js engine - Carakan (since 10.50)
- 15. WHAT ARE WE TALKING ABOUT? Repaint Reflow JS rendering time
- 16. REPAINT changes that affect visibility of the element but not the layout eg. opacity, background-color
- 17. REPAINT it's expensive so avoid inline css/js eg. opacity, background-color
- 18. REFLOW changes that affect viewport/elements size may be as expensive as laying out the whole page again problem is many things trigger this event
- 19. VISUALIZING REFLOW mozilla.org Gecko Reflow Visualization - mozilla.org
- 20. VISUALIZING REFLOW google.co.jp Gecko Reflow Visualization - google.co.jp
- 21. VISUALIZING REFLOW wikipedia Gecko Reflow Visualization - Wikipedia
- 22. REFLOW even more expensive than a repaint can be triggered by many actions so avoid inline css/js and even a offsetWidth/Height calculation triggers it
- 23. JS RENDERING TIME the model of the web is synchronous when a script tag appears, it will parse and execute the script in FF and Webkit another thread continues to parse the HTML doc
- 24. JS RENDERING TIME it can lock your rendering it can also produce repaint/reflow which means it will take longer to execute
- 25. LET'S LOOK AT THE WATERFALLS
- 32. BEWARE number of concurrent connections css limits IE6-9 choose wisely when to run your JS
- 33. BEWARE PARALLEL CONNECTIONS IE 6-7: 2 IE 8-9: 6 Chrome, Firefox, Safari: 6 You can change this, but you don't want that
- 35. CSS Bad selectors bad * avoid css expressions put css in the document head
- 36. JS scripts @ bottom async, defer, lazy load beware of the DOM micro optimization - really the last thing you should do
- 37. HTML
- 38. specify a charset keep the number of DOM nodes as low as possible avoid massive depth
- 39. IMAGES set width and height crop extra space around images use the best file format eg. use png-8, gif to reduce the number of colors in the pallette
- 40. HTTP Use gzip where possible reduce dns lookups use cookieless domains for static content use a CDN avoid redirects
- 41. FRONTEND SPOF any 3rd party widget custom font downloading even your own JS can cause it... wumocomicstrip.com
- 42. MOBILE Mobile IS different! then again not that different
- 43. SAFARI MOBILE (IOS) layout engine - webkit js engine - Nitro
- 44. CHROME MOBILE (ANDROID) layout engine - webkit js engine - v8 in iOS it uses a UI Webview
- 45. FIREFOX MOBILE (ANDROID) layout engine - gecko js engine - JägerMonkey (since 4.0)
- 48. YAHOO GALAXY S, ANDROID 2.2 http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J
- 49. YAHOO IPHONE 4, IOS 5 http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K
- 50. ADDITIONAL ISSUES latency battery life number of requests data transfer size
- 51. TIPS use data-uri for images wisely HTML 5 api W3C Mobile best practices
- 52. TOOLS
- 53. CHROME TOOLS Chrome dev tools
- 57. FF TOOLS FF dev tools
- 58. FF TOOLS Firebug
- 62. DATA FTW
- 63. TRACK YOUR LOAD TIMES custom navigation timing api harstorage.com
- 64. TRACK YOUR JS ERRORS window.onerror http://errorception.com/
- 65. WEBPERF INSIGHTS google page speed google page service yslow
- 66. PROFILE AND BENCHMARK YOUR JS js perf profilers in the dev tools
- 68. WHAT BROWSERS SHOULD I REALLY CARE ABOUT? here comes the silver bullet!!! it really.... depends get to know your audience!
- 69. STATCOUNTER
- 70. W3SCHOOLS
- 71. NET APPLICATIONS
- 72. W3COUNTER
- 73. AKAMAI IO
- 74. BUILD YOUR FRONTEND CODE WISELY! some flexibility may be lost follow the principles but addapt them to your business customers/needs
- 75. THANKS! Q & A
- 77. BOOKS High Performance Web Sites Web Performance Daybook Volume 2 Even Faster Web Sites