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

Isn’t This a Network Issue?

2

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?

Compute

4

Web Browsing from a Compute Perspective

5

Web Browsing from a Compute Perspective

Compute

6

Web Browsing from a Compute Perspective

Compute

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

Breaking Down the Computations

11

HTML (Structure)

CSS (Style)

Breaking Down the Computations

11

Tag

Attribute

HTML (Structure)

CSS (Style)

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}

HTML Tag Analysis

12

www.163.com

Num

ber o

f Tag

s (K

)

5

Webpages

HTML Tag Analysis

12

www.163.com

Num

ber o

f Tag

s (K

)

5

Webpages

HTML Tag Analysis

12

www.163.com

www.google.com

Num

ber o

f Tag

s (K

)

5

Webpages

HTML Tag Analysis

12

www.163.com

www.google.com

Num

ber o

f Tag

s (K

)

5

Webpages

HTML Tag Analysis

12

www.163.com

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

Webpage Characterization

Performance/Energy Prediction

Processor Architecture

?

Eneg

y C

onsu

mpt

ion

(J)

0

1

2

3

4

Load time (s)

0 1 2 3 4 5 6

20

Energy-Efficiency Optimizations

Eneg

y C

onsu

mpt

ion

(J)

0

1

2

3

4

Load time (s)

0 1 2 3 4 5 6

20

Energy-Efficiency Optimizations

Eneg

y C

onsu

mpt

ion

(J)

0

1

2

3

4

Load time (s)

0 1 2 3 4 5 6

20

Energy-Efficiency Optimizations

Eneg

y C

onsu

mpt

ion

(J)

0

1

2

3

4

Load time (s)

0 1 2 3 4 5 6

20

Energy-Efficiency Optimizations

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

23

Compute

Web Applications

Web Runtime

Architecture

24

Compute

Web Applications

Web Runtime

Architecture

24

Compute

Web Applications

Web Runtime

Architecture

[IEEE MICRO’15]

[CAL] [HPCA’13]

[HPCA’15]

[ISCA’14]

25

Web-Based Technology is Everywhere

25

Web-Based Technology is Everywhere

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

Watt-Wise Web