Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing

Yuhao Zhu
February 11, 2015

Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing

Best of CAL presented at HPCA 2015.

Yuhao Zhu

February 11, 2015
Tweet

More Decks by Yuhao Zhu

Other Decks in Education

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

    View Slide

  2. Isn’t This a Network Issue?
    2

    View Slide

  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?

    View Slide

  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?

    View Slide

  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?

    View Slide

  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?

    View Slide

  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?

    View Slide

  8. Compute
    4
    Web Browsing from a Compute Perspective

    View Slide

  9. 5
    Web Browsing from a Compute Perspective
    Compute

    View Slide

  10. 6
    Web Browsing from a Compute Perspective
    Compute

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  22. Breaking Down the Computations
    11

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    input {font-style:
    italic}

    View Slide

  28. Breaking Down the Computations
    11
    DOM Tree
    Tag
    Attribute
    HTML (Structure)
    CSS (Style)
    Selector
    Property

    input {font-style:
    italic}

    View Slide

  29. Breaking Down the Computations
    11
    DOM Tree
    Tag
    Attribute
    HTML (Structure)
    CSS (Style)
    Selector
    Property

    input {font-style:
    italic}

    View Slide

  30. HTML Tag Analysis
    12
    www.163.com

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  51. Webpage
    Characterization
    Performance/Energy
    Prediction
    Processor
    Architecture
    ?

    View Slide

  52. Enegy Consumption (J)
    0
    1
    2
    3
    4
    Load time (s)
    0 1 2 3 4 5 6
    20
    Energy-Efficiency Optimizations

    View Slide

  53. Enegy Consumption (J)
    0
    1
    2
    3
    4
    Load time (s)
    0 1 2 3 4 5 6
    20
    Energy-Efficiency Optimizations

    View Slide

  54. Enegy Consumption (J)
    0
    1
    2
    3
    4
    Load time (s)
    0 1 2 3 4 5 6
    20
    Energy-Efficiency Optimizations

    View Slide

  55. Enegy Consumption (J)
    0
    1
    2
    3
    4
    Load time (s)
    0 1 2 3 4 5 6
    20
    Energy-Efficiency Optimizations

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  60. 23
    Compute
    Web Applications
    Web Runtime
    Architecture

    View Slide

  61. 24
    Compute
    Web Applications
    Web Runtime
    Architecture

    View Slide

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

    View Slide

  63. 25
    Web-Based Technology is Everywhere

    View Slide

  64. 25
    Web-Based Technology is Everywhere

    View Slide

  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

    View Slide

  66. Watt-Wise Web

    View Slide