1 / 27

JSZap : Compressing JavaScript Code

JSZap : Compressing JavaScript Code. Martin Burtscher , UT Austin Ben Livshits & Ben Zorn, Microsoft Research Gaurav Sinha , IIT Kanpur. A Web 2.0 Application Dissected. 1+ MB code. Talks to 14 backend services (traffic, images, directions, ads, …).

vidor
Download Presentation

JSZap : Compressing JavaScript Code

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related