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

Defense talk: Energy-Efficient Mobile Web Computing

Yuhao Zhu
September 07, 2016

Defense talk: Energy-Efficient Mobile Web Computing

Defense talk

Yuhao Zhu

September 07, 2016
Tweet

More Decks by Yuhao Zhu

Other Decks in Education

Transcript

  1. 1 Energy-Efficient Mobile Web Computing Sept. 7th, 2016 Yuhao Zhu

    Electrical and Computer Engineering Department The University of Texas at Austin Advisor: Vijay Janapa Reddi
  2. 2 1990 HTML 1996 JavaScript 2008 Mobile Web 2012 Responsive

    Web The Web Evolution Functionality Performance
  3. 2 1990 HTML 1996 JavaScript 2008 Mobile Web 2012 Responsive

    Web 2016 Watt Wise Web The Web Evolution Functionality Performance Energy
  4. 2 1990 HTML 1996 JavaScript 2008 Mobile Web 2012 Responsive

    Web 2016 Watt Wise Web The Web Evolution Functionality Performance Energy
  5. 0 30 60 90 120 2011 2012 2013 2014 2015

    2016 3 Source: BIA/Kelsey Search Volume (B) Web: Mobile Overtaking Desktop
  6. 0 30 60 90 120 2011 2012 2013 2014 2015

    2016 3 Source: BIA/Kelsey Search Volume (B) Mobile Desktop Web: Mobile Overtaking Desktop
  7. 0 30 60 90 120 2011 2012 2013 2014 2015

    2016 3 Source: BIA/Kelsey Search Volume (B) Mobile Desktop Web: Mobile Overtaking Desktop When the work started
  8. 0 30 60 90 120 2011 2012 2013 2014 2015

    2016 3 Source: BIA/Kelsey Search Volume (B) Mobile Desktop Web: Mobile Overtaking Desktop When the work started
  9. 5 The Scope of Mobile Web Mobile Client Cloud Web

    Servers Cellular Network [MICRO 2015] (Top Picks Honorable Mention)
  10. 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) 8 Isn’t Mobile Web a Network Issue?
  11. 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) 8 Isn’t Mobile Web a Network Issue? ▸ Samsung Galaxy S4 smartphone. ▸ Hot webpages from Alexa1. ▸ Time measured using Navigation Timing API2. 1. http://www.alexa.com/ 2. https://www.w3.org/TR/navigation-timing-2/
  12. 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) 8 LTE 3G Adverse 3G 2G Wi-Fi Isn’t Mobile Web a Network Issue? ▸ Samsung Galaxy S4 smartphone. ▸ Hot webpages from Alexa1. ▸ Time measured using Navigation Timing API2. 1. http://www.alexa.com/ 2. https://www.w3.org/TR/navigation-timing-2/
  13. 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) 8 LTE 3G Adverse 3G 2G Wi-Fi Isn’t Mobile Web a Network Issue? ▸ Samsung Galaxy S4 smartphone. ▸ Hot webpages from Alexa1. ▸ Time measured using Navigation Timing API2. 1. http://www.alexa.com/ 2. https://www.w3.org/TR/navigation-timing-2/
  14. 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) 8 LTE 3G Adverse 3G 2G Wi-Fi Isn’t Mobile Web a Network Issue? ▸ Samsung Galaxy S4 smartphone. ▸ Hot webpages from Alexa1. ▸ Time measured using Navigation Timing API2. 1. http://www.alexa.com/ 2. https://www.w3.org/TR/navigation-timing-2/
  15. 10 Traditional Approach Frameworks and Libraries HTML JavaScript CSS Language

    Runtime Styling Security Local Storage User Input Layout Render
  16. 10 Traditional Approach Frameworks and Libraries HTML JavaScript CSS Language

    Runtime Styling Security Local Storage User Input Layout Render Application
  17. ▸ Parallelize browser computation 10 Traditional Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application
  18. ▸ Parallelize browser computation 10 Traditional Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Architecture
  19. ▸ Parallelize browser computation 10 Traditional Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Architecture ▸ Voltage/frequency scaling on general-purpose processors
  20. ▸ Parallelize browser computation 10 Traditional Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Inputs Architecture ▸ Voltage/frequency scaling on general-purpose processors
  21. ▸ Parallelize browser computation ▸ Ignored! 10 Traditional Approach Frameworks

    and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Inputs Architecture ▸ Voltage/frequency scaling on general-purpose processors
  22. ▸ Parallelize browser computation ▸ Ignored! 10 Traditional Approach Frameworks

    and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Inputs Architecture ▸ Voltage/frequency scaling on general-purpose processors ▸ End of Dennard Scaling! ▸ Diminishing return
  23. ▸ Parallelize browser computation ▸ Ignored! 11 My Approach Frameworks

    and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Inputs Architecture WebCore Web-specific Architecture
  24. ▸ Parallelize browser computation 11 My Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Inputs Architecture ▸ Lost page-level diversity ▸ Lost user QoS requirements WebCore Web-specific Architecture
  25. ▸ Parallelize browser computation 11 My Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Architecture ▸ Lost page-level diversity ▸ Lost user QoS requirements WebCore Web-specific Architecture
  26. 12 My Approach Frameworks and Libraries HTML JavaScript CSS Language

    Runtime Styling Security Local Storage User Input Layout Render Application Architecture WebCore Web-specific Architecture GreenWeb Language Extensions
  27. 12 My Approach Frameworks and Libraries HTML JavaScript CSS Language

    Runtime Styling Security Local Storage User Input Layout Render Application Architecture WebCore Web-specific Architecture GreenWeb Language Extensions Runtime
  28. 12 My Approach Frameworks and Libraries HTML JavaScript CSS Language

    Runtime Styling Security Local Storage User Input Layout Render Application Architecture WebCore Web-specific Architecture GreenWeb Language Extensions Runtime
  29. 12 My Approach Frameworks and Libraries HTML JavaScript CSS Language

    Runtime Styling Security Local Storage User Input Layout Render Application Architecture WebCore Web-specific Architecture GreenWeb Language Extensions Runtime
  30. WebRT Energy-aware Web Runtime 12 My Approach Frameworks and Libraries

    HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Application Architecture WebCore Web-specific Architecture GreenWeb Language Extensions Runtime
  31. Runtime 13 My Approach Architecture Application WebRT Energy-aware Web Runtime

    WebCore Web-specific Architecture GreenWeb Language Extensions
  32. Runtime 13 My Approach Architecture Application My Dissertation Work WebRT

    Energy-aware Web Runtime WebCore Web-specific Architecture GreenWeb Language Extensions [PLDI 2016] [ISCA 2014] [HPCA 2013] [HPCA 2015] [CAL 2014] (Best of CAL)
  33. Thesis Statement 14 Future mobile Web systems can achieve energy-efficiency

    without sacrificing responsiveness by incorporating:
  34. Thesis Statement 14 ▸ Programming language annotations to convey user

    QoS information ▸ Runtime scheduling mechanisms to exploit heterogeneous hardware ▸ Hardware accelerators specialized for the key computation kernel Future mobile Web systems can achieve energy-efficiency without sacrificing responsiveness by incorporating:
  35. Runtime 15 My Approach Architecture Application My Dissertation Work WebRT

    Energy-aware Web Runtime WebCore Web-specific Architecture GreenWeb Language Extensions
  36. Runtime 15 My Approach Architecture Application My Dissertation Work WebRT

    Energy-aware Web Runtime WebCore Web-specific Architecture GreenWeb Language Extensions
  37. Energy Concern Among Mobile Developers 16 [ICSE 2016] Manotas et

    al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  38. Energy Concern Among Mobile Developers 16 Percentage (%) 0 25

    50 75 100 Mobile Desktop Data Center Never/Rarely Sometimes Often/Almost Always “My applications have requirements about energy usage.” [ICSE 2016] Manotas et al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  39. Energy Concern Among Mobile Developers 16 Percentage (%) 0 25

    50 75 100 Mobile Desktop Data Center Never/Rarely Sometimes Often/Almost Always “My applications have requirements about energy usage.” [ICSE 2016] Manotas et al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  40. Energy Concern Among Mobile Developers 16 Percentage (%) 0 25

    50 75 100 Mobile Desktop Data Center Never/Rarely Sometimes Often/Almost Always “My applications have requirements about energy usage.” [ICSE 2016] Manotas et al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  41. Developers are Willing to Make Trade-offs 17 [ICSE 2016] Manotas

    et al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  42. Developers are Willing to Make Trade-offs 17 Percentage (%) 0

    25 50 75 100 Mobile Never/Rarely Sometimes Often/Almost Always “I'm willing to sacrifice performance, etc. for reduced energy usage.” [ICSE 2016] Manotas et al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  43. Developers are Willing to Make Trade-offs 17 Percentage (%) 0

    25 50 75 100 Mobile Never/Rarely Sometimes Often/Almost Always “I'm willing to sacrifice performance, etc. for reduced energy usage.” [ICSE 2016] Manotas et al., “An Empirical Study of Practitioners’ Perspectives on Green Software Engineering”
  44. 21 ▸ Runtime that saves energy while meeting the QoS

    constraints GreenWeb: Language for Energy-Efficiency ▸ Language abstractions for expressing QoS
  45. 21 ▸ Runtime that saves energy while meeting the QoS

    constraints ▸ Result in 60% energy savings on real hardware/software implementations GreenWeb: Language for Energy-Efficiency ▸ Language abstractions for expressing QoS
  46. 21 ▸ Runtime the QoS constraints ▸ Result hardware/software implementations

    GreenWeb: Language for Energy-Efficiency ▸ Language abstractions for expressing QoS
  47. 23 Performance QoS Experience [OSDI 1996] Y. Endo et al.,

    “Using Latency to Evaluate Interactive System Performance.” Understanding Mobile Web QoS
  48. 23 Performance QoS Experience [OSDI 1996] Y. Endo et al.,

    “Using Latency to Evaluate Interactive System Performance.” Understanding Mobile Web QoS Too slow
  49. 23 Performance QoS Experience Unusable [OSDI 1996] Y. Endo et

    al., “Using Latency to Evaluate Interactive System Performance.” Understanding Mobile Web QoS Too slow
  50. 23 Performance QoS Experience Unusable Tolerable [OSDI 1996] Y. Endo

    et al., “Using Latency to Evaluate Interactive System Performance.” Understanding Mobile Web QoS Too slow
  51. 23 Performance QoS Experience Unusable Tolerable [OSDI 1996] Y. Endo

    et al., “Using Latency to Evaluate Interactive System Performance.” Understanding Mobile Web QoS Too slow Diminishing Returns
  52. 23 Performance QoS Experience Unusable Tolerable Imperceptible [OSDI 1996] Y.

    Endo et al., “Using Latency to Evaluate Interactive System Performance.” Understanding Mobile Web QoS Too slow Diminishing Returns
  53. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  54. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  55. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  56. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  57. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS “Negative” Energy consumption Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  58. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  59. 24 Performance QoS Experience Unusable Tolerable Imperceptible Understanding Mobile Web

    QoS Energy [OSDI 1996] Y. Endo et al., “Using Latency to Evaluate Interactive System Performance.”
  60. 25 Performance QoS Experience Unusable Tolerable Imperceptible Abstracting Mobile Web

    QoS ▸ Performance metric ▹ Frame latency vs. Frame throughput
  61. 25 Performance QoS Experience Unusable Tolerable Imperceptible Abstracting Mobile Web

    QoS ▸ Performance metric ▹ Frame latency vs. Frame throughput QoS Type
  62. 25 Performance QoS Experience Unusable Tolerable Imperceptible Abstracting Mobile Web

    QoS ▸ Performance metric ▹ Frame latency vs. Frame throughput ▸ Threshold performance values ▹ Imperceptible target vs. Usable target QoS Type
  63. 25 Performance QoS Experience Unusable Tolerable Imperceptible Abstracting Mobile Web

    QoS ▸ Performance metric ▹ Frame latency vs. Frame throughput ▸ Threshold performance values ▹ Imperceptible target vs. Usable target QoS Type QoS Target
  64. <html> <head> <script> function animateMove() { /* Animation code omitted

    */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> 26 Expressing Mobile Web QoS
  65. <html> <head> <script> function animateMove() { /* Animation code omitted

    */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> 26 Expressing Mobile Web QoS element
  66. <html> <head> <script> function animateMove() { /* Animation code omitted

    */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> 26 Expressing Mobile Web QoS element event
  67. <html> <head> <script> function animateMove() { /* Animation code omitted

    */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> 26 Expressing Mobile Web QoS element event
  68. <html> <head> <script> function animateMove() { /* Animation code omitted

    */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> 26 Expressing Mobile Web QoS Expressing QoS at an event granularity element event
  69. <script> function animateMove() { /* Animation code omitted */ }

    </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation element event
  70. <script> function animateMove() { /* Animation code omitted */ }

    </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation element event div { } ontouchend
  71. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation element event div { } ontouchend: throughput, low;
  72. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation element event div { } ontouchend: throughput, low;
  73. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation element event div { } ontouchend: throughput, low;
  74. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation function newAnimateMove() { /* New animation code */ } element event div { } ontouchend: throughput, low;
  75. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation function newAnimateMove() { /* New animation code */ } Implementation independent element event div { } ontouchend: throughput, low;
  76. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation function newAnimateMove() { /* New animation code */ } Implementation independent element event div { } ontouchend: throughput, low;
  77. { : Type, Target} <script> function animateMove() { /* Animation

    code omitted */ } </script> </head> <body> <div ontouchend=“animateMove()”> <div/> <!— other elements --> </body> </html> <style> </style> <html> <head> 27 Expressing Mobile Web QoS Annotation function newAnimateMove() { /* New animation code */ } Implementation independent Non-interfering w.r.t. functionality element event div { } ontouchend: throughput, low;
  78. 28 Original application GreenWeb- annotated application GreenWeb Annotation Process Automatic

    Annotation? ▸ AutoGreen: automatically reasons about and inserts GreenWeb annotations
  79. 28 GreenWeb- annotated application GreenWeb Annotation Process Automatic Annotation? ▸

    AutoGreen: automatically reasons about and inserts GreenWeb annotations DOM Tree
  80. ▸ AutoGreen: automatically reasons about and inserts GreenWeb annotations 29

    GreenWeb- annotated application GreenWeb Annotation Process
  81. ▸ AutoGreen: automatically reasons about and inserts GreenWeb annotations 29

    GreenWeb- annotated application GreenWeb Annotation Process Callback Instrumentation
  82. ▸ AutoGreen: automatically reasons about and inserts GreenWeb annotations 29

    GreenWeb- annotated application GreenWeb Annotation Process QoS Information Event Profiling Callback Instrumentation
  83. ▸ AutoGreen: automatically reasons about and inserts GreenWeb annotations 29

    GreenWeb- annotated application GreenWeb Annotation Process QoS Information Event Profiling Annotation Generation Callback Instrumentation
  84. ▸ Language abstractions for expressing QoS 30 ▸ Runtime the

    QoS constraints ▸ Result hardware/software implementations GreenWeb: Language for Energy-Efficiency
  85. ▸ Language abstractions 30 ▸ Runtime that saves energy while

    meeting the QoS constraints ▸ Result hardware/software implementations GreenWeb: Language for Energy-Efficiency
  86. 31 GreenWeb Runtime Overview Frame Event Enforcing event-level QoS at

    the frame-level energy-efficiently Runtime Objective QoS Annotations
  87. QoS type: latency QoS target: 16 ms 31 GreenWeb Runtime

    Overview Frame Event Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective
  88. QoS type: latency QoS target: 16 ms 31 GreenWeb Runtime

    Overview Frame Event Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective
  89. QoS type: latency QoS target: 16 ms 31 GreenWeb Runtime

    Overview Frame Event Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective
  90. QoS type: latency QoS target: 16 ms 31 GreenWeb Runtime

    Overview Frame Event 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective
  91. QoS type: latency QoS target: 16 ms throughput 31 GreenWeb

    Runtime Overview Frame Event 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective
  92. QoS type: latency QoS target: 16 ms throughput 31 GreenWeb

    Runtime Overview Frame Event Frame Frame 16 ms 16 ms 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective
  93. 31 GreenWeb Runtime Overview Frame Event Frame Frame Time Event

    16 ms 16 ms 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective QoS target: 2 s
  94. 31 GreenWeb Runtime Overview Frame Event Frame Frame Time Event

    Frame 16 ms 16 ms 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Runtime Objective 2 s QoS target: 2 s
  95. 31 GreenWeb Runtime Overview Frame Event Frame Frame Time Event

    Frame 16 ms 16 ms 16 ms Enforcing event-level QoS at the frame-level energy-efficiently { Runtime Objective 2 s QoS target: 2 s
  96. 31 GreenWeb Runtime Overview Frame Event Frame Frame Time Event

    Frame 16 ms 16 ms 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Frame Association { Runtime Objective 1 2 s
  97. 31 GreenWeb Runtime Overview Frame Event Frame Frame Time Event

    Frame 16 ms 16 ms 16 ms Enforcing event-level QoS at the frame-level energy-efficiently Frame Association Frame Scheduling { Runtime Objective 1 2 2 s
  98. 33 Frame Association S S L P C Frame Browser

    Process Renderer Process GPU Process Event
  99. 33 Frame Association S S L P C Frame Browser

    Process Renderer Process GPU Process Event Main Thread Compositor Thread
  100. 33 Frame Association S S L P C Frame Browser

    Process Renderer Process GPU Process Event Main Thread Compositor Thread IPC Inter-thread Message
  101. 34 Frame Association S S L P C Frame Browser

    Process Renderer Process GPU Process Event Frame S S L P C
  102. 34 Frame Association S S L P C Frame Browser

    Process Renderer Process GPU Process Event Frame S S L P C Distribute QoS information along with the communication messages
  103. Choices of Energy-saving Techniques 35 GreenWeb can support a range

    of energy saving techniques ▹Dynamic resolution scaling [MobiCom 2015] ▹Power-saving display colors [MobiSys 2012] ▹Selective resource loading [NSDI 2015]
  104. Choices of Energy-saving Techniques 35 GreenWeb can support a range

    of energy saving techniques ▹Dynamic resolution scaling [MobiCom 2015] ▹Power-saving display colors [MobiSys 2012] ▹Selective resource loading [NSDI 2015] ▹ACMP-based hardware mechanism (WebRT)
  105. Energy Consumption Performance Big Core Small Core Asymmetric Chip-multiprocessor 36

    ▸ Offer a large performance-energy trade-off space Frequency Levels
  106. Energy Consumption Performance Big Core Small Core Asymmetric Chip-multiprocessor 36

    ▸ Offer a large performance-energy trade-off space ▸ Already used in commodity devices (e.g., Samsung Galaxy S6) Frequency Levels
  107. Energy Consumption Performance Big Core Small Core ACMP-based GreenWeb Runtime

    37 ▸Provide just enough energy to meet QoS constraints Frequency Levels
  108. Energy Consumption Performance Big Core Small Core ACMP-based GreenWeb Runtime

    37 ▸Provide just enough energy to meet QoS constraints div {ontouchend: latency, 16 ms} Frequency Levels
  109. Energy Consumption Performance Big Core Small Core ACMP-based GreenWeb Runtime

    37 ▸Provide just enough energy to meet QoS constraints 16 ms div {ontouchend: latency, 16 ms}
  110. Energy Consumption Performance Big Core Small Core ACMP-based GreenWeb Runtime

    37 ▸Provide just enough energy to meet QoS constraints
  111. Energy Consumption Performance Big Core Small Core ACMP-based GreenWeb Runtime

    37 ▸Provide just enough energy to meet QoS constraints Predict the performance and energy of each configuration!
  112. Different Strategies for Different Events 38 Loading Touching Moving Events

    Proactive Mechanism WebRT Component Repetitive in a usage session
  113. Different Strategies for Different Events 38 Loading Touching Moving Events

    Proactive Mechanism WebRT Component Adaptive Mechanism
  114. 39 Loading Touching Moving Events Proactive Mechanism WebRT Component Adaptive

    Mechanism Different Strategies for Different Events
  115. 40 Breaking Down the Computations DOM Tree Tag Attribute HTML

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

    (Structure) CSS (Style) Selector Property 40 Web Primitives
  117. Predicting Loading Performance & Energy 41 Idea: predict load time

    & energy (responses) based on Web primitives (predictors)
  118. Predicting Loading Performance & Energy 41 Identify Predictors Training using

    top 2,500 webpages Predictors (HTML, CSS) Responses (Time, Energy)
  119. Predicting Loading Performance & Energy 41 Identify Predictors Training using

    top 2,500 webpages Model Construction & Refinement Refine the linear model Predictors (HTML, CSS) Responses (Time, Energy) Mitigate Over-fitting Model Non-Linearity Linear Regression
  120. Predicting Loading Performance & Energy 41 Identify Predictors Training using

    top 2,500 webpages Model Construction & Refinement Refine the linear model Model Validation Validating on another 2,500 webpages Predictors (HTML, CSS) Responses (Time, Energy) Mitigate Over-fitting Model Non-Linearity Linear Regression Loading Time Model Energy Model
  121. 42 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% Predicting Loading Performance & Energy
  122. Energy Consumption Performance ACMP-based GreenWeb Runtime 44 Execution Time =

    [PLDI 2003] Xie, et al., “Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits” Energy =
  123. Energy Consumption Performance ACMP-based GreenWeb Runtime 44 Execution Time =

    Tmemory + [PLDI 2003] Xie, et al., “Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits” Energy =
  124. Tcpu Energy Consumption Performance ACMP-based GreenWeb Runtime 44 Execution Time

    = Tmemory + [PLDI 2003] Xie, et al., “Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits” Energy =
  125. Energy Consumption Performance ACMP-based GreenWeb Runtime 44 Execution Time =

    Tmemory + Ncycles / f [PLDI 2003] Xie, et al., “Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits” Energy =
  126. Energy Consumption Performance ACMP-based GreenWeb Runtime 44 Execution Time =

    Tmemory + Ncycles / f [PLDI 2003] Xie, et al., “Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits” Energy =
  127. Energy Consumption Performance ACMP-based GreenWeb Runtime 44 Execution Time =

    Tmemory + Ncycles / f [PLDI 2003] Xie, et al., “Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits” Energy = Execution Time x Power
  128. ▸ Language abstractions 45 ▸ Runtime that saves energy while

    meeting the QoS constraints ▸ Result hardware/software implementations GreenWeb: Language for Energy-Efficiency
  129. ▸ Language abstractions 45 ▸ Runtime the QoS constraints ▸

    Result in 60% energy savings on real hardware/software implementations GreenWeb: Language for Energy-Efficiency
  130. Real Hardware/Software Setup 46 ODroid XU+E development board, which contains

    an Exynos 5410 SoC used in Samsung Galaxy S4. Little core cluster: ARM Cortex A7, In-order with 2 issue Big core cluster: ARM Cortex A15, OoO with 3 issue Overhead: ▸ Frequency switch: 100 us ▸ Core migration: 20 us
  131. Real Hardware/Software Setup 47 ODroid XU+E development board, which contains

    an Exynos 5410 SoC used in Samsung Galaxy S4. Implementation incorporated into Chrome running on Android. Little core cluster: ARM Cortex A7, In-order with 2 issue Big core cluster: ARM Cortex A15, OoO with 3 issue Overhead: ▸ Frequency switch: 100 us ▸ Core migration: 20 us
  132. Real Hardware/Software Setup 47 ODroid XU+E development board, which contains

    an Exynos 5410 SoC used in Samsung Galaxy S4. Implementation incorporated into Chrome running on Android. UI-level record and replay for reproducibility. [ISPASS’15] Little core cluster: ARM Cortex A7, In-order with 2 issue Big core cluster: ARM Cortex A15, OoO with 3 issue Overhead: ▸ Frequency switch: 100 us ▸ Core migration: 20 us
  133. Power and Energy Measurements 48 + - Vin+ Vin- Vout

    GND Sense resistor 15mΩ SoC ARM Cortex A9 VRM Gain x50 Probe Data Acquisition (DAQ) Power = (Vin + - Vin -) / Rsense * Vin -
  134. Evaluation ▸Baseline Mechanisms ▹Highest performance (Perf) — Standard to guarantee

    responsiveness ▹Interactive governor (Interactive) — Android default 49 49
  135. Evaluation ▸Baseline Mechanisms ▹Highest performance (Perf) — Standard to guarantee

    responsiveness ▹Interactive governor (Interactive) — Android default 49 ▸Metrics ▹Energy Saving ▹QoS Violation 49
  136. Evaluation ▸Baseline Mechanisms ▹Highest performance (Perf) — Standard to guarantee

    responsiveness ▹Interactive governor (Interactive) — Android default 49 ▸Metrics ▹Energy Saving ▹QoS Violation 49 ▸Applications ▹Top webpages (e.g., www.amazon.com) ▹Web Apps based on popular frameworks (e.g., Todo List)
  137. 50 Norm. Energy 0.0 0.3 0.5 0.8 1.0 CamanJS Craigslist

    Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN GreenWeb Interactive Perf Evaluation Results
  138. 51 Norm. Energy 0.0 0.3 0.5 0.8 1.0 CamanJS Craigslist

    Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN GreenWeb Interactive Perf Evaluation Results
  139. 52 Norm. Energy 0.0 0.3 0.5 0.8 1.0 CamanJS Craigslist

    Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN GreenWeb Interactive Perf Evaluation Results
  140. 53 Evaluation Results QoS Violations (%) 0.0 0.8 1.5 2.3

    3.0 CamanJS Craigslist Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN Norm. Energy 0.0 0.3 0.5 0.8 1.0 CamanJS Craigslist Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN GreenWeb Interactive Perf
  141. Norm. Energy 0.0 0.3 0.5 0.8 1.0 CamanJS Craigslist Paperjs

    Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN GreenWeb Interactive Perf 54 Evaluation Results QoS Violations (%) 0.0 0.8 1.5 2.3 3.0 CamanJS Craigslist Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN No QoS Violations
  142. Norm. Energy 0.0 0.3 0.5 0.8 1.0 CamanJS Craigslist Paperjs

    Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN GreenWeb Interactive Perf 54 Evaluation Results QoS Violations (%) 0.0 0.8 1.5 2.3 3.0 CamanJS Craigslist Paperjs Goo Google Todo CNet BBC LZMA-JS Amazon W3School MSN 29.2% - 66.0% energy savings, 0.8% more QoS violations No QoS Violations
  143. Architecture Configuration Distribution 55 100 80 60 40 20 0

    Time Distribution (%) CamanJS Craigslist Paperjs Goo Google Todo Cnet BBC LZMA-JS Amazon W3School MSN A15 A7 GHz 1.6 1.4 1.2 1.0 0.8 0.6 0.4
  144. Architecture Configuration Distribution 55 100 80 60 40 20 0

    Time Distribution (%) CamanJS Craigslist Paperjs Goo Google Todo Cnet BBC LZMA-JS Amazon W3School MSN A15 A7 GHz 1.6 1.4 1.2 1.0 0.8 0.6 0.4
  145. 56 GreenWeb Programming language support for balancing energy-efficiency and QoS

    in mobile Web computing Abstraction Express QoS constraints
  146. 56 GreenWeb Programming language support for balancing energy-efficiency and QoS

    in mobile Web computing Abstraction Express QoS constraints Runtime Satisfy QoS specifications using energy saving techniques
  147. 56 GreenWeb Programming language support for balancing energy-efficiency and QoS

    in mobile Web computing Abstraction Express QoS constraints Runtime Satisfy QoS specifications using energy saving techniques Effect Significant energy savings
  148. Runtime 57 My Approach Architecture Application WebRT Energy-aware Web Runtime

    WebCore Web-specific Architecture GreenWeb Language Extensions My Dissertation Work
  149. 58 Execution Time Energy ASIC? Extremely challenging ‣Chrome: 17M LoC,

    29 languages ▹ c.f., H264 codec: 0.13M LoC, 6 languages ‣Code base is very irregular ▹ Not amenable to traditional specialization General-Purpose Designs WebCore: a Web-Specific Mobile Architecture
  150. Specialization Target: Style Resolution Kernel 60 10% 13% 17% 25%

    35% Render Style Other Layout DOM 12% 14% 16% 18% 40% Render Style Other Layout DOM Execution time breakdown Energy breakdown
  151. Specialization Target: Style Resolution Kernel 60 10% 13% 17% 25%

    35% Render Style Other Layout DOM 12% 14% 16% 18% 40% Render Style Other Layout DOM Execution time breakdown Energy breakdown
  152. Specialization Target: Style Resolution Kernel 60 for (each rule in

    matchedRules) { for (each property in rule) { switch (property.id) { case Font: Style[Font] = Handler(property.value, DOMNode); break; case N: ...}}}
  153. Specialization Target: Style Resolution Kernel 60 for (each rule in

    matchedRules) { for (each property in rule) { switch (property.id) { case Font: Style[Font] = Handler(property.value, DOMNode); break; case N: ...}}}
  154. Specialization Target: Style Resolution Kernel 60 for (each rule in

    matchedRules) { for (each property in rule) { switch (property.id) { case Font: Style[Font] = Handler(property.value, DOMNode); break; case N: ...}}} Rule-level Parallelism (RLP)
  155. Specialization Target: Style Resolution Kernel 60 for (each rule in

    matchedRules) { for (each property in rule) { switch (property.id) { case Font: Style[Font] = Handler(property.value, DOMNode); break; case N: ...}}} Rule-level Parallelism (RLP)
  156. Specialization Target: Style Resolution Kernel 60 for (each rule in

    matchedRules) { for (each property in rule) { switch (property.id) { case Font: Style[Font] = Handler(property.value, DOMNode); break; case N: ...}}} Rule-level Parallelism (RLP) Property-level Parallelism (PLP)
  157. Specialization Target: Style Resolution Kernel 60 for (each rule in

    matchedRules) { for (each property in rule) { switch (property.id) { case Font: Style[Font] = Handler(property.value, DOMNode); break; case N: ...}}} Rule-level Parallelism (RLP) Property-level Parallelism (PLP) ▸ Exploiting the parallelism to increase the arithmetic intensity ▸ Move operands closer to operations to sustain the computations
  158. ... ... Rule j ... ... Prop l ... ...

    Rule i.id ... Prop m ... Prop k ... Rule j.id ... ... ... ... ... start end start end Rule i Prop k Prop m Prop m Prop l Style l Style m Style k Style Resolution Unit 61 Prop m Prop m 61 Input Scratchpad Conflict Resolution Output Scratchpad Compute Lanes
  159. Evaluation Results 62 ▸Fully synthesized using Synopsys 28 nm toolchain

    ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  160. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  161. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) A15-like design ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  162. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) A15-like design Customization ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  163. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) 18.6% A15-like design Customization ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  164. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) 18.6% 22.2% A15-like design Customization ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  165. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) 18.6% 22.2% A15-like design Customization Specialization ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  166. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) 18.6% 22.2% 22.2% A15-like design Customization Specialization ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  167. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) 18.6% 22.2% 9.2% 22.2% A15-like design Customization Specialization ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  168. Evaluation Results 62 0.55 0.688 0.825 0.963 1.1 1.6 1.8

    2 2.2 2.4 Energy (J) Load Time (s) A15-like design Customization Specialization 29.2% 47.0% ▸Fully synthesized using Synopsys 28 nm toolchain ▸Cost of specialization: 0.59 mm2 area overhead ▹ SoC die area is 122 mm2 in Samsung Galaxy S4 ▹ A15s’ area: 19 mm2
  169. Retrospective: Three Principles Learnt 63 Runtime Application Architecture ▸ Exploiting

    Application Diversity ▸ General-purpose vs. Specialization
  170. Retrospective: Three Principles Learnt 63 Runtime Application Architecture ▸ Empowering

    Web Developers ▸ Exploiting Application Diversity ▸ General-purpose vs. Specialization
  171. 64 1990 HTML 1996 JavaScript 2008 Mobile Web 2012 Responsive

    Web 2016 Watt Wise Web The Web Evolution
  172. 64 1990 HTML 1996 JavaScript 2008 Mobile Web 2012 Responsive

    Web 2016 Watt Wise Web The Web Evolution ???
  173. 65

  174. 65

  175. 65 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 Franeworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render
  176. [ACM Queue] Yuhao Zhu, Vijay Janapa Reddi, “The Red future

    of Mobile Web Computing” [PLDI 2016] Yuhao Zhu, Vijay Janapa Reddi, “GreenWeb: Language Extensions for Energy-Efficient Mobile Web Computing” [HPCA 2015] Yuhao Zhu, Matthew Halpern, Vijay Janapa Reddi, “Event- Based Scheduling for Energy-Efficient QoS (eQoS) in Mobile Web Applications” [HPCA 2013] Yuhao Zhu, Vijay Janapa Reddi, “High-Performance and Energy-Efficient Mobile Web Browsing on Big/Little Systems” [CAL 2012] Yuhao Zhu, Aditya Srikanth, Jingwen Leng, Vijay Janapa Reddi, “Exploiting Webpage Characteristics for Energy-Efficient Mobile Web Browsing” (Best of CAL) [ISCA 2014] Yuhao Zhu, Vijay Janapa Reddi, “WebCore: Architectural Support for Mobile Web Browsing” [IEEE MICRO 2015] Yuhao Zhu, Matthew Halpern, Vijay Janapa Reddi, “The Role of the CPU in Energy-Efficient Mobile Web Browsing” [HPCA 2016] Matthew Halpern, Yuhao Zhu, Vijay Janapa Reddi, “Mobile CPU’s Rise to Power: Quantifying the Impact of Generational Mobile CPU Design Trends on Performance, Energy, and User Satisfaction” GreenWeb WebRT WebCore Motivational Studies Future Web
  177. [DAC 2011] Yuhao Zhu, Yangdong Deng, Yubei Chen, “Hermes: An

    Integrated CPU/GPU Microarchitecture for IP Routing.” [DAC 2010] Bo Wang, Yuhao Zhu, Yangdong Deng, “Distributed Time, Conservative Parallel Logic Simulation on GPUs.” [TODAES 2011] Yuhao Zhu, Bo Wang, Yangdong Deng, “Massively Parallel Logic Simulation with GPUs.” [ISPASS 2015] Matthew Halpern, Yuhao Zhu, Ramesh Peri, and Vijay Janapa Reddi, “Mosaic: Cross-platform User-interaction Record and Replay for the Fragmented Android Ecosystem.” [IRPS 2014] Chen Zhou, Xiaofei Wang, Weichao Xu, Yuhao Zhu, Vijay Janapa Reddi, Chris Kim, “Estimation of Instantaneous Frequency Fluctuation in a Fast DVFS Environment Using an Empirical BTI Stress- Relaxation Model.” GPGPU & IP Routing Architecture Tools Reliability [MICRO 2015] Yuhao Zhu, Daniel Richins, Matthew Halpern, Vijay Janapa Reddi, “Microarchitectural Implications of Event-driven Server- side Web Applications” (Top Picks Honorable Mention) Server Microarch
  178. Coursework 70 Name Instructor Semester SUP Grade COMPILERS Keshav Pingali

    Fall 2010 A ADV EMBED MICROCONTROL SYS Mark McDermott Spring 2011 A- MEMORY MANAGEMENT Kathryn McKinley Spring 2011 Y A VLSI I Jacob Abraham Fall 2011 A- COMP ARCH: PARALLISM/LOCLTY Mattan Erez Fall 2011 A MICROARCHITECTURE Yale Patt Spring 2012 B DYNAMIC COMPILATION Vijay Janapa Reddi Spring 2012 A- COMP PERF EVAL/BENCHMARKING Lizy John Fall 2012 B+ PARALLEL COMP ARCHITECTURE Derek Chiou Spring 2013 B+ HUMAN COMPUT & CROWDSRCING Matt Lease Fall 2015 Y A-