JSZap : Compressing JavaScript Code

1. JSZap: Compressing JavaScript Code Martin Burtscher, UT Austin Ben Livshits & Ben Zorn, Microsoft Research GauravSinha, IIT Kanpur

2. A Web 2.0 Application Dissected 1+ MB code Talks to 14 backend services (traffic, images, directions, ads, …) 70,000+ lines of JavaScript code downloaded 2,855 Functions

3. Lots of JavaScript being Transmitted Up to 85% of a Web 2.0 app is JavaScript code!

4. AJAX: Tension Headaches

5. JavaScript on the Wire JSZap JavaScript crunch gzip gzip -d parser AST

6. JSZap Approach • Represent JavaScript as AST instead of source • Serialize the compressed AST • Decompress directly into AST on client • Use gzip as 2nd-level (de-)compressor

7. Benefits of AST-based Compression

8. JSZap Compression JavaScript JSZap gzip

9. JSZap Compression productions 1 JavaScript identifiers gzip 2 literals 3

10. GZIP is a formidable opponent

11. JSZap vs. GZIP

12. Talk Outline productions 1 evaluation on real code identifiers 2 literals 3

13. Background: ASTs Grammar Expression a * b + c Tree 1 + 1) E  E + T 2) E  T 3) T T * F 4) T  F 5) F  id 3 * c 5 a b 5 5

14. Literal Stream • Production Stream A Simple Javascript Example vary = 2; function foo () { varx = "jscrunch"; varz = 3; z = y + y; } x = "jszap"; 1 3 4 ... 1 3 4 ... y foo x z z y y x "jscrunch" 2 3 "jszap"

15. Benchmarking JSZap • JavaScript files up to 22K LOC • Variety of app types • Both hand-generated, and machine-generated • gzippedeverything

16. Components of JavaScript Source • None of the categories can be ignored • Identifiers become more prominent with code growth

17. Compressing the Production Stream • Frequency-based production renaming • Differential encoding: 26 and 57 => 2 and 3 • Chain rule: eliminate predictable productions • Tree-based prediction-by-partial-match

18. PPMC • Tree context used to build a predictor • Provides the next likely child node given context C and child position p • Arithmetic coding: more likely=shorter IDs • See paper for details • Consider compressing • if (P) then X else X • Should be very compressible • if (P) then ...abc... else ...abc... … … P X X

19. Production Compression with PPMC

20. Compressing the Identifier Stream • Symbol tables instead of identifier stream: • Compress redundancy: offset into table • Global or local symbol tables • Use variable-length encoding • Other techniques: • Sort symbols by frequency • Rename local variables

21. Variable-length Encoding for Identifiers

22. Variable-Length Identifier Encoding

23. Symbol Tables: Effectiveness

24. Compressing Literals • Symbol tables • Grouping literals by type • Pre-fixes and post-fixes • These techniques result in 5-10% savings compared to gzip

25. Average JSZap Compression: 10%

26. Summary and Conclusions • JSZap: AST-based compression for JavaScript • Propose a range of techniques for compressing • Productions • Identifiers • Literals • Preliminary results are encouraging: 10% savings over gzip • Future focus • Latency measurements • Browser integration

27. Questions? • Security (AdSafe) • Well-formedness • ASTrepresentation • Unblocking HTML parser • ? • Compression with JSZap • Caching and incremental updates