[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-compressionstream-native-gzip":32,"code:js:true:1e46wcb":263,"code:js:true:zbkw4o":264,"code:js:true:1t5dblf":265,"code:js:true:14y6zyt":266,"code:js:true:1v21i04":267,"code:js:true:12h2ag8":268},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":245,"seo":246,"translationGroupId":250,"thread":251,"assessments":253,"translations":259,"quiz":261},"019ff19b-f5b3-7569-8cc8-22b1136aa9b2","compressionstream-native-gzip","You're importing pako to gzip data. `CompressionStream` does it natively.",null,"pako is one of npm's most downloaded packages — pulled in by thousands of projects to compress data before storing or sending it. CompressionStream and DecompressionStream do the same job natively, in any modern browser and Node.js 18+, with no dependencies and native C-speed execution.","\u002Fmedia\u002Fcovers\u002Fcompressionstream-native-gzip.png",4,"2026-08-10T07:49:27.000Z",53,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"javascript","JavaScript",[52,54,57,60],{"slug":49,"name":53,"color":36},"Javascript",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"performance","Performance",{"assessments":64},1,{"slug":34,"title":66},"CompressionStream — interactive playground",{"blocks":68,"version":64},[69,73,77,80,86,89,93,96,100,103,106,109,113,116,119,122,126,129,132,136,139,142,145,165,168,170,173,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237],{"id":70,"html":71,"type":72},"b1","\u003Cp>Compressing data before writing it to IndexedDB or sending it over a slow connection is a real optimization. When a cached API response is too large for reliable storage, or when you need to shrink a JSON payload before POSTing it, \u003Ccode>pako.gzip()\u003C\u002Fcode> is the standard reach. But pako is a pure-JavaScript port of zlib — written in user space to fill a gap the browser had at the time. The \u003Ccode>CompressionStream\u003C\u002Fcode> API is that gap closing.\u003C\u002Fp>","paragraph",{"id":74,"html":75,"text":75,"type":76,"level":31},"b2","The API","heading",{"id":78,"html":79,"type":72},"b3","\u003Cp>\u003Ccode>CompressionStream\u003C\u002Fcode> is a \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FTransformStream\">transform stream\u003C\u002Fa> — data goes in one end, compressed data comes out the other. The constructor takes a format string: \u003Ccode>'gzip'\u003C\u002Fcode>, \u003Ccode>'deflate'\u003C\u002Fcode>, or \u003Ccode>'deflate-raw'\u003C\u002Fcode>.\u003C\u002Fp>",{"id":81,"code":82,"type":83,"language":84,"highlight":85},"b4","const stream = new CompressionStream('gzip');","code","js",[],{"id":87,"html":88,"type":72},"b5","\u003Cp>\u003Ccode>DecompressionStream\u003C\u002Fcode> is the mirror:\u003C\u002Fp>",{"id":90,"code":91,"type":83,"language":84,"highlight":92},"b6","const stream = new DecompressionStream('gzip');",[],{"id":94,"html":95,"type":72},"b7","\u003Cp>The Streams plumbing to feed data in and collect it out is the verbose part. Wrap it once:\u003C\u002Fp>",{"id":97,"code":98,"type":83,"language":84,"highlight":99},"b8","async function compress(input, format = 'gzip') {\n  const stream = new Blob([input]).stream().pipeThrough(new CompressionStream(format));\n  return new Uint8Array(await new Response(stream).arrayBuffer());\n}\n\nasync function decompress(input, format = 'gzip') {\n  const stream = new Blob([input]).stream().pipeThrough(new DecompressionStream(format));\n  return new Response(stream).text();\n}",[],{"id":101,"html":102,"type":72},"b9","\u003Cp>\u003Ccode>Blob.stream().pipeThrough()\u003C\u002Fcode> feeds the data into the transform stream; \u003Ccode>new Response(stream)\u003C\u002Fcode> collects the result. The idiom is three lines of plumbing written once, then call sites that read plainly.\u003C\u002Fp>",{"id":104,"html":105,"text":105,"type":76,"level":31},"b10","Replacing pako",{"id":107,"html":108,"type":72},"b11","\u003Cp>A direct swap for the most common pako usage patterns:\u003C\u002Fp>",{"id":110,"code":111,"type":83,"language":84,"highlight":112},"b12","\u002F\u002F Before — pako\nimport pako from 'pako';\n\nconst compressed = pako.gzip(jsonString);       \u002F\u002F Uint8Array\nconst restored   = pako.ungzip(compressed, { to: 'string' });\n\n\u002F\u002F After — native\nconst compressed = await compress(jsonString);           \u002F\u002F Uint8Array\nconst restored   = await decompress(compressed);         \u002F\u002F string",[],{"id":114,"html":115,"type":72},"b13","\u003Cp>The output is the same gzip-format \u003Ccode>Uint8Array\u003C\u002Fcode>. Any system that accepts pako's output accepts the native output — the wire format is identical.\u003C\u002Fp>",{"id":117,"html":118,"text":118,"type":76,"level":31},"b14","Real-world patterns",{"id":120,"html":121,"type":72},"b15","\u003Cp>\u003Cstrong>Storing large JSON in IndexedDB:\u003C\u002Fstrong>\u003C\u002Fp>",{"id":123,"code":124,"type":83,"language":84,"highlight":125},"b16","async function putCompressed(store, key, data) {\n  const compressed = await compress(JSON.stringify(data));\n  return store.put(compressed, key);\n}\n\nasync function getCompressed(store, key) {\n  const compressed = await store.get(key);\n  if (!compressed) return null;\n  return JSON.parse(await decompress(compressed));\n}",[],{"id":127,"html":128,"type":72},"b17","\u003Cp>A 200 KB JSON object typically compresses to 15–30 KB with gzip. For quota-constrained storage like IndexedDB on mobile browsers, that difference matters.\u003C\u002Fp>",{"id":130,"html":131,"type":72},"b18","\u003Cp>\u003Cstrong>Compressing in a Web Worker:\u003C\u002Fstrong>\u003C\u002Fp>",{"id":133,"code":134,"type":83,"language":84,"highlight":135},"b19","\u002F\u002F worker.js\nself.onmessage = async ({ data }) => {\n  const compressed = await compress(JSON.stringify(data.payload));\n  self.postMessage({ compressed }, [compressed.buffer]);\n};",[],{"id":137,"html":138,"type":72},"b20","\u003Cp>\u003Ccode>CompressionStream\u003C\u002Fcode> works in Web Workers and Service Workers — the same API, the same two-function wrapper, no restrictions. Offloading compression to a worker keeps the main thread free.\u003C\u002Fp>",{"id":140,"html":141,"text":141,"type":76,"level":31},"b21","Format reference",{"id":143,"html":144,"type":72},"b22","\u003Cp>The three supported formats map directly to pako's methods:\u003C\u002Fp>",{"id":146,"head":147,"rows":151,"type":164},"b23",[148,149,150],"\u003Ccode>CompressionStream\u003C\u002Fcode> format","pako equivalent","When to use",[152,156,160],[153,154,155],"\u003Ccode>'gzip'\u003C\u002Fcode>","\u003Ccode>pako.gzip\u003C\u002Fcode> \u002F \u003Ccode>pako.ungzip\u003C\u002Fcode>","HTTP transport, file storage — the standard",[157,158,159],"\u003Ccode>'deflate'\u003C\u002Fcode>","\u003Ccode>pako.deflate\u003C\u002Fcode> \u002F \u003Ccode>pako.inflate\u003C\u002Fcode>","zlib-wrapped deflate",[161,162,163],"\u003Ccode>'deflate-raw'\u003C\u002Fcode>","\u003Ccode>pako.deflateRaw\u003C\u002Fcode> \u002F \u003Ccode>pako.inflateRaw\u003C\u002Fcode>","raw DEFLATE, no wrapper header","table",{"id":166,"html":167,"type":72},"b24","\u003Cp>\u003Ccode>'gzip'\u003C\u002Fcode> is the right default for most use cases. Use \u003Ccode>'deflate-raw'\u003C\u002Fcode> only when interoperating with a system that expects unwrapped DEFLATE.\u003C\u002Fp>",{"id":169,"html":62,"text":62,"type":76,"level":31},"b25",{"id":171,"html":172,"type":72},"b26","\u003Cp>\u003Ccode>CompressionStream\u003C\u002Fcode> calls into the browser's native zlib implementation — the same C code path used when the browser decompresses HTTP responses with \u003Ccode>Content-Encoding: gzip\u003C\u002Fcode>. pako re-implements that algorithm in JavaScript. The native path is measurably faster on large inputs:\u003C\u002Fp>",{"id":174,"type":175,"items":176,"ordered":18},"b27","list",[177,178,179],"For small payloads (< 10 KB), the difference is negligible.","For large payloads (100 KB+), native compression is typically 3–10× faster than pako, because there's no JavaScript overhead and the engine can use SIMD instructions.","There's also no bundle cost: pako adds ~45 KB minified to your bundle; \u003Ccode>CompressionStream\u003C\u002Fcode> adds zero.",{"id":181,"html":182,"text":182,"type":76,"level":31},"b28","Node.js",{"id":184,"html":185,"type":72},"b29","\u003Cp>\u003Ccode>CompressionStream\u003C\u002Fcode> and \u003Ccode>DecompressionStream\u003C\u002Fcode> are available in \u003Cstrong>Node.js 18.0\u003C\u002Fstrong> as part of the Web Streams implementation. The two-function wrapper above works unchanged in Node 18+ — useful for isomorphic utilities that run in both browser and server environments without branching on the environment.\u003C\u002Fp>",{"id":187,"html":188,"type":72},"b30","\u003Cp>Node's older \u003Ccode>zlib\u003C\u002Fcode> module (\u003Ccode>zlib.gzipSync\u003C\u002Fcode>, \u003Ccode>zlib.gunzipSync\u003C\u002Fcode>) is still more ergonomic for Node-only server code. But if you're writing a shared utility that must work in both contexts, \u003Ccode>CompressionStream\u003C\u002Fcode> is the right choice.\u003C\u002Fp>",{"id":190,"html":191,"text":191,"type":76,"level":31},"b31","Browser support",{"id":193,"html":194,"type":72},"b32","\u003Cp>\u003Ccode>CompressionStream\u003C\u002Fcode> is \u003Cstrong>Baseline 2023\u003C\u002Fstrong>: Chrome 80 (February 2020), Firefox 113 (May 2023), Safari 16.4 (March 2023), Node.js 18. The API has been in Chromium since early 2020; Firefox and Safari joined in 2023. It's available in all currently-supported browser and runtime versions, including Web Workers and Service Workers.\u003C\u002Fp>",{"id":196,"html":197,"type":72},"b33","\u003C!-- playground:start -->",{"id":199,"html":200,"text":200,"type":76,"level":31},"b34","🎮 Try it yourself",{"id":202,"html":203,"type":72},"b35","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-08-10-compressionstream-native-gzip\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":205,"html":206,"type":72},"b36","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":208,"html":209,"type":72},"b37","\u003C!-- playground:end -->",{"id":211,"html":212,"type":72},"b38","\u003C!-- quiz:start -->",{"id":214,"html":215,"text":215,"type":76,"level":31},"b39","🧠 Test yourself",{"id":217,"html":218,"type":72},"b40","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-08-10-compressionstream-native-gzip\">Take the 9-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":220,"html":221,"type":72},"b41","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":223,"html":224,"type":72},"b42","\u003C!-- quiz:end -->",{"id":226,"html":227,"text":227,"type":76,"level":31},"b43","The takeaway",{"id":229,"html":230,"type":72},"b44","\u003Cp>Search your \u003Ccode>package.json\u003C\u002Fcode> for \u003Ccode>pako\u003C\u002Fcode>. If it's there and the use case is "compress a string or buffer before storing or sending it," the native API covers you. Replace \u003Ccode>pako.gzip\u003C\u002Fcode> and \u003Ccode>pako.ungzip\u003C\u002Fcode> with the two-function wrapper above, remove the dependency, and get native compression speed and zero bundle cost. The Streams API is verbose on its own — the wrapper absorbs that cost once so every call site stays clean.\u003C\u002Fp>",{"id":232,"type":233},"b45","divider",{"id":235,"html":236,"type":72},"b46","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":238,"type":175,"items":239,"ordered":18},"b47",[240,241,242,243,244],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Compressing data before writing it to IndexedDB or sending it over a slow connection is a real optimization. When a cached API response is too large for reliable storage, or when you need to shrink a JSON payload before POSTing it, `pako.gzip()` is the standard reach. But pako is a pure-JavaScript port of zlib — written in user space to fill a gap the browser had at the time. The `CompressionStream` API is that gap closing.\n\n## The API\n\n`CompressionStream` is a [transform stream](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FTransformStream) — data goes in one end, compressed data comes out the other. The constructor takes a format string: `'gzip'`, `'deflate'`, or `'deflate-raw'`.\n\n```js\nconst stream = new CompressionStream('gzip');\n```\n\n`DecompressionStream` is the mirror:\n\n```js\nconst stream = new DecompressionStream('gzip');\n```\n\nThe Streams plumbing to feed data in and collect it out is the verbose part. Wrap it once:\n\n```js\nasync function compress(input, format = 'gzip') {\n  const stream = new Blob([input]).stream().pipeThrough(new CompressionStream(format));\n  return new Uint8Array(await new Response(stream).arrayBuffer());\n}\n\nasync function decompress(input, format = 'gzip') {\n  const stream = new Blob([input]).stream().pipeThrough(new DecompressionStream(format));\n  return new Response(stream).text();\n}\n```\n\n`Blob.stream().pipeThrough()` feeds the data into the transform stream; `new Response(stream)` collects the result. The idiom is three lines of plumbing written once, then call sites that read plainly.\n\n## Replacing pako\n\nA direct swap for the most common pako usage patterns:\n\n```js\n\u002F\u002F Before — pako\nimport pako from 'pako';\n\nconst compressed = pako.gzip(jsonString);       \u002F\u002F Uint8Array\nconst restored   = pako.ungzip(compressed, { to: 'string' });\n\n\u002F\u002F After — native\nconst compressed = await compress(jsonString);           \u002F\u002F Uint8Array\nconst restored   = await decompress(compressed);         \u002F\u002F string\n```\n\nThe output is the same gzip-format `Uint8Array`. Any system that accepts pako's output accepts the native output — the wire format is identical.\n\n## Real-world patterns\n\n**Storing large JSON in IndexedDB:**\n\n```js\nasync function putCompressed(store, key, data) {\n  const compressed = await compress(JSON.stringify(data));\n  return store.put(compressed, key);\n}\n\nasync function getCompressed(store, key) {\n  const compressed = await store.get(key);\n  if (!compressed) return null;\n  return JSON.parse(await decompress(compressed));\n}\n```\n\nA 200 KB JSON object typically compresses to 15–30 KB with gzip. For quota-constrained storage like IndexedDB on mobile browsers, that difference matters.\n\n**Compressing in a Web Worker:**\n\n```js\n\u002F\u002F worker.js\nself.onmessage = async ({ data }) => {\n  const compressed = await compress(JSON.stringify(data.payload));\n  self.postMessage({ compressed }, [compressed.buffer]);\n};\n```\n\n`CompressionStream` works in Web Workers and Service Workers — the same API, the same two-function wrapper, no restrictions. Offloading compression to a worker keeps the main thread free.\n\n## Format reference\n\nThe three supported formats map directly to pako's methods:\n\n| `CompressionStream` format | pako equivalent | When to use |\n|---|---|---|\n| `'gzip'` | `pako.gzip` \u002F `pako.ungzip` | HTTP transport, file storage — the standard |\n| `'deflate'` | `pako.deflate` \u002F `pako.inflate` | zlib-wrapped deflate |\n| `'deflate-raw'` | `pako.deflateRaw` \u002F `pako.inflateRaw` | raw DEFLATE, no wrapper header |\n\n`'gzip'` is the right default for most use cases. Use `'deflate-raw'` only when interoperating with a system that expects unwrapped DEFLATE.\n\n## Performance\n\n`CompressionStream` calls into the browser's native zlib implementation — the same C code path used when the browser decompresses HTTP responses with `Content-Encoding: gzip`. pako re-implements that algorithm in JavaScript. The native path is measurably faster on large inputs:\n\n- For small payloads (\u003C 10 KB), the difference is negligible.\n- For large payloads (100 KB+), native compression is typically 3–10× faster than pako, because there's no JavaScript overhead and the engine can use SIMD instructions.\n- There's also no bundle cost: pako adds ~45 KB minified to your bundle; `CompressionStream` adds zero.\n\n## Node.js\n\n`CompressionStream` and `DecompressionStream` are available in **Node.js 18.0** as part of the Web Streams implementation. The two-function wrapper above works unchanged in Node 18+ — useful for isomorphic utilities that run in both browser and server environments without branching on the environment.\n\nNode's older `zlib` module (`zlib.gzipSync`, `zlib.gunzipSync`) is still more ergonomic for Node-only server code. But if you're writing a shared utility that must work in both contexts, `CompressionStream` is the right choice.\n\n## Browser support\n\n`CompressionStream` is **Baseline 2023**: Chrome 80 (February 2020), Firefox 113 (May 2023), Safari 16.4 (March 2023), Node.js 18. The API has been in Chromium since early 2020; Firefox and Safari joined in 2023. It's available in all currently-supported browser and runtime versions, including Web Workers and Service Workers.\n\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-08-10-compressionstream-native-gzip\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 9-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-08-10-compressionstream-native-gzip)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n## The takeaway\n\nSearch your `package.json` for `pako`. If it's there and the use case is \"compress a string or buffer before storing or sending it,\" the native API covers you. Replace `pako.gzip` and `pako.ungzip` with the two-function wrapper above, remove the dependency, and get native compression speed and zero bundle cost. The Streams API is verbose on its own — the wrapper absorbs that cost once so every call site stays clean.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":247,"canonical":248,"description":249},"You're importing pako to gzip data. `CompressionStream` does it native","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcompressionstream-native-gzip","pako is one of npm's most downloaded packages — pulled in by thousands of projects to compress data before storing or sending it. CompressionStream and DecompressionStream do the s","019ff19b-f5b3-7569-8cc8-26ce3d003b46",{"id":252,"locked":18},"019ff19b-f5cd-72ed-b408-85e7f5a92070",[254],{"id":255,"slug":34,"title":256,"_count":257},"019ff19b-f5e9-74ff-8f5c-5feaea317066","CompressionStream — native gzip without pako",{"questions":258},9,[260],{"locale":13,"slug":34},{"id":255,"slug":34,"title":256,"_count":262,"questionCount":258},{"questions":258},"\u003Cdiv class=\"shj shj-lang-js shj-oneline\" data-lang=\"js\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> stream \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">CompressionStream\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'gzip'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-oneline\" data-lang=\"js\">\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> stream \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">DecompressionStream\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-str\">'gzip'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">async\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-func\">compress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>input\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> format \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'gzip'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> stream \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Blob\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>input\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">stream\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">pipeThrough\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">CompressionStream\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>format\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Uint8Array\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Response\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>stream\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">arrayBuffer\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">async\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-func\">decompress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>input\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> format \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'gzip'\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> stream \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Blob\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>input\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">stream\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">pipeThrough\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">DecompressionStream\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>format\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">new\u003C\u002Fspan> \u003Cspan class=\"shj-class\">Response\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>stream\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">text\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F Before — pako\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">import\u003C\u002Fspan> pako \u003Cspan class=\"shj-kwd\">from\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'pako'\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> compressed \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> pako\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">gzip\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>jsonString\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;       \u003Cspan class=\"shj-cmnt\">\u002F\u002F Uint8Array\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> restored   \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> pako\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">ungzip\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>compressed\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> to\u003Cspan class=\"shj-oper\">:\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'string'\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-cmnt\">\u002F\u002F After — native\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> compressed \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-func\">compress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>jsonString\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;           \u003Cspan class=\"shj-cmnt\">\u002F\u002F Uint8Array\n\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> restored   \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-func\">decompress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>compressed\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;         \u003Cspan class=\"shj-cmnt\">\u002F\u002F string\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-kwd\">async\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-func\">putCompressed\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>store\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> key\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> data\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> compressed \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-func\">compress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">JSON\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">stringify\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>data\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> store\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">put\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>compressed\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> key\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">async\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">function\u003C\u002Fspan> \u003Cspan class=\"shj-func\">getCompressed\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>store\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> key\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> compressed \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> store\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">get\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>key\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">if\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">!\u003C\u002Fspan>compressed\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-num\">null\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-kwd\">return\u003C\u002Fspan> \u003Cspan class=\"shj-num\">JSON\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">parse\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-func\">decompress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>compressed\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-cmnt\">\u002F\u002F worker.js\n\u003C\u002Fspan>self\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>onmessage \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">async\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> data \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-kwd\">const\u003C\u002Fspan> compressed \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">await\u003C\u002Fspan> \u003Cspan class=\"shj-func\">compress\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">JSON\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">stringify\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>data\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>payload\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  self\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">postMessage\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan> compressed \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-oper\">,\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>compressed\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>buffer\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]