Doloto Code Splitting for AJAX Applications Ben Livshits
Doloto: Code Splitting for AJAX Applications Ben Livshits and Emre Kiciman Microsoft Research Redmond, WA
A Web 2. 0 Application Disected Talks to 14 backend services (traffic, images, directions, ads, …) 1+ MB code 70, 000+ lines of Java. Script code downloaded 2, 855 Functions
AJAX Apps Have Lots of Code Up to 90% of a Web 2. 0 app is Java. Script code! 3
Why AJAX? Client-side Java. Script 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
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
![Doloto Training Tool 1. [training] Runtime training to collect access profile (Ajax. View Fiddler](http://slidetodoc.com/presentation_image_h2/1059e784c8ddb91ce23782c4c92e8192/image-6.jpg "Doloto Training Tool 1. [training] Runtime training to collect access profile (Ajax. View Fiddler")
Doloto Training Tool 1. [training] Runtime training to collect access profile (Ajax. View Fiddler plugin) 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; 1. [training] Runtime training to collect function](http://slidetodoc.com/presentation_image_h2/1059e784c8ddb91ce23782c4c92e8192/image-7.jpg "Automated Function Splitting var g = 10; 1. [training] Runtime training to collect function")
Automated Function Splitting var g = 10; 1. [training] Runtime training to collect function f 1(){ var real_f 1; varaccess x=g+1; profiles function f 1() { … if(!real_f 1){ … var code = load(“f 1”); … real_f 1 = eval(code); 2. [rewriting] Function rewriting or … f 1 = real_f 1; … “stubbing” for} on-demand code loading return …; return real_f 1. apply(this, } arguments); } 3. [prefetch] Background prefetch of clusters as the application is running eval($exp(“f 1”), “”); // 21 chars 7
![Architecture of Doloto 1. [training] Runtime training to collect access profiles 2. [rewriting] Function](http://slidetodoc.com/presentation_image_h2/1059e784c8ddb91ce23782c4c92e8192/image-8.jpg "Architecture of Doloto 1. [training] Runtime training to collect access profiles 2. [rewriting] Function")
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
Size Savings with Doloto
Runtime Savings with Doloto 50 kbs/300 ms 300 kbs/50 ms 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% Chi game Bunny Hunt Live. com Live Maps Google Sp’sheet
Contact us Ben Livshits (livshits@microsoft. com) Doloto MSR _
- Slides: 11
