49
Speeding up Web Page Loads with Shandian Sophia Wang University of Washington
Speeding up Web Page Loads with Shandian
Sophia WangUniversity of Washington
3/27/16 2
Why is page load time (PLT) slow?
3/27/16 3
<html><body onload=“done();”><link src=‘1.css’><script src=‘d3.js’></script><script src=‘2.js’></script><div id=“content”></div></body></html>
3/27/16 4
Elapsed Time
3/27/16 5Network Computation
html
Elapsed Time
3/27/16 6Network Computation Dependency
html
Elapsed Time
css
3/27/16 7Network Computation Dependency
html
Elapsed Time
css
js
Components thataccesstothesameresourcecan’texecuteatthesametime
3/27/16 8Network Computation Dependency
html
Elapsed Time
css
js
js
3/27/16 9Network Computation Dependency
html
Elapsed Time
Page load
css
js
js
A simple page incurs complex load process, mainly due to interactions between
HTML/JS/CSS.
3/27/16 10
How much can SPDY help PLT?
3/27/16 11
html
Elapsed Time
Page load
css
js
js
3/27/16 12Network Computation Dependency
html
Elapsed Time
Page load
css
js
js
3/27/16 13Network Computation Dependency
html
Elapsed Time
Page load
css
js
js
A technique that helps one factor of PLT is hard to help the overall PLT.
3/27/16 14
What does the simplest dependency graph look like?
3/27/16 15Network Computation Dependency
???
Elapsed Time
Page load
css
js
js
3/27/16 16Network Computation Dependency
???
Elapsed Time
Page load
css
js
js
Time to interact
Can we make every Web page look like this?
3/27/16 17
Yes, we want to make every page like this, automatically.
Approach: Split Browser
• Preprocess Web pages on a proxy server to simplify the client-side page load process
3/27/16 18
Approach: Split Browser
• Preprocess Web pages on a proxy server according to whether they are used initially
3/27/16 19
???
Elapsed Time
Page load
css
js
js
Time to interact
Load-timestate
• Usedinaninitialpageload
• Displayasfast aspossible
Approach: Split Browser
• Preprocess Web pages on a proxy server according to whether they are used initially
3/27/16 20
???
Elapsed Time
Page load
css
js
js
Time to interact
Post-loadstate
• Notusedinaninitialpageload
• Ensurecorrectness offutureinteractions,andcompatibility withexistingtechnologies
Outline
• Load-time state• Post-load state• Deployment and implementation• Evaluation
3/27/16 21
Outline
• Load-time state• Post-load state• Deployment and implementation• Evaluation
3/27/16 22
Load-time State
• Goal– Display as fast as possible
• Approach– Eliminate both contents and computation of JS
and CSS on the client as many as possible
3/27/16 23
Loading load-time state
3/27/16 24
{“loadTimeState”:{“css”:[“#main{font-size:12px;}"],“html”:{“children”: [{“tagName”:”body”, ...“children”: [..., {“tagName”:”div”,“id”:”main”,“css”:[0]
}]}]}}
Loading load-time state
3/27/16 25
{“loadTimeState”:{“css”:[“#main{font-size:12px;}"],“html”:{“children”: [{“tagName”:”body”, ...“children”: [..., {“tagName”:”div”,“id”:”main”,“css”:[0]
}]}]}}
AlistofmatchedCSSrules
Loading load-time state
3/27/16 26
{“loadTimeState”:{“css”:[“#main{font-size:12px;}"],“html”:{“children”: [{“tagName”:”body”, ...“children”: [..., {“tagName”:”div”,“id”:”main”,“css”:[0]
}]}]}}
VisibleHTMLelements
Loading load-time state
3/27/16 27
{“loadTimeState”:{“css”:[“#main{font-size:12px;}"],“html”:{“children”: [{“tagName”:”body”, ...“children”: [..., {“tagName”:”div”,“id”:”main”,“css”:[0]
}]}]}}
WhichHTMLelementmatcheswhichCSSrules
Loading load-time state
3/27/16 28Network Computation Dependency
???
Elapsed Time
Page load
css
js
js
Outline
• Load-time state• Post-load state• Deployment and implementation• Evaluation
3/27/16 29
Post-load state
• Goals– Correctness of future interactions
• Requirement: Post-load and load-time state contain full state of a Web page
– Compatibility• Requirement: Post-load state contains unmodified
JS/CSS snippets
3/27/16 30
Vanilla post-load state
• The entire Web page itself• Pros
– Easy to ensure correctness of interactions and compatibility with caching/CDN
• Cons– Redundant contents and computation from load-
time state
3/27/16 31
From here, how much can we improve?
What’s equivalent to eval’ing this CSS?
3/27/16 32
#main {font-size:12px;
}#main {font-size:12px;
}#main {font-size:12px;
}
What’s equivalent to eval’ing this CSS?
3/27/16 33
#main {font-size:12px;
}#main {font-size:12px;
}#main {font-size:12px;
}
#main {font-size:12px;
}
What’s equivalent to eval’ing this JS?
3/27/16 34
a += “hello world!\n”
a += “hello world!\n”
a += “hello world!\n”
What’s equivalent to eval’ing this JS?
3/27/16 35
a += “hello world!\n”
a += “hello world!\n”
a += “hello world!\n”
a += “hello world!\n”+ ”hello world!\n”+ ”hello world!\n”
What’s equivalent to eval’ing this JS?
3/27/16 36
function add(a, b) {return a + b;
}function add(a, b) {return a + b;
}function add(a, b) {return a + b;
}
What’s equivalent to eval’ing this JS?
3/27/16 37
function add(a, b) {return a + b;
}function add(a, b) {return a + b;
}function add(a, b) {return a + b;
}
function add(a, b) {return a + b;
}
Post-load state
• Exploit the idempotency of evaluating CSS rules and JavaScript functions/statements– Eliminate redundant content that appeared in
load-time state– Capture results of non-idempotent JS statements
3/27/16 38
Outline
• Load-time state• Post-load state• Deployment and implementation• Evaluation
3/27/16 39
Deployment
• How to fast load on the proxy server?– Use a beefy server– Co-locate with Web front ends
• As part of the website: reverse proxy• As a 3rd-party service: cloud servers
3/27/16 40
ClientWebserver Proxy
serverhtml
css
js CDNsEdgecache
image
video
Implementation
• Server extension– Chrome’s content_shell– Only handle HTML/JS/CSS
• Client browser– Chrome– JSON lexer, Blink, V8
3/27/16 41
Outline
• Load-time state• Post-load state• Deployment and implementation• Evaluation
3/27/16 42
Experimental setup
• Server: 2.4GHz 16 core CPU, 16GB memory• Clients
– Mobile: Nexus S, 1GHz Cortex-A8 CPU, 512MB RAM
– Desktop: Linux VM, 2GHz CPU, 1GB memory
• Top 100 Web pages
3/27/16 43
PLT on mobile
0
5
10
15
20
25
30
0 50 100
Abso
lute
PLT
s (s
econ
ds) Chrome
SplitBrowser
3/27/16 44
Shandian helps 60% in the median case
PLT w/ varying RTT
3/27/16 45
0
0.2
0.4
0.6
0.8
1
0 5 10 15 20 25 30
CD
F
PLT
0, Chrome0, SP
200ms, Chrome200ms, SP
Unlike Chrome, Shandian is not sensitive to RTT, due to simplified page load process
IncreasedgapforChrome
SmallgapforShandian
PLT w/ varying CPU
3/27/16 46
0
0.2
0.4
0.6
0.8
1
0 10 20 30 40 50 60
CD
F
PLT
2GHz, Chrome2GHz, SP
1.5GHz, Chrome1.5GHz, SP
1GHz, Chrome1GHz, SP
CPU has the same amount of impact for both Chrome and Shandian
More results
• PLT breakdowns– Time spent on proxy server is negligible– Most time is spent on client
• Page size– Shandian increases page size by 1% after
applying gzip compression
3/27/16 47
Difference from related work
• Amazon Silk, Opera mini– Our client can run JavaScript– We place proxy servers near Web servers
• Prioritizing resources (server push, Klotski)– We remove page load dependencies on the client
3/27/16 48
Summary
• Split the page state according to whether they are used for an initial page load
• The dependency graph until the page is loaded is fairly simple
• Improve PLT by more than half consistently for various settings
• Is compatible with caching/CDNs
3/27/16 49
![Probabilistic Streaming Tensor Decompositionzhe/pdf/POST.pdf · Probabilistic Streaming Tensor Decomposition Yishuai Du y, Yimin Zheng , Kuang-chih Lee], Shandian Zhey University](https://static.documents.pub/doc/80x56/5eb6be1e3d209031916fd245/probabilistic-streaming-tensor-decomposition-zhepdfpostpdf-probabilistic-streaming.jpg)
