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
6 Web Browsing from a Compute Perspective Compute Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render
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
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
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
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
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
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
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
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)
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
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
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
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
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
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
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
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
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
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