Acceleration of Web Loading using Snapshot and Resource Preloading

Abstract

Reducing the loading time of a web app is important for better user experience. The loading time includes a large amount of computation and snapshot point) in a file called the snapshot in advance. Then, we start an app by copying the objects in the snapshot to the JavaScript heap directly, instead of executing JavaScript code to create them. Unfortunately, existing works save only the execution state of the global code in the snapshot, not that of the event handlers. Also, the JavaScript code whose execution may change the DOM (Document Object Model) tree is not saved in the snapshot, limiting the coverage of the snapshot.

We introduce snapshot+, an extended version of the snapshot where we save the execution state of the event handlers as well as that of the global code. Unlike the global code whose execution order is statically determined, the event handlers have a more dynamic execution order, depending on the triggering order of the events and the registration order of the event handlers. This makes it somewhat complicated to decide when to create and restore the snapshot. Snapshot+ provides a new API for the app developer to specify and register the event handlers eligible for snapshot so that the browser can create and restore the snapshot at the right place automatically. Also, snapshot+ can save a changed DOM tree in a serialized HTML string and restore it during app loading, allowing the DOM-changing JavaScript executions to be saved in the snapshot. Our experimental results show that snapshot+ can improve the app loading time by 52% (AngularJS apps), 42% (Ext JS apps), 48% (jQuery apps), and 18% (MooTools apps), compared to the original snapshot.

One issue of the snapshot is that the JavaScript execution state at the snapshot point should be the same at every app loading. If JavaScript execution included in the snapshot is involved with some nondeterminism (e.g., use random function or current time/location), snapshot-based app loading might be inapplicable since the loaded state might differ each time.

We perform an empirical study for the nondeterministic behavior of web apps during app loading. The result shows that nondeterminism is used frequently, but its impact is small from the users perspectives. Based on this observation, we propose two techniques that can increase the applicability of snapshot. First, we propose two types of snapshot point, which allows saving as much execution state as possible in the snapshot, just before the nondeterministic execution affects the users perception. Second, we develop a tool to identify those snapshot points by static and dynamic analysis, so that the developer can easily identify them. Our experimental results show that the techniques can accelerate the app loading by 1.81 times, by applying the snapshot that would otherwise be inapplicable, achieving a performance comparable to that of a snapshot that completely ignores the nondeterminism issues.

Resource loading is known to be another bottleneck of web app loading. Aggressive resource preloading techniques have been proposed to accelerate resource loading. A client or server identifies resources which web page needs in advance and preloads resources ahead of time instead of loading them on time. Existing client-only resource preloading saves the list of resources accessed in the previous visit of a web page and preloads them in advance in the current visit. However, it does not consider the access order of resources, thus the preloading of critical resources is delayed. There is also a remote proxy server-based resource preloading, which builds a dependency graph of resources to consider their access order. However, remote proxy server is expensive to provide for commercial client devices such as smart TVs.

We proposes a client-only solution for resource preloading that exploits the access order as well. Unlike the technique used in the proxy-server, the client needs to build the dependency graph concurrently while preloading the resources, requiring more precise, yet light-weight analysis. We made an elaborate preloading technique with such an analysis technique, which can accelerate the web app start-up effectively. Our experimental results on a Chromium browser with real web apps on an embedded board shows that the proposed technique can improve the app start-up time by 28%.

사용자 경험을 향상시키기 위해서는 웹 앱의 로딩 시간을 줄이는 것이 중요하다. 로딩 시간에서 연산과 네트워크 작업들이 큰 비중을 차지하며 연산 작업은 보통 script tag의 JavaScript global code 수행과 이어지는 JavaScript event handler 수행으로 구성되어 있다. 앱 로딩을 가속화하는 한 가지 방법은 snapshot point라고 불리는 앱 로딩 중의 특정 시점에서의 JavaScript 수행 상태를 snapshot이라는 파일로 저장하는 것이다. 이후에는 snapshot이 가지고 있는 JavaScript object들을 JavaScript heap에 복구하여 JavaScript code의 수행 없이 앱 상태를 복구할 수 있다. 하지만 기존 연구들은 global code의 수행 결과만을 snapshot에 저장하며 event handler의 수행 결과는 저장하지 못 한다. 또한 DOM (Document Object Model)을 변경하는 JavaScript code의 수행 결과는 snapshot에 저장할 수 없기에 snapshot의 적용 범위가 제한된다.

우리는 snapshot을 확장하여 event handler의 수행 결과와 DOM state를 저장할 수 있는 snapshot+를 제안하였다. 수행 순서가 고정되어 있는 global code와 달리 event handler의 실행 순서는 동적으로 달라질 수 있다. Event의 수행 순서와 event handler가 등록된 순서에 따라서 event handler의 실행 순서가 달라지며 이는 snapshot의 저장 및 복구를 어렵게 만든다. Snapshot+는 snapshot에 포함할 수 있는 event handler를 알려주는 새로운 API를 제공하여 올바른 시점에서 snapshot을 생성하고 복구하도록 하였다. 또한 snapshot+는 DOM tree의 변경점을 serialized HTML string 형태로 복구하여 DOM tree를 변경하는 JavaScript 수행 결과도 snapshot에 저장할 수 있도록 하였다. 실험 결과를 통해서 snapshot+는 앱 로딩 시간을 52% (AngularJS), 42% (Ext JS), 48% (jQuery), 18% (MooTools) 감소시킴을 확인하였다.

Snapshot을 만들때 한 가지 고려할 점으로 snapshot point는 매번 로딩에서 동일한 JavaScript 수행 상태를 생성해야 한다. 만약 snapshot에 포함 된 JavaScript 수행이 nondeterminism을 가진 경우 앱 로딩 상태가 매번 달라지므로 snapshot 기반의 앱 로딩을 사용하기 어렵다.

우리는 empirical study를 통해서 앱 로딩 과정에서의 nondeterminism의 영향을 분석하였다. 분석 결과로 nondeterminism이 자주 사용되나 사용자의 시점에 주는 영향은 미비함을 확인할 수 있었다. 이 관측을 통해서 우리는 snapshot의 사용성을 높이는 두 가지 기술을 제시하였다. 첫 번째로 사용자의 인식에 영향을 미치지 않는 nondeterminism을 포함하는 두 종류의 snapshot point를 제시하였다. 두 번째로 static 및 dynamic analysis를 통해서 snapshot point를 알려주는 tool을 개발하였다. 이를 통해 개발자는 쉽게 snapshot point를 찾아서 snapshot을 사용할 수 있다. 실험 결과를 통해서 nondeterminism을 고려한 snapshot이 앱 로딩을 1.81배 가속함을 확인하였다.

Resource loading은 웹 앱 로딩 과정에서의 bottleneck중 하나로 알려져 있다. Aggressive resource preloading은 resource loading을 가속화하기 위한 기술로 클라이언트 혹은 서버가 웹 페이지에서 사용할 resource를 미리 알아내고 resource를 요청하기 전에 미리 다운받는 기술이다. 기존의 client-only resource preloading은 resource의 목록만을 저장할 뿐 preload 순서에 대해서는 고려하지 않았다. 반면 server 기반의 resource preloading은 resource의 dependency를 분석하여 올바른 순서대로 preload를 수행한다. 하지만 server를 배포하고 유지하는 비용이 들어가기에 client device의 공급자는 이 방식을 사용하기 어렵다.

우리는 client-only resource preloading을 수행하면서도 resource의 사용 순서를 알아내는 방법을 제안하였다. Server 기반의 방식과는 다르게 client에서는 preload를 수행함과 동시에 dependency graph를 생성해야만 한다. 우리는 가벼우면서도 정확한 분석을 통해서 dependency를 계산하고 웹 로딩을 가속화 하였다. Chrome 브라우저에서의 실험을 통해서 웹 앱 로딩 시간이 평균 28% 감소함을 확인하였다.