Tweet
Tweet

Slide 1

Slide 1 text

Watt-Wise Web: Architecting a Responsive and Energy-Efficient Mobile Web Yuhao Zhu http://yuhaozhu.com

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Snake circa 2000

Slide 5

Slide 5 text

Snake circa 2000 Snake circa 2020

Slide 6

Slide 6 text

Performance

Slide 7

Slide 7 text

Performance Power

Slide 8

Slide 8 text

Measure Power (W) 0 2 4 6 8 Year 2009 2010 2011 2012 2013 2014 2015 Mobile CPU’s Rise to Power [HPCA 2016] 3

Slide 9

Slide 9 text

Measure Power (W) 0 2 4 6 8 Year 2009 2010 2011 2012 2013 2014 2015 0 2 4 6 8 2009 2010 2011 2012 2013 2014 2015 Mobile CPU’s Rise to Power [HPCA 2016] 3

Slide 10

Slide 10 text

Measure Power (W) 0 2 4 6 8 Year 2009 2010 2011 2012 2013 2014 2015 0 2 4 6 8 2009 2010 2011 2012 2013 2014 2015 Mobile CPU’s Rise to Power [HPCA 2016] 3 In pursuit of high performance

Slide 11

Slide 11 text

Measure Power (W) 0 2 4 6 8 Year 2009 2010 2011 2012 2013 2014 2015 0 2 4 6 8 2009 2010 2011 2012 2013 2014 2015 Mobile CPU’s Rise to Power [HPCA 2016] 3 Throttling In pursuit of high performance

Slide 12

Slide 12 text

Measure Power (W) 0 2 4 6 8 Year 2009 2010 2011 2012 2013 2014 2015 0 2 4 6 8 2009 2010 2011 2012 2013 2014 2015 Mobile CPU’s Rise to Power [HPCA 2016] 3 Throttling In pursuit of high performance SoC Thermal Design Power (TDP)

Slide 13

Slide 13 text

4 Mobile Processor Design “Strategy” Performance Power

Slide 14

Slide 14 text

4 Mobile Processor Design “Strategy” 2007 (In-order) Performance Power

Slide 15

Slide 15 text

4 Mobile Processor Design “Strategy” 2007 (In-order) 2011 (Out-of-order) 2012 (Multi-core) 2013 (Asymmetric Multi-core) Performance Power

Slide 16

Slide 16 text

4 Mobile Processor Design “Strategy” 2007 (In-order) 2011 (Out-of-order) 2012 (Multi-core) 2013 (Asymmetric Multi-core) Performance Power Squeeze 3 decades of desktop CPU techniques into a 6-year span

Slide 17

Slide 17 text

“Improving” Energy Capacity 5 600 smartphone from 2006 to 2014 on http://www.gsmarena.com/makers.php3

Slide 18

Slide 18 text

“Improving” Energy Capacity 5 Screen Size (inches) Battery Capacity (mAh) 600 smartphone from 2006 to 2014 on http://www.gsmarena.com/makers.php3             

Slide 19

Slide 19 text

“Improving” Energy Capacity 5 Screen Size (inches) Battery Capacity (mAh) 600 smartphone from 2006 to 2014 on http://www.gsmarena.com/makers.php3             

Slide 20

Slide 20 text

“Improving” Energy Capacity 5 Screen Size (inches) Battery Capacity (mAh) 600 smartphone from 2006 to 2014 on http://www.gsmarena.com/makers.php3             

Slide 21

Slide 21 text

“Improving” Energy Capacity 6

Slide 22

Slide 22 text

“Improving” Energy Capacity 6

Slide 23

Slide 23 text

“Improving” Energy Capacity 6

Slide 24

Slide 24 text

“Improving” Energy Capacity 6

Slide 25

Slide 25 text

“Improving” Energy Capacity 6

Slide 26

Slide 26 text

Mobile Applications 7

Slide 27

Slide 27 text

Mobile Applications 7 ^ Web

Slide 28

Slide 28 text

Mobile Applications 8 ^ Web Monthly Unique Mobile Users Non-Web Web 3.3 M 8.9 M comScore Mobile Metrix, U.S., June 2015

Slide 29

Slide 29 text

Mobile Applications 8 ^ Web Monthly Unique Mobile Users 2 4 6 8 10 12 Jun
 2014 Sep
 2014 Dec
 2014 Mar
 2015 Jun
 2015 Sep
 2015 Dec
 2015 Mar
 2016 Jun
 2016 Million Web Non-Web comScore 2016 U.S. Mobile App Report

Slide 30

Slide 30 text

Is This (Just) a Network Issue? [IEEE MICRO 2015] 9

Slide 31

Slide 31 text

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) 10 Is This (Just) a Network Issue? [IEEE MICRO 2015]

Slide 32

Slide 32 text

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) 10 LTE 3G Adverse 3G 2G Wi-Fi Is This (Just) a Network Issue? [IEEE MICRO 2015]

Slide 33

Slide 33 text

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) 10 LTE 3G Adverse 3G 2G Wi-Fi Is This (Just) a Network Issue? [IEEE MICRO 2015]

Slide 34

Slide 34 text

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) 10 LTE 3G Adverse 3G 2G Wi-Fi Is This (Just) a Network Issue? [IEEE MICRO 2015]

Slide 35

Slide 35 text

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) 10 Compute LTE 3G Adverse 3G 2G Wi-Fi Is This (Just) a Network Issue? [IEEE MICRO 2015]

Slide 36

Slide 36 text

Measured Power (W) 0.0 3.0 6.0 9.0 2009 2010 2011 2012 2013 2014 2015 Screen Radio CPU 11 Compute Is This (Just) a Network Issue? [IEEE MICRO 2015]

Slide 37

Slide 37 text

12 Compute Is This (Just) a Network Issue? [IEEE MICRO 2015] Measured Power (W) 0.0 3.0 6.0 9.0 2009 2010 2011 2012 2013 2014 2015 Screen Radio CPU

Slide 38

Slide 38 text

Compute 13 Web Browsing from a Compute Perspective

Slide 39

Slide 39 text

14 Web Browsing from a Compute Perspective Compute

Slide 40

Slide 40 text

Frameworks and Libraries HTML JavaScript CSS Language Runtime Styling Security Local Storage User Input Layout Render Runtime 15 Web Browsing from a Compute Perspective Compute Architecture Application

Slide 41

Slide 41 text

Runtime 16 Cross-Layer Optimizations Architecture Application

Slide 42

Slide 42 text

Runtime 16 Cross-Layer Optimizations Architecture Application WebCore Web-specific Processor Architecture [ISCA 2014] [TOCS 2017]

Slide 43

Slide 43 text

Runtime 16 Cross-Layer Optimizations Architecture Application WebCore Web-specific Processor Architecture GreenWeb Language Support for Quality-of-Experience [PLDI 2016] [ISCA 2014] [TOCS 2017]

Slide 44

Slide 44 text

Runtime 16 Cross-Layer Optimizations Architecture Application WebCore Web-specific Processor Architecture GreenWeb Language Support for Quality-of-Experience [PLDI 2016] [ISCA 2014] [TOCS 2017]

Slide 45

Slide 45 text

Runtime 16 Cross-Layer Optimizations Architecture Application WebCore Web-specific Processor Architecture GreenWeb Language Support for Quality-of-Experience [PLDI 2016] [ISCA 2014] [TOCS 2017]

Slide 46

Slide 46 text

Runtime 16 Cross-Layer Optimizations Architecture Application WebCore Web-specific Processor Architecture WebRT Fast, Energy-Efficient Mobile Web Runtime GreenWeb Language Support for Quality-of-Experience [PLDI 2016] [ISCA 2014] [TOCS 2017] [HPCA 2013] [HPCA 2015] [ISCA 2019]

Slide 47

Slide 47 text

Runtime 16 Cross-Layer Optimizations Architecture Application WebCore Web-specific Processor Architecture WebRT Fast, Energy-Efficient Mobile Web Runtime GreenWeb Language Support for Quality-of-Experience [PLDI 2016] [ISCA 2014] [TOCS 2017] [HPCA 2013] [HPCA 2015] [ISCA 2019]

Slide 48

Slide 48 text

17 Mobile Applications are Event-Driven Touching Moving Interactions

Slide 49

Slide 49 text

17 Mobile Applications are Event-Driven Touching Moving Interactions Events

Slide 50

Slide 50 text

17 Mobile Applications are Event-Driven Touching Moving Interactions Events click touchstart touchmove scroll

Slide 51

Slide 51 text

17 Mobile Applications are Event-Driven Touching Moving Interactions Events click touchstart touchmove scroll Event Queue

Slide 52

Slide 52 text

17 Mobile Applications are Event-Driven Touching Moving Interactions Events click touchstart touchmove scroll Event Loop Event Queue CPU

Slide 53

Slide 53 text

17 Mobile Applications are Event-Driven Touching Moving Interactions Events click touchstart touchmove scroll Event is the atomic unit of execution; optimize latency/energy at the event-level. Event Loop Event Queue CPU

Slide 54

Slide 54 text

▸ Observation: Events have different latency slacks that enable energy optimizations 17 Mobile Applications are Event-Driven Touching Moving Interactions Events click touchstart touchmove scroll Event Loop Event Queue CPU

Slide 55

Slide 55 text

▸ Observation: Events have different latency slacks that enable energy optimizations 18 Event-based Web Runtime Optimization

Slide 56

Slide 56 text

▸ Observation: Events have different latency slacks that enable energy optimizations 18 ▸ Mechanism: Provide just enough energy to meet QoE requirement for different events Event-based Web Runtime Optimization

Slide 57

Slide 57 text

▸ Observation: Events have different latency slacks that enable energy optimizations 18 ▸ Mechanism: Provide just enough energy to meet QoE requirement for different events ▸ Implementation: Map events to different heterogeneous hardware configurations Event-based Web Runtime Optimization

Slide 58

Slide 58 text

Event-Level Characterization !19

Slide 59

Slide 59 text

Event-Level Characterization !19

Slide 60

Slide 60 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events

Slide 61

Slide 61 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events

Slide 62

Slide 62 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events keyup

Slide 63

Slide 63 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events keyup

Slide 64

Slide 64 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events Large Slack keyup

Slide 65

Slide 65 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events Large Slack change keyup

Slide 66

Slide 66 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events Large Slack change Small Slack keyup

Slide 67

Slide 67 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events Large Slack change Small Slack click keyup

Slide 68

Slide 68 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events Large Slack change Small Slack No Slack click keyup

Slide 69

Slide 69 text

Event-Level Characterization !19 150 100 50 0 Event Latency (ms) Events Large Slack change Small Slack No Slack click keyup ▸ Wide distribution of event latencies. Events exhibit different slacks. ▹ How to exploit event slacks?

Slide 70

Slide 70 text

!20 Event-based Scheduler (EBS)

Slide 71

Slide 71 text

!20 Event-based Scheduler (EBS) ▸ Goal: For each event, find the most energy-efficient hardware configuration that meets the latency target

Slide 72

Slide 72 text

!20 Event-based Scheduler (EBS) Thread Scheduling

Slide 73

Slide 73 text

!20 Event-based Scheduler (EBS) Thread Scheduling

Slide 74

Slide 74 text

!20 Event-based Scheduler (EBS) Thread-based Scheduler Thread Scheduling

Slide 75

Slide 75 text

!20 Event-based Scheduler (EBS) Thread-based Scheduler Thread Scheduling Throughput Fairness

Slide 76

Slide 76 text

!20 Event-based Scheduler (EBS) Thread-based Scheduler Thread Scheduling Throughput Fairness Events-based Scheduling

Slide 77

Slide 77 text

!20 Event-based Scheduler (EBS) Thread-based Scheduler Thread Scheduling Throughput Fairness Events-based Scheduling Event Queue

Slide 78

Slide 78 text

!20 Event-based Scheduler (EBS) Thread-based Scheduler Thread Scheduling Throughput Fairness Event-based Scheduler Events-based Scheduling Event Queue

Slide 79

Slide 79 text

!20 Event-based Scheduler (EBS) Thread-based Scheduler Thread Scheduling Throughput Fairness Event-based Scheduler Events-based Scheduling Event Latency Event Energy Event Queue

Slide 80

Slide 80 text

!21 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices

Slide 81

Slide 81 text

!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core

Slide 82

Slide 82 text

!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core Voltage/ Frequency Levels

Slide 83

Slide 83 text

!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core

Slide 84

Slide 84 text

!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core

Slide 85

Slide 85 text

!23 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space Memory Operation CPU Operation Tmemory Ndependent f Event Latency Xie, et al., Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits, PLDI’03

Slide 86

Slide 86 text

!23 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space Memory Operation CPU Operation Tmemory Ndependent f Event Latency Xie, et al., Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits, PLDI’03 Event Latency =

Slide 87

Slide 87 text

!23 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space Memory Operation CPU Operation Tmemory Ndependent f Event Latency Xie, et al., Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits, PLDI’03 Event Latency = Tmemory +

Slide 88

Slide 88 text

!23 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space Memory Operation CPU Operation Tmemory Ndependent f Event Latency Xie, et al., Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits, PLDI’03 Event Latency = Tmemory + Ndependent / f

Slide 89

Slide 89 text

!23 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space Memory Operation CPU Operation Tmemory Ndependent f Event Latency Xie, et al., Compile-Time Dynamic Voltage Scaling Settings: Opportunities and Limits, PLDI’03 Event Latency = Tmemory + Ndependent / f

Slide 90

Slide 90 text

Evaluation Methodology ▸ Implemented inside Google Chromium Web browser ▸ Representative hardware platform ▹ Exynos 5410 SoC (A15 + A7) ▸UI-level record and replay for reproducibility. ▹ Mosaic [ISPASS 2015] https://github.com/Matthalp/mosaic 24

Slide 91

Slide 91 text

25 Evaluation Results 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

Slide 92

Slide 92 text

26 Evaluation Results 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 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 Android

Slide 93

Slide 93 text

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 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 Android 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 EBS 27 Evaluation Results 29.2% Energy Savings

Slide 94

Slide 94 text

0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 Android 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 EBS 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 28 Evaluation Results 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

Slide 95

Slide 95 text

0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 Android 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 EBS 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 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 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 29 Evaluation Results

Slide 96

Slide 96 text

0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 Android 0 0.2 0.4 0.6 0.8 1 1.2 0 0.2 0.4 0.6 0.8 1 EBS 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 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 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 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 30 Evaluation Results 0.8% More QoS violations

Slide 97

Slide 97 text

Rethink Event-based Scheduling 31 Event-based Scheduler Event Latency Event Energy Event Queue

Slide 98

Slide 98 text

Rethink Event-based Scheduling 31 Event-based Scheduler Event Latency Event Energy Pending Events Event Queue

Slide 99

Slide 99 text

Rethink Event-based Scheduling 31 Event-based Scheduler Event Latency Event Energy Pending Events onclick GC task Timer event Event Queue Time Event Queue Pending Events

Slide 100

Slide 100 text

Rethink Event-based Scheduling 31 Event-based Scheduler Event Latency Event Energy Reactive Strategy Pending Events onclick GC task Timer event Event Queue Time Event Queue Pending Events

Slide 101

Slide 101 text

Rethink Event-based Scheduling 31 Event-based Scheduler Event Latency Event Energy Reactive Strategy Pending Events onclick GC task Timer event ontouchmove onsubmit Event Queue Time Event Queue Pending Events

Slide 102

Slide 102 text

Rethink Event-based Scheduling 31 Event-based Scheduler Event Latency Event Energy Proactive Strategy Pending & Speculative Events onclick GC task Timer event ontouchmove onsubmit Event Queue Time Event Queue Pending Events Speculative Events

Slide 103

Slide 103 text

Inefficiency of Current Schedulers 32

Slide 104

Slide 104 text

Inefficiency of Current Schedulers 32 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2

Slide 105

Slide 105 text

Inefficiency of Current Schedulers 32 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 OS

Slide 106

Slide 106 text

Inefficiency of Current Schedulers 32 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 slack OS

Slide 107

Slide 107 text

Inefficiency of Current Schedulers 32 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 slack OS

Slide 108

Slide 108 text

Inefficiency of Current Schedulers 33 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 EBS OS

Slide 109

Slide 109 text

Inefficiency of Current Schedulers 33 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 E1 EBS OS

Slide 110

Slide 110 text

Inefficiency of Current Schedulers 33 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 E1 E2 EBS OS

Slide 111

Slide 111 text

Inefficiency of Current Schedulers 33 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 E1 E2 ? EBS OS

Slide 112

Slide 112 text

Inefficiency of Current Schedulers 34 Time Oracle input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 E1 E2 EBS OS

Slide 113

Slide 113 text

Inefficiency of Current Schedulers 34 Time Oracle input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 E1 E2 E1 E2 EBS OS

Slide 114

Slide 114 text

Inefficiency of Current Schedulers 35 Time input 1 input 2 QoS Deadline 1 QoS Deadline 2 E1 E2 Schedule across both pending and future events Oracle

Slide 115

Slide 115 text

PES: Proactive Event Scheduler 36

Slide 116

Slide 116 text

PES: Proactive Event Scheduler 36 Prediction Web Program Analysis Machine Learning

Slide 117

Slide 117 text

PES: Proactive Event Scheduler 36 Prediction Web Program Analysis Machine Learning Scheduling Constrained Optimization

Slide 118

Slide 118 text

PES: Proactive Event Scheduler 36 Prediction Web Program Analysis Machine Learning Scheduling Constrained Optimization

Slide 119

Slide 119 text

Event Sequence Learning 37 Prediction Model

Slide 120

Slide 120 text

Event Sequence Learning 37 Time E1 E2 E3 Event Sequence Prediction Model

Slide 121

Slide 121 text

Event Sequence Learning 37 Time E1 E2 E3 Event Sequence Prediction Model

Slide 122

Slide 122 text

Event Sequence Learning 37 Time E1 E2 E3 Event Sequence E4 Prediction Model

Slide 123

Slide 123 text

Event Sequence Learning 37 Time E1 E2 E3 Event Sequence E4 Prediction Model

Slide 124

Slide 124 text

Recurrent Prediction 38 Time E1 E2 E3 E4 Event Sequence Prediction Model

Slide 125

Slide 125 text

Recurrent Prediction 38 Time E1 E2 E3 E4 Event Sequence Prediction Model

Slide 126

Slide 126 text

Recurrent Prediction 38 Time E1 E2 E3 E4 Event Sequence E5 Prediction Model

Slide 127

Slide 127 text

Recurrent Prediction 38 Time E1 E2 E3 E4 Event Sequence E5 Prediction Model

Slide 128

Slide 128 text

Recurrent Prediction 38 Time E1 E2 E3 E4 Event Sequence E5 … Prediction Model

Slide 129

Slide 129 text

Prediction Model 39 Prediction Model

Slide 130

Slide 130 text

Prediction Model 40 Prediction Model The distance of click The number of scrolls The number of navigations Features encoding past interactions …

Slide 131

Slide 131 text

Prediction Model 41 Features encoding past interactions ln( p 1 − p ) = x β Prediction Model

Slide 132

Slide 132 text

Prediction Model 42 Features encoding past interactions Click ScrollUp ScrollDown ZoomIn ZoomOut … Prediction Model 0.10 0.12 0.58 0.07 0.02

Slide 133

Slide 133 text

Prediction Model 42 Features encoding past interactions Click ScrollUp ScrollDown ZoomIn ZoomOut … Prediction Model ✔

Slide 134

Slide 134 text

Prediction Model 42 Features encoding past interactions Click ScrollUp ScrollDown ZoomIn ZoomOut … Prediction Model All Event Types

Slide 135

Slide 135 text

Prediction Model 42 Features encoding past interactions Click ScrollUp ScrollDown ZoomIn ZoomOut … Prediction Model Filter Unlikely Events!

Slide 136

Slide 136 text

43 Program State Analysis

Slide 137

Slide 137 text

43 Program State Analysis

Slide 138

Slide 138 text

43
…
… Program State Analysis DOM Tree

Slide 139

Slide 139 text

43
…
… Program State Analysis DOM Tree Viewport

Slide 140

Slide 140 text

43
…
… Viewport Program State Analysis DOM Tree Viewport

Slide 141

Slide 141 text

43
…
… Viewport Program State Analysis DOM Tree Viewport

Slide 142

Slide 142 text

43
…
… Viewport Program State Analysis DOM Tree Viewport

Slide 143

Slide 143 text

43
…
… Viewport Program State Analysis DOM Tree Viewport

Slide 144

Slide 144 text

Integrating Program States 44 Features encoding past interactions Click ScrollUp ScrollDown ZoomIn ZoomOut … Prediction Model

Slide 145

Slide 145 text

Integrating Program States 45 Features encoding past interactions Click ScrollUp ScrollDown ZoomIn ZoomOut … Current
 application states + + Prediction Model

Slide 146

Slide 146 text

Overview of the Predictor 46 Click ScrollUp ScrollDown ZoomIn ZoomOut … + Prediction Model ~10 us Features encoding past interactions Current
 application states +

Slide 147

Slide 147 text

Overview of the Predictor 46 Click ScrollUp ScrollDown ZoomIn ZoomOut … + Prediction Model Stop until the cumulative confidence of the predicted event sequence is below a threshold ~10 us Features encoding past interactions Current
 application states +

Slide 148

Slide 148 text

PES: Proactive Event Scheduler 47 Prediction Web Program Analysis Machine Learning Scheduling Constrained Optimization

Slide 149

Slide 149 text

Constrained Optimization Formulation 48 E1 E2 E3 Time ▸ Goal: minimize total energy while meeting deadlines

Slide 150

Slide 150 text

Objective: Constrained Optimization Formulation 48 E1 E2 E3 Time ▸ Goal: minimize total energy while meeting deadlines N ∑ i Min. Energy (i)

Slide 151

Slide 151 text

Objective: Constrained Optimization Formulation 48 E1 E2 E3 Time △Texe 1 △Texe 2 △Texe 3 ▸ Goal: minimize total energy while meeting deadlines N ∑ i △Texe (i) x Min.

Slide 152

Slide 152 text

Objective: Constrained Optimization Formulation 48 E1 E2 E3 Time △Texe 1 △Texe 2 △Texe 3 ▸ Goal: minimize total energy while meeting deadlines N ∑ i △Texe (i) x Power (i) Min.

Slide 153

Slide 153 text

Objective: Constraints: Constrained Optimization Formulation 48 E1 E2 E3 Time △Texe 1 △Texe 2 △Texe 3 ▸ Goal: minimize total energy while meeting deadlines N ∑ i △Texe (i) x Power (i) Min.

Slide 154

Slide 154 text

Objective: Constraints: Constrained Optimization Formulation 48 E1 E2 E3 Time △Texe 1 △Texe 2 △Texe 3 ▸ Goal: minimize total energy while meeting deadlines Order: ≤ Tend (i) Tstart (i+1) N ∑ i △Texe (i) x Power (i) Min.

Slide 155

Slide 155 text

Objective: Constraints: Constrained Optimization Formulation 48 E1 E2 E3 Time Tstart 1 Tstart 2 Tstart 3 TQoS 1 TQoS 2 TQoS 3 △Texe 1 △Texe 2 △Texe 3 ▸ Goal: minimize total energy while meeting deadlines Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + N ∑ i △Texe (i) x Power (i) Min.

Slide 156

Slide 156 text

Objective: Constraints: Constrained Optimization Formulation 48 E1 E2 E3 Time Tstart 1 Tstart 2 Tstart 3 TQoS 1 TQoS 2 TQoS 3 △Texe 1 △Texe 2 △Texe 3 ▸ Goal: minimize total energy while meeting deadlines Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + Scheduling knobs: Big/little + DVFS for each event. N ∑ i △Texe (i) x Power (i) Min.

Slide 157

Slide 157 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Power (i) Min. △Texe (i) = Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) +

Slide 158

Slide 158 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Power (i) Min. △Texe (i) = Tmemory + Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) +

Slide 159

Slide 159 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Power (i) Min. Tcpu △Texe (i) = Tmemory + Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) +

Slide 160

Slide 160 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Power (i) Min. △Texe (i) = Tmemory + Ncycles / f (i) Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) +

Slide 161

Slide 161 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Power (i) Min. △Texe (i) = Tmemory + Constants Ncycles / f (i) Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) +

Slide 162

Slide 162 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Min. △Texe (i) = Tmemory + Constants Ncycles / f (i) Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + Pmap (i) Pmap (i) = Freq2Power (f(i))

Slide 163

Slide 163 text

Each Event: Objective: Constraints: Problem Formulation 49 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Min. △Texe (i) = Tmemory + Constants Offline profile Ncycles / f (i) Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + Pmap (i) Pmap (i) = Freq2Power (f(i))

Slide 164

Slide 164 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) +

Slide 165

Slide 165 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) ⍺ (i, j) in {0,1}

Slide 166

Slide 166 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) ⍺ (i, j) in {0,1} Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0

Slide 167

Slide 167 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) ⍺ (i, j) in {0,1} Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 168

Slide 168 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) ⍺ (i, j) in {0,1} Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0 Only one DVFS setting is chosen for each event

Slide 169

Slide 169 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 170

Slide 170 text

Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Integer Linear Programing! Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 171

Slide 171 text

Overhead: Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Integer Linear Programing! Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 172

Slide 172 text

Overhead: 10 DVFS configurations Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Integer Linear Programing! Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 173

Slide 173 text

Overhead: 10 DVFS configurations 8 events look ahead Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Integer Linear Programing! Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 174

Slide 174 text

Overhead: 80 variables in ILP Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Integer Linear Programing! Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0

Slide 175

Slide 175 text

Overhead: Runtime overhead: 10ms 80 variables in ILP Each Event: Objective: Constraints: Problem Formulation 50 ▸ Scheduling Problem → Constrained Optimization. N ∑ i △Texe (i) x Pmap (i) Min. Order: ≤ Tend (i) Tstart (i+1) Deadline: ≤ Tstart (i) △Texe (i) TQoS (i) + { Ncycles / f (i, j) } △Texe (i) =Tmemory +M ∑ j=0 * ⍺ (i, j) Integer Linear Programing! Pmap (i) = Freq2Power ( f(i, j) ) * ⍺ (i, j) M ∑ j=0 1 = ⍺ (i, j) With the constraint: M ∑ j=0 Dynamic programing

Slide 176

Slide 176 text

Putting Things Together 51 Web Application Rendering Engine Time

Slide 177

Slide 177 text

PES Putting Things Together 51 Web Application Rendering Engine Time

Slide 178

Slide 178 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Events Time Prediction

Slide 179

Slide 179 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Events Scheduler Predictions Time Prediction

Slide 180

Slide 180 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Events Speculative Schedules Scheduler Predictions Time Prediction Schedule

Slide 181

Slide 181 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Events Speculative Schedules Scheduler Predictions Time Prediction Schedule F1 Pending Frame Buffer F2 F3

Slide 182

Slide 182 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Controller Events Speculative Schedules Pending Frames Scheduler Predictions Time Prediction Schedule F1 Pending Frame Buffer F2 F3

Slide 183

Slide 183 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Controller Events Speculative Schedules Pending Frames Scheduler Predictions Time Prediction Schedule F1 Pending Frame Buffer F2 F3

Slide 184

Slide 184 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Controller Events Speculative Schedules Pending Frames Scheduler Predictions Commit Time Prediction Schedule F1 Pending Frame Buffer F2 F3 ✔ ✔

Slide 185

Slide 185 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Controller Events Speculative Schedules Pending Frames Recover Scheduler Predictions Commit Time Prediction Schedule F1 Pending Frame Buffer F2 F3 ✔ ✔ ✘

Slide 186

Slide 186 text

PES Putting Things Together 51 Web Application Rendering Engine Predictor Controller Events Speculative Schedules Pending Frames Recover Scheduler Predictions Commit Time Prediction Schedule F1 Pending Frame Buffer F2 F3 ✔ ✔ ✘ F3 ✔

Slide 187

Slide 187 text

Evaluation 52 52 ▸Traces ▹Training: 10 users, more than 100 traces. ▹Testing: 36 traces, 3 for each Web application. ▸Baseline Mechanisms ▹Interactive governor (Interactive) — Android default ▹EBS: a state-of-the-art reactive event-based scheduler ▹Oracle: optimal scheduler ▸Metrics ▹Energy consumption ▹QoS violation

Slide 188

Slide 188 text

High Prediction Accuracy, Low Mis-Prediction Penalty 53 Prediction Accuracy (%) 60 70 80 90 100 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter

Slide 189

Slide 189 text

High Prediction Accuracy, Low Mis-Prediction Penalty 53 Prediction Accuracy (%) 60 70 80 90 100 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Mis-prediction Waste (ms) 0 10 20 30 40 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter

Slide 190

Slide 190 text

High Prediction Accuracy, Low Mis-Prediction Penalty 53 Prediction Accuracy (%) 60 70 80 90 100 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Mis-prediction Waste (ms) 0 10 20 30 40 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter

Slide 191

Slide 191 text

High Prediction Accuracy, Low Mis-Prediction Penalty 53 Prediction Accuracy (%) 60 70 80 90 100 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Mis-prediction Waste (ms) 0 10 20 30 40 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter 92% Prediction Accuracy and 20 ms of Mis-Prediction Waste

Slide 192

Slide 192 text

Experimental Result 54

Slide 193

Slide 193 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 194

Slide 194 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 195

Slide 195 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 196

Slide 196 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 197

Slide 197 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 198

Slide 198 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle QoS Violation 0 0.15 0.3 0.45 0.6 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 199

Slide 199 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle QoS Violation 0 0.15 0.3 0.45 0.6 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 200

Slide 200 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle QoS Violation 0 0.15 0.3 0.45 0.6 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 201

Slide 201 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle QoS Violation 0 0.15 0.3 0.45 0.6 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle

Slide 202

Slide 202 text

Experimental Result 54 Norn. Energy 0 0.25 0.5 0.75 1 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle QoS Violation 0 0.15 0.3 0.45 0.6 163 msn slashdot youtube google amazon ebay sina espn bbc cnn twitter Interactive EBS PES Oracle 61% less QoS Violation and 26% of Energy Reduction

Slide 203

Slide 203 text

Event-driven Processing is a Fundamental and Prevalent Paradigm Edge Computing Database Crowdsourced Sensor Network Mobile Applications Virtual Reality Internet-of-things Cloud Computing

Slide 204

Slide 204 text

What’s Next?

Slide 205

Slide 205 text

“Microkernel”-based Browser ▸ A web app/website exercises only a small portion of the Web specification. There are “hot” tags, CSS properties, etc. ▸ Design a minimalistic browser core, and load the rest only when requested by a specific webpage. 57 https://www.advancedwebranking.com/html/ https://maqentaer.com/devopera-static-backup/http/dev.opera.com/articles/view/mama-css-syntax/index.html

Slide 206

Slide 206 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. 58

Slide 207

Slide 207 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX 58

Slide 208

Slide 208 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX ▹ Now: First Meaningful Paint (FMP), Time to Interactive (TTI), etc. 58

Slide 209

Slide 209 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX ▹ Now: First Meaningful Paint (FMP), Time to Interactive (TTI), etc. ▸ Still, focus on performance analysis and inspection without giving developers directly control over user-perceived performance. 58

Slide 210

Slide 210 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX ▹ Now: First Meaningful Paint (FMP), Time to Interactive (TTI), etc. ▸ Still, focus on performance analysis and inspection without giving developers directly control over user-perceived performance. ▹ Developers are given a set of high-level, coarse-grained guidelines 58

Slide 211

Slide 211 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX ▹ Now: First Meaningful Paint (FMP), Time to Interactive (TTI), etc. ▸ Still, focus on performance analysis and inspection without giving developers directly control over user-perceived performance. ▹ Developers are given a set of high-level, coarse-grained guidelines ▸ Proposal: empower developers to directly express their requirements of user-centric performance goals (up to the browser to deliver). 58

Slide 212

Slide 212 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX ▹ Now: First Meaningful Paint (FMP), Time to Interactive (TTI), etc. ▸ Still, focus on performance analysis and inspection without giving developers directly control over user-perceived performance. ▹ Developers are given a set of high-level, coarse-grained guidelines ▸ Proposal: empower developers to directly express their requirements of user-centric performance goals (up to the browser to deliver). ▹ Paint order: developers identify “hero” elements and specify the order in which hero elements are painted. div#hero {paint-order:1} 58

Slide 213

Slide 213 text

User-Centric Language (Extensions) ▸ Web performance is a comprehensive user-centric objective that can be not captured by one single metric. ▹ Old days: time when unload is fired, doesn’t corresponds to UX ▹ Now: First Meaningful Paint (FMP), Time to Interactive (TTI), etc. ▸ Still, focus on performance analysis and inspection without giving developers directly control over user-perceived performance. ▹ Developers are given a set of high-level, coarse-grained guidelines ▸ Proposal: empower developers to directly express their requirements of user-centric performance goals (up to the browser to deliver). ▹ Paint order: developers identify “hero” elements and specify the order in which hero elements are painted. div#hero {paint-order:1} ▹ Interactive state: developers specify the kind of interaction that should ideally be granted when a particular element is painted. div#menu{istate:touchstart,50} 58