1. jQuery internals and frontend
Artur Cistov – PyCon Ireland 2010
2. Why bother?
500ms slower = 20% drop in traffic (Google)
400ms slower = 59% drop in fullpage traffic (Yahoo)
100ms slower = 1% drop in sales (Amazon)
3. Why bother?
Google added site speed as a factor to search
ranking on April 9, 2010
4. Why bother?
Less CPU power and memory than
on the desktop
25Kb cache limit per file on iPhone
6. Quake II GWT Port
7. Plan for this talk
jQuery under the hood
Tools & Resources
16. Maximising parallel downloads
Browsers have 26 simultaneous request
limit per domain name.
Subdomains are treated as different
domains in this context
17. Maximising parallel downloads
LABjs “allpurpose, ondemand
location, into any page, at any time.”
Allows to load scripts in parallel
Occur when something made visible or
hidden without altering the layout.
E.g. outline added to an element,
background color or visibility changed
Repainting is expensive.
Reflow occurs when the DOM is
manipulated in a way it affects the
layout. E.g. style is changed to affect the
layout, className property is changed or
browser window is resized.
Reflows are even more expensive than
Reflows are very expensive in terms of
performance, and is one of the main causes
of slow DOM scripts, especially on devices
with low processing power, such as phones.
In many cases, they are equivalent to laying
out the entire page again.
37. Reflows are triggered by
Style is changed that affects the layout
className property of an element is changed
DOM modifications (e.g. adding new
using offsetWidth / offsetHeight /
39. Minimising reflows
Batch DOM changes and/or perform them off the DOM:
Detaching element from the DOM, making changes
Hide element before changes, apply them & show
76. Google Closure Compiler
Opensource, written in Java & easy to extend
Up to 6070% filesize savings
Advanced code transforms based on syntax tree
including constant & function inlining, dead code
Highlights code patterns that may not work well on
jQuery gained 13% minification improvement by
switiching to Google Compiler from YUI compressor
Opensource web performance exploration tool
Yahoo Exceptional performance team
Google Performance resources
Steve Souders, ex Chief Performance Yahoo