Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing

Best of CAL presented at HPCA 2015.

Transcript

1. 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
2. Isn’t This a Network Issue? 2
3. 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?
4. 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?
5. 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?
6. 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?
7. 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?
8. Compute 4 Web Browsing from a Compute Perspective
9. 5 Web Browsing from a Compute Perspective Compute
10. 6 Web Browsing from a Compute Perspective Compute
11. 6 Web Browsing from a Compute Perspective Compute Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render
12. 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
13. 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
14. 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
15. 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
16. 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
17. 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
18. 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
19. 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
20. 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
21. 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.
22. Breaking Down the Computations 11
23. Breaking Down the Computations 11 HTML (Structure) CSS (Style)
24. Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style)
25. Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style) <input value=“hpca2015”>
26. Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style) Selector Property <input value=“hpca2015”>
27. Breaking Down the Computations 11 Tag Attribute HTML (Structure) CSS (Style) Selector Property <input value=“hpca2015”> input {font-style: italic}
28. Breaking Down the Computations 11 DOM Tree Tag Attribute HTML (Structure) CSS (Style) Selector Property <input value=“hpca2015”> input {font-style: italic}
29. Breaking Down the Computations 11 DOM Tree Tag Attribute HTML (Structure) CSS (Style) Selector Property <input value=“hpca2015”> input {font-style: italic}
30. HTML Tag Analysis 12 www.163.com
31. Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com
32. Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com www.google.com
33. Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com www.google.com
34. Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com
35. Number of Tags (K) 5 Webpages HTML Tag Analysis 12 www.163.com Webpages have different tag counts
36. 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
37. 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
38. 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
39. 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
40. 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
41. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine it Model Validation Validating on another 2,500 webpages Idea: predict webpage load time and energy consumption (responses) based on webpage characteristics (predictors)
42. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine it Model Validation Validating on another 2,500 webpages
43. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine 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
44. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine 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
45. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine 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
46. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine it Model Validation Validating on another 2,500 webpages
47. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine it Model Validation Validating on another 2,500 webpages Elastic Regularization
48. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine it Model Validation Validating on another 2,500 webpages Elastic Regularization Restricted Cubic Spline
49. Capturing Webpage-Level Diversity 17 Identify Predictors Training using hottest 2,500 webpages Model Construction and Refinement Start from the linear model and progressively refine it Model Validation Validating on another 2,500 webpages Elastic Regularization Restricted Cubic Spline
50. 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
51. Webpage Characterization Performance/Energy Prediction Processor Architecture ?
52. Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
53. Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
54. Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
55. Enegy Consumption (J) 0 1 2 3 4 Load time (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
56. 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
57. 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
58. Norm. Cut-off 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
59. Norm. Cut-off 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
60. 23 Compute Web Applications Web Runtime Architecture
61. 24 Compute Web Applications Web Runtime Architecture
62. 24 Compute Web Applications Web Runtime Architecture [IEEE MICRO’15] [CAL] [HPCA’13] [HPCA’15] [ISCA’14]
63. 25 Web-Based Technology is Everywhere
64. 25 Web-Based Technology is Everywhere
65. 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
66. Watt-Wise Web