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
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
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
▸ 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
▸ 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
▸ 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
!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core
!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
!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core
!22 Leveraging Heterogeneous Hardware ▸ Offer a large performance-energy trade-off space ▸ Widely used in commodity devices Energy Consumption Performance Big Core Small Core
!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
!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 =
!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 +
!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
!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
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
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.
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.
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.
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.
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) +
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
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
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
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
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
Event-driven Processing is a Fundamental and Prevalent Paradigm Edge Computing Database Crowdsourced Sensor Network Mobile Applications Virtual Reality Internet-of-things Cloud Computing
“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
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
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
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
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
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
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
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