Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing

3c332dfc0b438785cb10c5234652dd66?s=47 Yuhao Zhu
February 11, 2015

Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing

Best of CAL presented at HPCA 2015.

3c332dfc0b438785cb10c5234652dd66?s=128

Yuhao Zhu

February 11, 2015
Tweet

Transcript

  1. 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. 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?
  3. 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?
  4. 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?
  5. 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?
  6. 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?
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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.
  18. 26.

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

    (Style) Selector Property <input value=“hpca2015”>
  19. 27.

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

    (Style) Selector Property <input value=“hpca2015”> input {font-style: italic}
  20. 28.

    Breaking Down the Computations 11 DOM Tree Tag Attribute HTML

    (Structure) CSS (Style) Selector Property <input value=“hpca2015”> input {font-style: italic}
  21. 29.

    Breaking Down the Computations 11 DOM Tree Tag Attribute HTML

    (Structure) CSS (Style) Selector Property <input value=“hpca2015”> input {font-style: italic}
  22. 35.

    Number of Tags (K) 5 Webpages HTML Tag Analysis 12

    www.163.com Webpages have different tag counts
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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)
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 52.

    Enegy Consumption (J) 0 1 2 3 4 Load time

    (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
  39. 53.

    Enegy Consumption (J) 0 1 2 3 4 Load time

    (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
  40. 54.

    Enegy Consumption (J) 0 1 2 3 4 Load time

    (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
  41. 55.

    Enegy Consumption (J) 0 1 2 3 4 Load time

    (s) 0 1 2 3 4 5 6 20 Energy-Efficiency Optimizations
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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