Exploiting Snapshot for Web Applications

Abstract

Web applications (apps) are programmed using HTML5, CSS, and JavaScript, and are distributed in the source code format. Web apps can be executed on any devices where a web browser is installed, allowing one-source, multi-platform environment. We can exploit this advantage of platform independence for a new user experience called app migration, which allows migrating an app in the middle of execution seamlessly between smart devices. We proposes such a migration framework for web apps where we can save the current state of a running app and resume its execution on a different device by restoring the saved state. We save the web apps state in the form of a snapshot, which is actually another web app whose execution can restore the saved state. In the snapshot, the state of the JavaScript variables and DOM trees are saved using the JSON format. We solved some of the saving/restoring problems related to event handlers and closures by accessing the browser and the JavaScript engine internals. Our framework does not require instrumenting an app or changing its source code, but works for the original app. We implemented the framework on the Chrome browser with the V8 JavaScript engine and successfully migrated non-trivial sample apps with reasonable saving and restoring overhead. We also discuss other usage of the snapshot for optimizations and user experiences for the web platform. Another issues of web app is its performance. Web apps are involved with a performance issue due to JavaScript, because its dynamic typing, function object, and prototype are difficult to execute efficiently, so even just-in-time compilers do not help much. We propose a new approach to accelerate a web app, especially its loading time. Generally, running an app is composed of app loading to initialize the app, followed by event-driven computation. If the same job needs to be done to load an app, especially the execution of the same JavaScript code, it will be better to save the JavaScript execution state in advance and to start the app from the saved state. In fact, app loading is often involved with the initialization of the web framework such as jQuery [1], Enyo [2] , or Ext JS [3] where many JavaScript objects are created. Also, app-specific objects are created during app loading. If we save the initialized state of these objects in the form of a snapshot and start app loading by restoring the objects from the snapshot, we would accelerate app loading. Snapshot which saves JavaScript execution state has limitation because it cannot save DOM state. By using DOM Log-Replay which saves DOM state, we can save whole app loading state. Thus, we can remove all JavaScript execution during web app loading and directly reach the state which loading is completed by DOM snapshot, resulting in acceleration of web application loading time. DOM Log-Replay saves every DOM-related action occurs during loading time as a log. When restoring snapshot, log is replayed to restore DOM tree and various DOM elements. We actually implemented the idea for the web applications based on two web framework. This can reduce the whole app loading time by at least 60%, which could be noticed tangibly. Because snapshot saves JavaScript state as file, there is size overhead. This can be an issue in device with small memory such as IoT. Thus, size of snapshot needs to be reduced. Firstly, we compress snapshot and hide decompression overhead by implementing pre-decompression which decompresses snapshot in another thread before snapshot deserialization. Secondly, we implemented framework snapshot sharing which shares snapshot of JavaScript framework between apps developed with the same framework. With these techniques, performance is degraded for about 1.7%, but memory overhead is dramatically reduced from 12x to 2.59x.