Doloto: Code Splitting for AJAX Applications
description
Transcript of Doloto: Code Splitting for AJAX Applications
![Page 1: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/1.jpg)
Doloto:
Code Splitting for AJAX Applications
Ben Livshits and Emre KicimanMicrosoft Research
Redmond, WA
![Page 2: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/2.jpg)
A Web 2.0 Application Disected
70,000+ lines of JavaScript code
downloaded2,855 Functions
1+ MB codeTalks to 14 backend
services(traffic, images,
directions, ads, …)
![Page 3: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/3.jpg)
AJAX Apps Have Lots of Code
Up to 90% of a
Web 2.0 app is
JavaScript code!
3
![Page 4: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/4.jpg)
Why AJAX?
Client-side JavaScript code Reduces latency and improves user experience Avoids constant network round trips
Catch-22 Takes a while to transfer code to the client Code can be MBs in size Application execution is blocked until code arrives
![Page 5: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/5.jpg)
Motivation for Doloto
Idea behind Doloto Start with a small piece of code on the client Download required code on demand (pull) Send code when bandwidth available (push)
Leads to better application responsiveness Interleave code download & execution Faster startup times Rarely executed code is rarely downloaded
5
![Page 6: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/6.jpg)
1. [training] Runtime training to collect access profile (AjaxView Fiddler plugin)
2. [rewriting] Function rewriting or “stubbing” for on-demand code loading
3. [prefetch] Background prefetch of clusters as the application is running
Doloto Training Tool
![Page 7: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/7.jpg)
1. [training] Runtime training to collect access profiles
2. [rewriting] Function rewriting or “stubbing” for on-demand code loading
3. [prefetch] Background prefetch of clusters as the application is running
Automated Function Splitting
var g = 10;function f1(){ var x=g+1; … … … … … return …;}
var g = 10;
var real_f1;function f1() { if(!real_f1){ var code = load(“f1”); real_f1 = eval(code); f1 = real_f1; } return real_f1.apply(this, arguments);}
7eval($exp(“f1”), “”); // 21 chars
![Page 8: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/8.jpg)
Architecture of Doloto
1. [training] Runtime training to collect access profiles
2. [rewriting] Function rewriting or “stubbing” for on-demand code loading
3. [prefetch] Background prefetch of clusters as the application is running
![Page 9: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/9.jpg)
Size Savings with Doloto
![Page 10: Doloto: Code Splitting for AJAX Applications](https://reader035.fdocuments.net/reader035/viewer/2022062501/56816256550346895dd2a38f/html5/thumbnails/10.jpg)
Runtime Savings with Doloto
Chi game Bunny Hunt Live.com Live Maps Google Sp’sheet0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
50kbs/300ms 300kbs/300ms 300kbs/50ms