JavaScript Code Optimization Strategies for Improved Web App Performance
Discover how Ben Livshits and Emre Kiciman from Microsoft Research discuss the importance of client-side JavaScript code in enhancing web application responsiveness and user experience. Explore techniques such as Doloto, runtime training, function rewriting, and background prefetching to efficiently manage code loading and execution.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Ben Livshits and Emre Kiciman Microsoft Research Redmond, WA
Talks to 14 backend services (traffic, images, directions, ads, ) 1+ MB code 70,000+ lines of JavaScript code downloaded 2,855 Functions
Up to 90% of a Web 2.0 app is JavaScript code! 3
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
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
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
var g = 10; var g = 10; function f1(){ 1. [training] Runtime training to collect access profiles var x=g+1; return ; } arguments); } var real_f1; function f1() { if(!real_f1){ var code = load( f1 ); real_f1 = eval(code); f1 = real_f1; 2. [rewriting] Function rewriting or stubbing for on-demand code loading } return real_f1.apply(this, 3. [prefetch] Background prefetch of clusters as the application is running eval($exp( f1 ), ); // 21 chars 7
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
50kbs/300ms 300kbs/300ms 300kbs/50ms 100% 90% 80% 70% 60% 50% 40% 30% 20% 10% 0% Chi game Bunny Hunt Live.com Live Maps Google Sp sheet
Ben Livshits (livshits@microsoft.com) Doloto MSR _
