A Survey of Techniques for Improving Efficiency of Mobile Web Browsing

CONCURRENCY AND COMPUTATION: PRACTICE AND EXPERIENCE Concurrency Computat.: Pract. Exper. 2016; 00:1–42 Published online in Wiley InterScience (www.interscience.wiley.com). DOI: 10.1002/cpe

A Survey of Techniques for Improving Efficiency of Mobile Web Browsing Sparsh Mittal∗ and Venkat Mattela Indian Institute of Technology, Hyderabad

SUMMARY Mobile web traffic has now surpassed the desktop web traffic and has become the primary means for service providers to reach-out to the billions of end-users. Due to this trend, optimization of mobile web browsing (MWB) has gained significant attention. In this paper, we present a survey of techniques for improving efficiency of web browsing on mobile systems, proposed in last 6-7 years. We review the techniques from both networking domain (e.g., proxy and browser enhancements) and processor-architecture domain (e.g., hardware customization, thread-to-core scheduling). We organize the research works based on key parameters to highlight their similarities and differences. Beyond summarizing the recent works, this survey aims to emphasize the need of architecting for MWB as the first principle, instead of retrofitting for it. c 2016 John Wiley & Sons, Ltd. Copyright Received . . .

KEY WORDS: Review, mobile device, web browser, compression, network proxy, ad-filtering, big.LITTLE processor, dynamic voltage/frequency scaling (DVFS)

1. INTRODUCTION Mobile web browsing (MWB) can very well be termed as the confluence of two major revolutions: mobile and internet revolution. Mobile users now spend more than half of their time in web browsing [1]. Mobile and tablet browsing account for more than half the total browsing traffic and has surpassed the traffic due to desktop browsing [2]. Further, compared to the conventional batch-processing applications, mobile applications are interactive and user-facing, which makes it imperative to guarantee high QoE (quality-of-experience) in web browsing. Due to this, the size, complexity and computation intensity of webpages have grown significantly over time [3]. For example, the average webpage size has increased from 702KB in 2010 to 2332KB in 2016 [4]. At the same time, users expect webpages to load faster than ever before. For example, most users expect a webpage to load in less than 2-3 seconds and after this cut-off latency, the probability of webpage abandonment increases sharply [5]. The consequent user dissatisfaction can cause a major loss to the service providers. For example, a 0.4ms delay in the search can reduce the traffic to a search engine by 0.44% [6]. Similarly, a 1-second increase in page-load time (PLT) of an ecommerce website can cost it $1.6 billion loss in yearly sales [5, 7]. In comparison to these lofty targets, the state-of-art of MWB is far from satisfactory. The PLT for even landing page on a mobile system may approach ten seconds over both 3G and LTE network, even with high-end devices [8, 9]. At the same time, since humans can tolerate some latency (e.g., 100ms) for interactive tasks, executing a task faster than this latency wastes energy without ∗ Correspondence

to: Sparsh Mittal, IIT Hyderabad, Kandi, Sangareddy 502285, Telangana, India. email:

{sparsh,ee17resch11018}@iith.ac.in. Support for this work was provided by Science and Engineering Research Board

(SERB), India, award number ECR/2017/000622. c 2016 John Wiley & Sons, Ltd. Copyright Prepared using cpeauth.cls [Version: 2010/05/13 v3.00]

2 bringing any user-perceivable benefits. Thus, over-provisioning for providing better-than-acceptable performance is as harmful as under-provisioning leading to service abandonment. Further, the goal of service providers to cover the costs through ads remains at odds with users’ interest of lightweight presentation, especially due to the high energy/bandwidth overhead of ads and costly data plans. Furthermore, the techniques proposed for (wired) desktop browsing may not be directly applicable for (wireless) mobile browsing due to their different tradeoffs and optimization targets [10–12]. For example, the bottlenecks and number of redirections required for opening a webpage, among several other factors, are different for mobile and desktop browsers [3, 13]. Similarly, due to the negative interactions between the transport protocol and cellular state machine, SPDY and HTTP2 protocols do not reduce PLT on mobile browsers, as they do for desktop browsers [12]. Evidently, optimization of MWB requires exercising a delicate tradeoff between several factors such as energy, performance, cost and user-satisfaction. Addressing these challenges posed by MWB is demanding and yet, rewarding. Contributions: In this paper, we present a survey of techniques for improving efficiency of mobile web browsing. Figure 1 shows the organization of this paper. Section 2 first provides the background on key concepts. Then, it classifies the works based on key metrics and highlights the main ideas of research works. We discuss techniques for browser and network-level optimizations in Sections 3 through Section 5. Of these, Section 3 reviews techniques for improving energy efficiency of MWB. Sections 4 and 5 review techniques for reducing PLT and bandwidth consumption of MWB, respectively. Section 6 discusses techniques for (micro)architectural and processor-level optimizations. Section 7 concludes the paper with a discussion of future challenges.

Paper organization §2 Background and overview §2.1 Web browser architecture §2.2 Factors influencing webpage load time §2.3 Radio resource control protocol §2.4 Network proxy §2.5 Asymmetric multicore processor §2.6 Classification based on working approach and parameters §2.7 Classification based on optimization objective and evaluation §3 Techniques for saving energy §3.1 Getting insights into characteristics of MWB §3.2 Avoiding HTTP interaction for individual objects §3.3 Batching data transfers §3.4 Using page-specific JS and CSS file §3.5 Throttling execution speed of JS §3.6 Throttling content paint-rate §3.7 Color transformation scheme for OLED displays

§4 Techniques for reducing page load time §4.1 Caching §4.2 Prefetching and speculative-loading §4.3 Prioritizing high-utility URLs §4.4 Use of multi-path TCP §5 Techniques for reducing bandwidth consumption §5.1 Data compaction §5.2 Avoiding duplicate download §5.3 Content adaptation §5.4 Ad-filtering §6 Processor architecture-level techniques §6.1 Getting insights into browser applications’ characteristics §6.2 Using asymmetric multicore-scheduling, DVFS and power-gating techniques §6.3 Scheduling browser threads/services to processing-units/cores §6.4 Hardware specialization for MWB §6.5 Modeling QoS abstractions for MWB

§7 Conclusion and future outlook

Figure 1. Organization of the paper

Scope: To achieve a balance between breadth and brevity, in this paper, we include only those works that are focused on improving web-browsing efficiency on mobile devices, even though several works proposed in context of desktop processors may also be used for improving efficiency of MWB. Throughout the paper, we focus on the key idea of each work and include only selected numeric results. Although several research works span across multiple categories, we summarize them under a single category only. We believe that this paper will be useful for system/networking researchers, website designers, browser developers and others. Table I shows the acronyms used frequently in this paper. c 2016 John Wiley & Sons, Ltd. Copyright Prepared using cpeauth.cls

Concurrency Computat.: Pract. Exper. (2016) DOI: 10.1002/cpe

3 Table I. Acronyms used frequently in this paper Cascading style sheets Dynamic voltage/frequency scaling Hypertext transfer protocol Instruction set architecture Long term evolution Multi/single-path TCP Quality of experience/service Secure sockets layer Transmission control protocol

CSS DVFS HTTP ISA LTE MPTCP/SPTCP QoE/QoS SSL TCP

Document object model Hypertext markup language HTTP secure JavaScript Mobile Web browsing Organic light-emitting diode Radio interface layer daemon “Speedy” protocol Uniform resource locator

DOM HTML HTTPS JS MWB OLED RILD SPDY URL

2. BACKGROUND AND OVERVIEW In Sections 2.1 through 2.5, we discuss several concepts which will be useful throughout this paper. Then, in Sections 2.6 and 2.7, we classify the research works on several key parameters to provide insights.

2.1. Web browser architecture Figure 2 summarizes the design and operation of the web browser [14]. First, the rendering engine parses CSS and HTML files. The HTML has the text and overall structure of a webpage using different tags associated for various properties. While parsing the HTML file, the rendering engine also produces DOM tree data construct where every node refers to an HTML tag, a property or a section of a text. DOM tree shows the succinct summary of webpage composition. Outside entities Outside events Input

Browser parts Browser execution

Data structures

Dataflow JS engine

Server

Parsing

User

Style rules

DOM Style resolution Render tree

Display

Layout

Paint

Figure 2. An illustration of the architecture of web browser architecture

CSS decides the visual style of the webpage based on the style rules, each of which selects single/multiple HTML tags for applying the properties. At the time of parsing, CSS rules are extracted and corresponding data structure is constructed. Based on CSS rules and DOM tree, the style resolution unit decides the style information of the page (such as color font) by generating the render tree. Every node of the render tree corresponds to one visual component of the webpage. From this, the layout unit computes the precise screen-coordinates of every visual component. Finally, the painting unit traverses the render tree and invokes graphics libraries to actually display the page on the screen. c 2016 John Wiley & Sons, Ltd. Copyright Prepared using cpeauth.cls

Concurrency Computat.: Pract. Exper. (2016) DOI: 10.1002/cpe

4 2.2. Factors influencing webpage load time Figure 3 shows the dependency graph and timeline in loading of a sample webpage [13]. Evidently, the load time of a webpage is determined by the amount of resources present in it and the length of its dependency chain. For example, since the resources fetched initially (e.g., HTML, CSS, JS) need to be further processed to ascertain the resources which need to be fetched subsequently, the total PLT increases further. To illustrate this, Figure 4(a) shows the HTML file of a webpage [15] which has an embedded JS file shown in Figure 4(b). Figure 4(c) shows the list of all the resources of the webpage. Notice that the JS file itself points to another image, which can be found only after fetching and processing the JS file. 0

50

100

150

Time 200

HTML download HTML parsing CSS download JS download

300

250

PLT = 380 350 400

HTML parsing CSS eval JS eval Image download Image download Image download

Figure 3. Dependency graph on loading a sample webpage [13] which has a PLT of 380ms. The dashed line shows the critical path. (a) http://anySite/index.html