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. 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