David Wei And Changhao Jiang Presentation

Adaptive Static Resource Optimization
AJAXian Conference 2009
Sep 15, 2009 Boston, MA
David Wei and ChanghaoJiang

Agenda

Optimization has to be adaptive!

Facebook: a site powered by AJAX
Challenges day-to-day
Deep Integration
Viral Adoption
Agile Development

Why we need adaptive packaging?
Day 1: Some smart engineers start a project!
<Print css tag for feature A>
<Print css tag for feature B>
<Print css tag for feature C>
<print HTML of feature A>
<print HTML of feature B>
<print HTML of feature C>
…
“Let’s write a new page with features A, B and C!”

Day 2: Some smart engineers run YSlow and thinks…
<Print css tag for feature A>
<Print css tag for feature B>
<Print css tag for feature C>
…
“A & B & C are always used; let’s package them together!”

Day 2: Awesome!
<Print css tag for feature A&B&C>
…

Day 3: feature C evolves…
<Print css tag for feature A & B & C>
If (users_signup_for_C()) { <print HTML of feature C>}
…

Day 3:
If (users_signup_for_C()) { <print HTML of feature C>}
…
A&B are always used, while C is not. ..

Day 4: feature C is deprecated
// no one uses C { <print HTML of feature C>}
…

Day 4: we start to send unused bits
// no one uses C { <print HTML of feature C>}
…
It is hard to remember we should remove C here.

One months later…
<Print css tag for feature A & B & C & D & E & F & G…>
if (F is used) <print HTML of feature F>
<print HTML of feature G>
if (F is not used) { <print HTML of feature E>}
…
Thousands of dead CSS rules in the package.

Static Resource Management @ Facebook
Challenges:
Deep Integration
Viral Adoption
Agile Development
Responses:
Separate requirement declaration and delivery of static resources
Requirement declaration: lives with HTML generation
Delivery: Globally optimized based on trace analysis

Adaptive Packager: Internals

Static Resource Management
Separate Declaration from actual Delivery
Back to Day 1:
require_static(A_css); <render HTML of feature A>
require_static(B_css); <render HTML of feature B>
require_static(C_css);<render HTML of feature C>
<deliver all required CSS>
<print all rendered HTML>
Requirement Declaration lives with HTML
Global Optimization on Delivery

Offline analysis
Packager: Global JS/CSS Optimization
Online process
require_static(A_css); <render HTML of feature A>
require_static(C_css); <render HTML of feature C>
Usage Pattern logs
Packaging algorithm
“Optimal” packages

Packager: models
Cost/Benefit tradeoff model:
To package two CSS/JS files A & B:
Cost: for page requests that only uses A, we waste the bytes of B (bandwidth)
Benefit: for page requests that uses both A and B: we save one round trip (latency )
Maximize “Profit” (Benefit – Cost)
Future: Users with different network connections have different packaging solutions
Usage Pattern logs
Packaging algorithm

Packager: models
Potential extensions (and trade-offs):
Consider all resources used in user browsing sessions, instead of user page loads
first page slower, subsequent pages faster
Consider cache probability: new files change more
New user slower, old users faster
Consider other costs:
CSS rules
JS executions
HTTP header overheads
Usage Pattern logs
Packaging algorithm

Packager: algorithm
A classic optimization problem:
Algorithms:
Greedy algorithm
Simulated Annealing
Clustering algorithms
Trade-off between offline computation cost and accuracy:
Greedy is good enough for us
Usage Pattern logs
Packaging algorithm

Adaptive Performance Optimization: more
Trace-based analysis for:
JS / CSS package optimization, image spriting
Progressive rendering for common JS/CSS/Images
Prioritization of resource delivery

Adaptive Packager: Operations

Packager: Deployment
Fully deployed since Nov 2008
Weekly based on previous week’s usage pattern (>100K unique usage patterns)
Javascript and CSS packaging only (image soon)
Efficiency monitors: size of wasted JS/CSS bytes; JS/CSS pkg numbers

Packager: scalable with development
Nov 2008 => May 2009

Nov 2008 => May 2009
'js/careers/jobs.js’,
'js/lib/ui/timeeditor.js’,
'resume/js/resumepro.js’,
'resume/js/resumesection.js’

Nov 2008 => May 2009

Packager: Experimental Image Spriting
The puzzle of image spriting:
Thousands of virtual gifts with static images, which to sprite?

The puzzle of image spriting:
The answer is…

Data set: ~3500 images in the code base at this time
comparing to <1500 js/css files

Lesson learnt

Human errors are unavoidable
Automatic analysis is preferable:
require_static(A_css); //forgot to remove the require_static
require_static(C_css); <render HTML of feature C>

Regression detection can be trickier
A measurement framework is necessary:
“The page has 10KB more Javascripts!”
Regression introduced by Packager? Or by developers? Or by feature adoption with new usage patterns?
Which feature introduces it?

Summary
Performance optimization has to be adaptive
Good interfaces help a lot
This is an emerging area -- long way to go

Thank you!

David Wei And Changhao Jiang Presentation

by Ajax Experience 2009 on Aug 30, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 5

Statistics

David Wei And Changhao Jiang Presentation — Presentation Transcript