performance issues and optimizations in javascript: an...
TRANSCRIPT
![Page 1: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/1.jpg)
Performance Issues and OptimizationsPerformance Issues and Optimizationsin JavaScript: An Empirical Studyin JavaScript: An Empirical Study
Marija SelakovicMarija SelakovicMichael PradelMichael Pradel
May 18, 2016
1
![Page 2: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/2.jpg)
2
![Page 3: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/3.jpg)
3
![Page 4: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/4.jpg)
Why Do DevelopersWhy Do DevelopersOptimize JavaScript? Optimize JavaScript?
Still possible to write slow code
Compiler optimizations are limitedDeopts and bailouts
4
![Page 5: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/5.jpg)
This Talk: Empirical studyThis Talk: Empirical studyof performance issues andof performance issues andoptimizations in JavaScriptoptimizations in JavaScript
5
![Page 6: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/6.jpg)
ContributionsContributions
Better understanding ofperformance issues in JavaScript
Set of reproducibleperformance problems [1]
[1] https://github.com/marijaselakovic/JavaScriptIssuesStudy
6
![Page 7: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/7.jpg)
Who Benefits From This Study?Who Benefits From This Study?
Applicationdevelopers
Developers ofprogram analyses
Developers ofJS engines
7
![Page 8: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/8.jpg)
Motivating ExampleMotivating Example
for (var prop in arg) { if (arg.hasOwnProperty(prop)) { ..... }}
Iterates over allproperties of arg
var updates = Object.keys(arg);for (var i=0, l=updates.length; i<l; i++) { var prop = updates[i]; ......}
Provides enumerableproperties of arg
Ember.js pull request 11338
8
![Page 9: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/9.jpg)
MethodologyMethodology
Subject programs16 popular JavaScript projects High number of pull requests
Selection of performance issues~100 performance issuesReproducibleConfirmed and accepted optimizations
9
![Page 10: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/10.jpg)
What are the main root causes ofWhat are the main root causes ofperformance issues in JavaScript?performance issues in JavaScript?
10
![Page 11: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/11.jpg)
Most Prevalent Root CausesMost Prevalent Root Causes
52% of all issues are caused by 52% of all issues are caused by inefficient API usageinefficient API usage
11
![Page 12: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/12.jpg)
Inefficient API UsageInefficient API Usage
Multiple functionally equivalentways to do the same
str.split("'").join("\\'")
str.replace(/'/g, "\\'")
Relatively small number of root causesRelatively small number of root causes
12
![Page 13: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/13.jpg)
How complex the optimizations are?How complex the optimizations are?
13
![Page 14: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/14.jpg)
Performance vs. MaintainabilityPerformance vs. Maintainability
14
![Page 15: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/15.jpg)
Complexity of OptimizationsComplexity of Optimizations
Median: 10 lines37.5% do not modifynumber of statements47.2% do not modifycyclomatic complexity14.43% decreasecyclomatic complexity
Relatively simple changes canRelatively simple changes canspeedup JavaScript codespeedup JavaScript code
Slow code Fast code
15
![Page 16: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/16.jpg)
What is the performanceWhat is the performanceimpact of optimizations?impact of optimizations?
16
![Page 17: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/17.jpg)
Performance ImpactPerformance Impact
Developers apply optimizations thatDevelopers apply optimizations thatdegrade performancedegrade performance
17
![Page 18: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/18.jpg)
Are there recurringAre there recurringoptimization patterns?optimization patterns?
18
![Page 19: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/19.jpg)
Recurring OptimizationsRecurring Optimizations
29 studied instances are recurringAST-based static analysis139 new instancesReported 10 optimizations, 5 accepted
For the full list of reported optimizations, seehttps://github.com/marijaselakovic/JavaScriptIssuesStudy
Many optimizations are instances ofMany optimizations are instances ofrecurring patternsrecurring patterns
19
![Page 20: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/20.jpg)
Can recurring optimizations beCan recurring optimizations beapplied automatically?applied automatically?
20
![Page 21: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/21.jpg)
Automatically Applying RecurringAutomatically Applying RecurringPatternsPatterns
"Apparently, V8’s JIT engineers require that we,"Apparently, V8’s JIT engineers require that we,as JavaScript developers perform this veryas JavaScript developers perform this very
simple transformation, since they do not seemsimple transformation, since they do not seemcapable of performing it themselves" capable of performing it themselves"
(Developer of Ember.js)(Developer of Ember.js)
21
![Page 22: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/22.jpg)
Preconditions for AutomaticPreconditions for AutomaticTransformations Transformations
Challenging to statically analyzeChallenging to statically analyzethese preconditions in JavaScriptthese preconditions in JavaScript
for (var prop in arg) { if (arg.hasOwnProperty(prop)) { ..... }}
Type check:arg must be object
Native hasOwnProperty functionmust not be overridden
22
![Page 23: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/23.jpg)
ConclusionsConclusions
Systematic study of JavaScriptperformance issues
Small number of root causesInefficient API usageRelatively simple changesMany instances of recurring patterns
Thank you! Questions?
23
![Page 24: Performance Issues and Optimizations in JavaScript: An ...marija.skyresource.com/talks_list/ICSE_presentation.pdf · Ember.js pull request 11338 8. Methodology Subject programs 16](https://reader036.vdocuments.mx/reader036/viewer/2022071018/5fd23b5f351ae81185026e72/html5/thumbnails/24.jpg)
Instances of Recurring PatternsInstances of Recurring Patterns
Use JQuery empty function instead of html(' ')
body.html('') body.empty()
Instead of checking object type with toString useinstanceof operator
Object.prototype.toString. call(err) === '[object Error]' err instanceof Error
Prefer for loop over functional processing of array
styles.reduce( function (str, name) { return ...; }, str);
for (var i=0; i< styles.length; i++) { var name=styles[i]; str = ...; }return str;
24