exploiting webpage characteristics for energy- efficient
TRANSCRIPT
Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing
Yuhao Zhu, Aditya Srikanth, Jingwen Leng, Vijay Janapa Reddi Department of Electrical and Computer Engineering The University of Texas at Austin
Best of CAL — Feb. 11th, 2015
38
32
26
20
14
8
2
Load
tim
e (s
)
102 3 4 5 6 7 8
1002 3 4 5 6 7 8
10002
Network RTT (ms)
3
Isn’t This a Network Issue?
38
32
26
20
14
8
2
Load
tim
e (s
)
102 3 4 5 6 7 8
1002 3 4 5 6 7 8
10002
Network RTT (ms)
3
LTE 3G Adverse 3G
2G
Wi-Fi
Isn’t This a Network Issue?
38
32
26
20
14
8
2
Load
tim
e (s
)
102 3 4 5 6 7 8
1002 3 4 5 6 7 8
10002
Network RTT (ms)
3
LTE 3G Adverse 3G
2G
Wi-Fi
Isn’t This a Network Issue?
38
32
26
20
14
8
2
Load
tim
e (s
)
102 3 4 5 6 7 8
1002 3 4 5 6 7 8
10002
Network RTT (ms)
3
LTE 3G Adverse 3G
2G
Wi-Fi
Isn’t This a Network Issue?
38
32
26
20
14
8
2
Load
tim
e (s
)
102 3 4 5 6 7 8
1002 3 4 5 6 7 8
10002
Network RTT (ms)
3
Compute
LTE 3G Adverse 3G
2G
Wi-Fi
Isn’t This a Network Issue?
6
Web Browsing from a Compute Perspective
Compute
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
6
Web Browsing from a Compute Perspective
Compute
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Application
6
Web Browsing from a Compute Perspective
Compute
Architecture
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Application
Inputs
6
Web Browsing from a Compute Perspective
Compute
Architecture
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Application
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Application
7
Web Browsing from a Compute Perspective
Compute
Architecture
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Application
7
Web Browsing from a Compute Perspective
Compute
Architecture
Application
Frameworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Application
Runtime
7
Web Browsing from a Compute Perspective
Compute
Architecture
Application
Webpage-Level Characterization
8
Eneg
y C
onsu
mpt
ion
(J)
0
3
6
9
12
15
Load
tim
e (s
)
0
2
4
6
8w
ww.
163.
com
ww
w.cn
n.co
m
ww
w.im
db.c
om
ww
w.eb
ay.c
om
ww
w.fa
cebo
ok.c
om
ww
w.cr
aigsli
st.c
om
Webpage-Level Characterization
9
Eneg
y C
onsu
mpt
ion
(J)
0
3
6
9
12
15
Load
tim
e (s
)
0
2
4
6
8w
ww.
163.
com
ww
w.cn
n.co
m
ww
w.im
db.c
om
ww
w.eb
ay.c
om
ww
w.fa
cebo
ok.c
om
ww
w.cr
aigsli
st.c
om
Webpage-Level Characterization
10
Eneg
y C
onsu
mpt
ion
(J)
0
3
6
9
12
15
Load
tim
e (s
)
0
2
4
6
8w
ww.
163.
com
ww
w.cn
n.co
m
ww
w.im
db.c
om
ww
w.eb
ay.c
om
ww
w.fa
cebo
ok.c
om
ww
w.cr
aigsli
st.c
om
Webpage-Level Characterization
10
Eneg
y C
onsu
mpt
ion
(J)
0
3
6
9
12
15
Load
tim
e (s
)
0
2
4
6
8w
ww.
163.
com
ww
w.cn
n.co
m
ww
w.im
db.c
om
ww
w.eb
ay.c
om
ww
w.fa
cebo
ok.c
om
ww
w.cr
aigsli
st.c
omWebpages are inherently different. Need a systematic way to analyze them.
Breaking Down the Computations
11
Tag
Attribute
HTML (Structure)
CSS (Style)
<input value=“hpca2015”>
Breaking Down the Computations
11
Tag
Attribute
HTML (Structure)
CSS (Style)Selector
Property
<input value=“hpca2015”>
Breaking Down the Computations
11
Tag
Attribute
HTML (Structure)
CSS (Style)Selector
Property
<input value=“hpca2015”>
input {font-style: italic}
Breaking Down the Computations
11
DOM Tree
Tag
Attribute
HTML (Structure)
CSS (Style)Selector
Property
<input value=“hpca2015”>
input {font-style: italic}
Breaking Down the Computations
11
DOM Tree
Tag
Attribute
HTML (Structure)
CSS (Style)Selector
Property
<input value=“hpca2015”>
input {font-style: italic}
Num
ber o
f Tag
s (K
)
5
Webpages
HTML Tag Analysis
12
www.163.com Webpages have different tag counts
Tag Processing Overhead
13
ms mJ
0
175
350
525
700
0
45
90
135
180
h3 table img
Load time EnergyWebpages have different tag counts
Tag Processing Overhead
14
ms mJ
0
175
350
525
700
0
45
90
135
180
h3 table img
Load time EnergyWebpages have different tag counts
Tag Processing Overhead
15
ms mJ
0
175
350
525
700
0
45
90
135
180
h3 table img
Load time EnergyWebpages have different tag counts
Tag Processing Overhead
16
ms mJ
0
175
350
525
700
0
45
90
135
180
h3 table img
Load time EnergyWebpages have different tag counts
Tag Processing Overhead
16
ms mJ
Tags have different processing overheads
0
175
350
525
700
0
45
90
135
180
h3 table img
Load time EnergyWebpages have different tag counts
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Idea: predict webpage load time and energy consumption (responses) based on webpage characteristics (predictors)
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Group Model Predictors
HTML
Number of each tag
Number of each attribute
Number of DOM tree nodes
CSS
Number of rules
Number of each selector pattern
Number of each property
Content-dependent
Total image size
Total webpage size
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Group Model Predictors
HTML
Number of each tag
Number of each attribute
Number of DOM tree nodes
CSS
Number of rules
Number of each selector pattern
Number of each property
Content-dependent
Total image size
Total webpage size
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Group Model Predictors
HTML
Number of each tag
Number of each attribute
Number of DOM tree nodes
CSS
Number of rules
Number of each selector pattern
Number of each property
Content-dependent
Total image size
Total webpage size
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Elastic Regularization
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Elastic Regularization
Restricted Cubic Spline
Capturing Webpage-Level Diversity
17
Identify PredictorsTraining using hottest 2,500 webpages
Model Construction and RefinementStart from the linear model and progressively refine it
Model ValidationValidating on another 2,500 webpages
Elastic Regularization
Restricted Cubic Spline
Model Accuracy
0.00
0.05
0.10
0.15
0.20
performance
●●●●●●●●●●
●
●
●●●●●●
●
●
●
●
●●●
0.00
0.05
0.10
0.15
0.20
energy
Median prediction error is less than 5% for the performance and energy model
18
Erro
r rat
e
Nor
m. Q
oS V
iola
tion
0
0.2
0.4
0.6
0.8
1
1.2
Nor
m. E
nerg
y
0
0.2
0.4
0.6
0.8
1
Perf WS
Scheduling Results
21
Nor
m. Q
oS V
iola
tion
0
0.2
0.4
0.6
0.8
1
1.2
Nor
m. E
nerg
y
0
0.2
0.4
0.6
0.8
1
Perf WS
Scheduling Results
21
Nor
m. C
ut-off
Viol
atio
n
0
0.2
0.4
0.6
0.8
1
1.2
Nor
m. E
nerg
y
0
0.2
0.4
0.6
0.8
1
Perf WS
Scheduling Results
22
Nor
m. C
ut-off
Viol
atio
n
0
0.2
0.4
0.6
0.8
1
1.2
Nor
m. E
nerg
y
0
0.2
0.4
0.6
0.8
1
Perf WS
Scheduling Results
22
24
Compute
Web Applications
Web Runtime
Architecture
[IEEE MICRO’15]
[CAL] [HPCA’13]
[HPCA’15]
[ISCA’14]
Franeworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
25
Web-Based Technology is EverywhereFraneworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Franeworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Franeworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render
Franeworks and Libraries
HTML JavaScriptCSS
Language Runtime
Styling
Security LocalStorage
UserInputLayout
Render