It works on your computer... but does it render fast enough?
0 likes2,223 views
Diogo Antunes discusses browser rendering and optimization techniques for client-side performance, highlighting how different browsers handle rendering and JavaScript execution. Key factors affecting performance include repaint and reflow, minimizing DOM nodes, and optimizing CSS and JavaScript loading. The document also provides various tools and resources for monitoring website performance and adapting strategies based on user audience.
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