Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing

Slide 1

Slide 1 text

Exploiting Webpage Characteristics for Energy- Efﬁcient 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

Slide 2

Slide 2 text

Isn’t This a Network Issue? 2

Slide 3

Slide 3 text

38 32 26 20 14 8 2 Load time (s) 10 2 3 4 5 6 7 8 100 2 3 4 5 6 7 8 1000 2 Network RTT (ms) 3 Isn’t This a Network Issue?

Slide 4

Slide 4 text

38 32 26 20 14 8 2 Load time (s) 10 2 3 4 5 6 7 8 100 2 3 4 5 6 7 8 1000 2 Network RTT (ms) 3 LTE 3G Adverse 3G 2G Wi-Fi Isn’t This a Network Issue?

Slide 5

Slide 5 text

38 32 26 20 14 8 2 Load time (s) 10 2 3 4 5 6 7 8 100 2 3 4 5 6 7 8 1000 2 Network RTT (ms) 3 LTE 3G Adverse 3G 2G Wi-Fi Isn’t This a Network Issue?

Slide 6

Slide 6 text

38 32 26 20 14 8 2 Load time (s) 10 2 3 4 5 6 7 8 100 2 3 4 5 6 7 8 1000 2 Network RTT (ms) 3 LTE 3G Adverse 3G 2G Wi-Fi Isn’t This a Network Issue?

Slide 7

Slide 7 text

38 32 26 20 14 8 2 Load time (s) 10 2 3 4 5 6 7 8 100 2 3 4 5 6 7 8 1000 2 Network RTT (ms) 3 Compute LTE 3G Adverse 3G 2G Wi-Fi Isn’t This a Network Issue?

Slide 8

Slide 8 text

Compute 4 Web Browsing from a Compute Perspective

Slide 9

Slide 9 text

5 Web Browsing from a Compute Perspective Compute

Slide 10

Slide 10 text

6 Web Browsing from a Compute Perspective Compute

Slide 11

Slide 11 text

6 Web Browsing from a Compute Perspective Compute Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render

Slide 12

Slide 12 text

6 Web Browsing from a Compute Perspective Compute Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application

Slide 13

Slide 13 text

6 Web Browsing from a Compute Perspective Compute Architecture Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application

Slide 14

Slide 14 text

Inputs 6 Web Browsing from a Compute Perspective Compute Architecture Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application

Slide 15

Slide 15 text

Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application 7 Web Browsing from a Compute Perspective Compute Architecture

Slide 16

Slide 16 text

Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application 7 Web Browsing from a Compute Perspective Compute Architecture Application

Slide 17

Slide 17 text

Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Runtime 7 Web Browsing from a Compute Perspective Compute Architecture Application

Slide 18

Slide 18 text

Webpage-Level Characterization 8 Enegy Consumption (J) 0 3 6 9 12 15 Load time (s) 0 2 4 6 8 www.163.com www.cnn.com www.imdb.com www.ebay.com www.facebook.com www.craigslist.com

Slide 19

Slide 19 text

Webpage-Level Characterization 9 Enegy Consumption (J) 0 3 6 9 12 15 Load time (s) 0 2 4 6 8 www.163.com www.cnn.com www.imdb.com www.ebay.com www.facebook.com www.craigslist.com

Slide 20

Slide 20 text

Webpage-Level Characterization 10 Enegy Consumption (J) 0 3 6 9 12 15 Load time (s) 0 2 4 6 8 www.163.com www.cnn.com www.imdb.com www.ebay.com www.facebook.com www.craigslist.com

Slide 21

Slide 21 text

Webpage-Level Characterization 10 Enegy Consumption (J) 0 3 6 9 12 15 Load time (s) 0 2 4 6 8 www.163.com www.cnn.com www.imdb.com www.ebay.com www.facebook.com www.craigslist.com Webpages are inherently different. Need a systematic way to analyze them.

Slide 22

Slide 22 text

Breaking Down the Computations 11

Slide 23

Slide 23 text

Breaking Down the Computations 11 HTML (Structure) CSS (Style)

Slide 24

Slide 24 text

Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style)

Slide 25

Slide 25 text

Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style)

Slide 26

Slide 26 text

Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style) Selector Property

Slide 27

Slide 27 text

Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style) Selector Property input {font-style: italic}

Slide 28

Slide 28 text

Breaking Down the Computations 11 DOM Tree Tag Attribute HTML (Structure) CSS (Style) Selector Property input {font-style: italic}

Slide 29

Slide 29 text

Breaking Down the Computations 11 DOM Tree Tag Attribute HTML (Structure) CSS (Style) Selector Property input {font-style: italic}

Slide 30

Slide 30 text

HTML Tag Analysis 12 www.163.com

Slide 31

Slide 31 text

Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com

Slide 32

Slide 32 text

Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com www.google.com

Slide 33

Slide 33 text

Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com www.google.com

Slide 34

Slide 34 text

Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com

Slide 35

Slide 35 text

Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com Webpages have different tag counts

Slide 36

Slide 36 text

Tag Processing Overhead 13 ms mJ 0 175 350 525 700 0 45 90 135 180 h3 table img Load time Energy Webpages have different tag counts

Slide 37

Slide 37 text

Tag Processing Overhead 14 ms mJ 0 175 350 525 700 0 45 90 135 180 h3 table img Load time Energy Webpages have different tag counts

Slide 38

Slide 38 text

Tag Processing Overhead 15 ms mJ 0 175 350 525 700 0 45 90 135 180 h3 table img Load time Energy Webpages have different tag counts

Slide 39

Slide 39 text

Tag Processing Overhead 16 ms mJ 0 175 350 525 700 0 45 90 135 180 h3 table img Load time Energy Webpages have different tag counts

Slide 40

Slide 40 text

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 Energy Webpages have different tag counts

Slide 41

Slide 41 text

Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Reﬁnement Start from the linear model and progressively reﬁne it Model Validation Validating on another 2,500 webpages Idea: predict webpage load time and energy consumption (responses) based on webpage characteristics (predictors)

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Reﬁnement Start from the linear model and progressively reﬁne it Model Validation Validating 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

Slide 44

Slide 44 text

Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Reﬁnement Start from the linear model and progressively reﬁne it Model Validation Validating 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

Slide 45

Slide 45 text

Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Reﬁnement Start from the linear model and progressively reﬁne it Model Validation Validating 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

Slide 46

Slide 46 text

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Slide 50

Slide 50 text

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 Error rate

Slide 51

Slide 51 text

Webpage Characterization Performance/Energy Prediction Processor Architecture ?

Slide 52

Slide 52 text

Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efﬁciency Optimizations

Slide 53

Slide 53 text

Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efﬁciency Optimizations

Slide 54

Slide 54 text

Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efﬁciency Optimizations

Slide 55

Slide 55 text

Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efﬁciency Optimizations

Slide 56

Slide 56 text

Norm. QoS Violation 0 0.2 0.4 0.6 0.8 1 1.2 Norm. Energy 0 0.2 0.4 0.6 0.8 1 Perf WS Scheduling Results 21

Slide 57

Slide 57 text

Norm. QoS Violation 0 0.2 0.4 0.6 0.8 1 1.2 Norm. Energy 0 0.2 0.4 0.6 0.8 1 Perf WS Scheduling Results 21

Slide 58

Slide 58 text

Norm. Cut-oﬀ Violation 0 0.2 0.4 0.6 0.8 1 1.2 Norm. Energy 0 0.2 0.4 0.6 0.8 1 Perf WS Scheduling Results 22

Slide 59

Slide 59 text

Norm. Cut-oﬀ Violation 0 0.2 0.4 0.6 0.8 1 1.2 Norm. Energy 0 0.2 0.4 0.6 0.8 1 Perf WS Scheduling Results 22

Slide 60

Slide 60 text

23 Compute Web Applications Web Runtime Architecture

Slide 61

Slide 61 text

24 Compute Web Applications Web Runtime Architecture

Slide 62

Slide 62 text

24 Compute Web Applications Web Runtime Architecture [IEEE MICRO’15] [CAL] [HPCA’13] [HPCA’15] [ISCA’14]

Slide 63

Slide 63 text

25 Web-Based Technology is Everywhere

Slide 64

Slide 64 text

25 Web-Based Technology is Everywhere

Slide 65

Slide 65 text

Franeworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render 25 Web-Based Technology is Everywhere Franeworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Franeworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Franeworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Franeworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render

Slide 66

Slide 66 text

Watt-Wise Web