it works on your computer... but does it render fast enough?
Post on 15-May-2015
1.584 Views
Preview:
DESCRIPTION
TRANSCRIPT
IT WORKS ON YOUR COMPUTERBUT DOES IT RENDER FAST ENOUGH?
WHO AM I?Diogo Antunesinfrastructure team @ Booking.comclient side performance improvement/optimization@dicode
OVERVIEWhow browsers render?browserstipstools/services
HOW DO BROWSERS DO THEIR JOB?
ARCHITECTURE
RENDERING
PARSING FLOW
WANT TO GO DEEPER?
http://taligarsiel.com/Projects/howbrowserswork1.htm
BACK TO THE BROWSERS!
CHROMElayout engine - webkit
js engine - v8
FIREFOXlayout engine - gecko
js engine - JägerMonkey (since 4.0)
SAFARIlayout engine - webkit
js engine - Nitro
INTERNET EXPLORERlayout engine - trident (since 4.0)
js engine - Chakra (since 9), JScript before
OPERAlayout engine - presto (since 7.0)
js engine - Carakan (since 10.50)
WHAT ARE WE TALKING ABOUT?Repaint
Reflow
JS rendering time
REPAINTchanges that affect visibility of the element
but not the layout
eg. opacity, background-color
REPAINTit's expensive
so avoid inline css/js
eg. opacity, background-color
REFLOWchanges that affect viewport/elements size
may be as expensive as laying out the whole page again
problem is many things trigger this event
VISUALIZING REFLOWmozilla.org
Gecko Reflow Visualization - mozilla.org
VISUALIZING REFLOWgoogle.co.jp
Gecko Reflow Visualization - google.co.jp
VISUALIZING REFLOWwikipedia
Gecko Reflow Visualization - Wikipedia
REFLOWeven more expensive than a repaint
can be triggered by many actions
so avoid inline css/js
and even a offsetWidth/Height calculation triggers it
JS RENDERING TIMEthe 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
JS RENDERING TIMEit can lock your rendering
it can also produce repaint/reflow
which means it will take longer to execute
LET'S LOOK AT THE WATERFALLS
CHROMEYahoo
Wumocomicstrip
FFYahoo
Wumocomicstrip
IE 9Yahoo
Wumocomicstrip
IE 8Yahoo
Wumocomicstrip
IE 7Yahoo
Wumocomicstrip
BEWAREnumber of concurrent connectionscss limits IE6-9choose wisely when to run your JS
BEWARE PARALLEL CONNECTIONSIE 6-7: 2IE 8-9: 6Chrome, Firefox, Safari: 6You can change this, but you don't want that
CSSBad selectors bad *avoid css expressionsput css in the document head
JSscripts @ bottom
async, defer, lazy load
beware of the DOM
micro optimization - really the last thing you should do
HTML
specify a charset
keep the number of DOM nodes as low as possible
avoid massive depth
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
HTTPUse gzip where possiblereduce dns lookupsuse cookieless domains for static contentuse a CDNavoid redirects
FRONTEND SPOFany 3rd party widgetcustom font downloadingeven your own JS can cause it...
wumocomicstrip.com
MOBILEMobile IS different!
then again not that different
SAFARI MOBILE (IOS)layout engine - webkit
js engine - Nitro
CHROME MOBILE (ANDROID)layout engine - webkit
js engine - v8
in iOS it uses a UI Webview
FIREFOX MOBILE (ANDROID)layout engine - gecko
js engine - JägerMonkey (since 4.0)
WATTERFALLS AGAIN
YAHOO IPAD2http://mobitest.akamai.com/m/results.cgi?testid=121112_XA_4T
YAHOO GALAXY S, ANDROID 2.2http://mobitest.akamai.com/m/results.cgi?testid=121112_3S_6J
YAHOO IPHONE 4, IOS 5http://mobitest.akamai.com/m/results.cgi?testid=121112_HM_6K
ADDITIONAL ISSUESlatencybattery lifenumber of requestsdata transfer size
TIPSuse data-uri for images wisely
HTML 5 api
W3C Mobile best practices
TOOLS
CHROME TOOLSChrome dev tools
CHROME TOOLSspeed tracer
FF TOOLSFF dev tools
FF TOOLSFirebug
OPERA TOOLSOpera Dragonfly
IE TOOLSAjax Dynatrace
CROSS BROWSERwebpagetest.org
DATA FTW
TRACK YOUR LOAD TIMEScustom
navigation timing api
harstorage.com
TRACK YOUR JS ERRORSwindow.onerror
http://errorception.com/
WEBPERF INSIGHTSgoogle page speed
google page service
yslow
PROFILE AND BENCHMARK YOUR JSjs perf
profilers in the dev tools
TRACK LATENCYhttps://github.com/yahoo/boomerang
WHAT BROWSERS SHOULD I REALLY CARE ABOUT?here comes the silver bullet!!!
it really.... depends
get to know your audience!
STATCOUNTER
W3SCHOOLS
NET APPLICATIONS
W3COUNTER
AKAMAI IO
BUILD YOUR FRONTEND CODE WISELY!some flexibility may be lost
follow the principles
but addapt them to your business customers/needs
THANKS!
Q & A
RESOURCES
http://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/
BOOKS
High Performance Web Sites
Web Performance Daybook Volume 2
Even Faster Web Sites
top related