It works on your computer... but does it render fast enough?

1,995 views
1,858 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,995
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

It works on your computer... but does it render fast enough?

  1. 1. IT WORKS ON YOUR COMPUTERBUTDOESITRENDERFASTENOUGH?
  2. 2. WHO AM I?Diogo Antunesinfrastructure team @ Booking.comclient side performance improvement/optimization@dicode
  3. 3. OVERVIEWhow browsers render?browserstipstools/services
  4. 4. HOW DO BROWSERS DO THEIR JOB?
  5. 5. ARCHITECTURE
  6. 6. RENDERING
  7. 7. PARSING FLOW
  8. 8. WANT TO GO DEEPER?http://taligarsiel.com/Projects/howbrowserswork1.htm
  9. 9. BACK TO THE BROWSERS!
  10. 10. CHROMElayout engine - webkitjs engine - v8
  11. 11. FIREFOXlayout engine - geckojs engine - JägerMonkey (since 4.0)
  12. 12. SAFARIlayout engine - webkitjs engine - Nitro
  13. 13. INTERNET EXPLORERlayout engine - trident (since 4.0)js engine - Chakra (since 9), JScript before
  14. 14. OPERAlayout engine - presto (since 7.0)js engine - Carakan (since 10.50)
  15. 15. WHAT ARE WE TALKING ABOUT?RepaintReflowJS rendering time
  16. 16. REPAINTchanges that affect visibility of the elementbut not the layouteg. opacity, background-color
  17. 17. REPAINTits expensiveso avoid inline css/jseg. opacity, background-color
  18. 18. REFLOWchanges that affect viewport/elements sizemay be as expensive as laying out the whole page againproblem is many things trigger this event
  19. 19. VISUALIZING REFLOWmozilla.orgGecko  Reflow  Visualization  -­  mozilla.org
  20. 20. VISUALIZING REFLOWgoogle.co.jpGecko  Reflow  Visualization  -­  google.co.jp
  21. 21. VISUALIZING REFLOWwikipediaGecko  Reflow  Visualization  -­  Wikipedia
  22. 22. REFLOWeven more expensive than a repaintcan be triggered by many actionsso avoid inline css/jsand even a offsetWidth/Height calculation triggers it
  23. 23. JS RENDERING TIMEthe model of the web is synchronouswhen a script tag appears, it will parse and execute the scriptin FF and Webkit another thread continues to parse the HTML doc
  24. 24. JS RENDERING TIMEit can lock your renderingit can also produce repaint/reflowwhich means it will take longer to execute
  25. 25. LETS LOOK AT THE WATERFALLS
  26. 26. CHROMEYahooWumocomicstrip
  27. 27. FFYahooWumocomicstrip
  28. 28. IE 9YahooWumocomicstrip
  29. 29. IE 8YahooWumocomicstrip
  30. 30. IE 7YahooWumocomicstrip
  31. 31. BEWAREnumber of concurrent connectionscss limits IE6-9choose wisely when to run your JS
  32. 32. BEWARE PARALLEL CONNECTIONSIE 6-7: 2IE 8-9: 6Chrome, Firefox, Safari: 6You can change this, but you dont want that
  33. 33. CSSBad selectors bad *avoid css expressionsput css in the document head
  34. 34. JSscripts @ bottomasync, defer, lazy loadbeware of the DOMmicro optimization - really the last thing you should do
  35. 35. HTML
  36. 36. specify a charsetkeep the number of DOM nodes as low as possibleavoid massive depth
  37. 37. IMAGESset width and heightcrop extra space around imagesuse the best file formateg. use png-8, gif to reduce the number of colors in the pallette
  38. 38. HTTPUse gzip where possiblereduce dns lookupsuse cookieless domains for static contentuse a CDNavoid redirects
  39. 39. FRONTEND SPOFany 3rd party widgetcustom font downloadingeven your own JS can cause it...wumocomicstrip.com
  40. 40. MOBILEMobile IS different!then again not that different
  41. 41. SAFARI MOBILE (IOS)layout engine - webkitjs engine - Nitro
  42. 42. CHROME MOBILE (ANDROID)layout engine - webkitjs engine - v8in iOS it uses a UI Webview
  43. 43. FIREFOX MOBILE (ANDROID)layout engine - geckojs engine - JägerMonkey (since 4.0)
  44. 44. WATTERFALLS AGAIN
  45. 45. YAHOO IPAD2http://mobitest.akamai.com/m/results.cgi?testid=121112_XA_4T
  46. 46. YAHOO GALAXY S, ANDROID 2.2http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J
  47. 47. YAHOO IPHONE 4, IOS 5http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K
  48. 48. ADDITIONAL ISSUESlatencybattery lifenumber of requestsdata transfer size
  49. 49. TIPSuse data-uri for images wiselyHTML 5 apiW3C Mobile best practices
  50. 50. TOOLS
  51. 51. CHROME TOOLSChrome dev tools
  52. 52. CHROME TOOLSspeed tracer
  53. 53. FF TOOLSFF dev tools
  54. 54. FF TOOLSFirebug
  55. 55. OPERA TOOLSOpera Dragonfly
  56. 56. IE TOOLSAjax Dynatrace
  57. 57. CROSS BROWSERwebpagetest.org
  58. 58. DATA FTW
  59. 59. TRACK YOUR LOAD TIMEScustomnavigation timing apiharstorage.com
  60. 60. TRACK YOUR JS ERRORSwindow.onerrorhttp://errorception.com/
  61. 61. WEBPERF INSIGHTSgoogle page speedgoogle page serviceyslow
  62. 62. PROFILE AND BENCHMARK YOUR JSjs perfprofilers in the dev tools
  63. 63. TRACK LATENCYhttps://github.com/yahoo/boomerang
  64. 64. WHAT BROWSERS SHOULD I REALLY CARE ABOUT?here comes the silver bullet!!!it really.... dependsget to know your audience!
  65. 65. STATCOUNTER
  66. 66. W3SCHOOLS
  67. 67. NET APPLICATIONS
  68. 68. W3COUNTER
  69. 69. AKAMAI IO
  70. 70. BUILD YOUR FRONTEND CODE WISELY!some flexibility may be lostfollow the principlesbut addapt them to your business customers/needs
  71. 71. THANKS!Q & A
  72. 72. RESOURCEShttp://taligarsiel.com/Projects/howbrowserswork1.htmhttps://developers.google.com/speed/docs/best-practices/rules_introhttp://www.stevesouders.com/http://www.w3.org/TR/mobile-bp/http://developer.yahoo.com/performance/rules.htmlhttp://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/
  73. 73. BOOKSHigh Performance Web SitesWeb Performance Daybook Volume 2Even Faster Web Sites

×