Marija Selakovic September 25th, 2015 JSConf, Berlin

Transcription

1 Let's make JavaScript programs faster Marija Selakovic September 25th, 2015 JSConf, Berlin

2 About me PhD Darmstadt First Performance, program analysis and refactorings Focus on JavaScript 1096 pages 172 pages

3 This talk :)

4 Why does JS performance matter? Crucial for responsiveness Crucial for energy efficiency

5 Why do we optimize JavaScript code? JIT compilation

6 Why do we optimize JavaScript code? Optimizations are limited

7 Why do we optimize JavaScript code? DEOPT and bailout

8 Why do we optimize JavaScript code? So, developers still manually optimize

9 How do developers optimize JS? Analyzed 98 performance issue reports 16 popular JavaScript projects

10 Inefficient iteration for(var key in src) { if (src.hasownproperty(key)) { dst[key] = src[key]; } } var keys = Object.keys(src); for (var i = 0, l = keys.length; i < l; i++) { var key = keys[i]; dst[key] = src[key]; }

11 Inefficient iteration 60% from jsperf.com

12 Repeated execution events = events.split(/\s+/); var eventsplitter = /\s+/;... events = events.split(eventsplitter);

13 Repeated execution 15% from jsperf.com

14 Inefficient copying var arraycopy=[]; for (var i = 0; i < array.length; i++) { arraycopy.push(array[i]); } var arraycopy=array.prototype.slice.call(array);

15 Inefficient copying 213% from jsperf.com

16 Inefficient API usage str.split("'").join("\\'") str.replace(/'/g, "\\'")

17 Inefficient API usage 44% from jsperf.com

18 Performance vs. maintainability Really?

19 Performance vs. maintainability

20 Complexity of optimizations Percentage of optimizations 35% of all optimizations don't change number of statements Do the optimizations increase the complexity of code? Percentage of optimizations % of all optimizations increase cyclomatic complexity by a value between 1 and Difference in number of statements Difference in cyclomatic complexity

21 What we have learned so far... Relatively simple changes Recurring optimizations Can we automate this? Program Optimized program

22 Semi-automatic refactorings Program + tests TRANSFORMATION Optimized program

23 Semi-automatic refactorings Program + tests + pattern specification AST matching AST rewriting Performance measurement Optimized program

24 Pattern specification Two fragments of JS code: original and optimized Placeholders for identifiers, literals and expressions //original code expression1.split($x).join($y); //optimized code expression1.replace(new RegExp($x,g),$y);

25 AST transformation Original code Optimized code Program Optimized program

26 AST matching AST: original code CallExpression AST: program CallExpression MemberExpression Identifier: $y MemberExpression Literal: \\' CallExpression Identifier: join CallExpression Identifier: join MemberExpression Identifier: $x MemberExpression Literal: ' Identifier: expression1 Identifier: split Identifier: str Identifier: split expression1.split($x).join($y); str.split("'").join("\\'");

27 AST rewriting AST: optimized code CallExpression MemberExpression NewExpression Identifier: $y Identifier: expression1 Identifier: replace Identifier: RegExp Identifier: $x Identifier: g expression1.replace(new RegExp($x,g), $y) AST: optimized program CallExpression MemberExpression NewExpression Literal:\\' Identifier: str Identifier: replace Identifier: RegExp Literal: ' Identifier: g str.replace(new RegExp("'",g), "\\'")

28 Performance measurement Runs original and modified program on given tests Shows the differences in execution times for each test

29 Can we find more optimizations? Specified 6 single statement patterns Run against 10 node.js libraries Found 35 new optimizations 24 of 35 show speedup YES, finds new optimizations!

30 Example function isdate(input) { return Object.prototype.toString.call(input) === '[object Date]' input instanceof Date; } function isdate(input) { return input instanceof Date Object.prototype.toString.call(input) === '[object Date]'; } 6 of 10 speedup

31 Conclusion Relatively simple changes can significantly improve performance of JS code, and semiautomatic refactorings can help you to achieve this goal! Thanks :)