[{"data":1,"prerenderedAt":332},["ShallowReactive",2],{"term-w\u002Fweb-worker":3,"related-w\u002Fweb-worker":321},{"id":4,"title":5,"acronym":6,"body":7,"category":304,"description":305,"difficulty":306,"extension":307,"letter":308,"meta":309,"navigation":168,"path":310,"related":311,"seo":315,"sitemap":316,"stem":319,"subcategory":6,"__hash__":320},"terms\u002Fterms\u002Fw\u002Fweb-worker.md","Web Worker",null,{"type":8,"value":9,"toc":298},"minimark",[10,15,19,23,26,30,287,291,294],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"JavaScript normally runs on one thread, which means heavy computation freezes your UI. A Web Worker lets you run code in a background thread so your page stays responsive. Need to parse a 50MB JSON file? Do it in a Worker so the user can still click buttons while you crunch numbers.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Web Workers are a browser API that allows JavaScript to run in background threads separate from the main UI thread. Workers cannot access the DOM directly and communicate with the main thread via postMessage. They are used for CPU-intensive tasks like data processing, image manipulation, and encryption to avoid blocking the UI.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F worker.js\nself.onmessage = ({ data }) => {\n  const result = data.reduce((acc, n) => acc + n, 0)\n  self.postMessage(result)\n}\n\n\u002F\u002F main.js\nconst worker = new Worker('.\u002Fworker.js')\nworker.postMessage([1, 2, 3, 4, 5])\nworker.onmessage = ({ data }) => console.log('Sum:', data)\n","javascript","",[38,39,40,49,84,139,157,163,170,176,207,246],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F worker.js\n",[41,50,52,56,60,64,67,70,74,77,81],{"class":43,"line":51},2,[41,53,55],{"class":54},"sTEyZ","self",[41,57,59],{"class":58},"sMK4o",".",[41,61,63],{"class":62},"s2Zo4","onmessage",[41,65,66],{"class":58}," =",[41,68,69],{"class":58}," ({",[41,71,73],{"class":72},"sHdIc"," data",[41,75,76],{"class":58}," })",[41,78,80],{"class":79},"spNyl"," =>",[41,82,83],{"class":58}," {\n",[41,85,87,90,93,95,97,99,102,106,108,111,114,117,120,122,125,128,130,132,136],{"class":43,"line":86},3,[41,88,89],{"class":79},"  const",[41,91,92],{"class":54}," result",[41,94,66],{"class":58},[41,96,73],{"class":54},[41,98,59],{"class":58},[41,100,101],{"class":62},"reduce",[41,103,105],{"class":104},"swJcz","(",[41,107,105],{"class":58},[41,109,110],{"class":72},"acc",[41,112,113],{"class":58},",",[41,115,116],{"class":72}," n",[41,118,119],{"class":58},")",[41,121,80],{"class":79},[41,123,124],{"class":54}," acc",[41,126,127],{"class":58}," +",[41,129,116],{"class":54},[41,131,113],{"class":58},[41,133,135],{"class":134},"sbssI"," 0",[41,137,138],{"class":104},")\n",[41,140,142,145,147,150,152,155],{"class":43,"line":141},4,[41,143,144],{"class":54},"  self",[41,146,59],{"class":58},[41,148,149],{"class":62},"postMessage",[41,151,105],{"class":104},[41,153,154],{"class":54},"result",[41,156,138],{"class":104},[41,158,160],{"class":43,"line":159},5,[41,161,162],{"class":58},"}\n",[41,164,166],{"class":43,"line":165},6,[41,167,169],{"emptyLinePlaceholder":168},true,"\n",[41,171,173],{"class":43,"line":172},7,[41,174,175],{"class":47},"\u002F\u002F main.js\n",[41,177,179,182,185,188,191,194,196,199,203,205],{"class":43,"line":178},8,[41,180,181],{"class":79},"const",[41,183,184],{"class":54}," worker ",[41,186,187],{"class":58},"=",[41,189,190],{"class":58}," new",[41,192,193],{"class":62}," Worker",[41,195,105],{"class":54},[41,197,198],{"class":58},"'",[41,200,202],{"class":201},"sfazB",".\u002Fworker.js",[41,204,198],{"class":58},[41,206,138],{"class":54},[41,208,210,213,215,217,220,223,225,228,230,233,235,238,240,243],{"class":43,"line":209},9,[41,211,212],{"class":54},"worker",[41,214,59],{"class":58},[41,216,149],{"class":62},[41,218,219],{"class":54},"([",[41,221,222],{"class":134},"1",[41,224,113],{"class":58},[41,226,227],{"class":134}," 2",[41,229,113],{"class":58},[41,231,232],{"class":134}," 3",[41,234,113],{"class":58},[41,236,237],{"class":134}," 4",[41,239,113],{"class":58},[41,241,242],{"class":134}," 5",[41,244,245],{"class":54},"])\n",[41,247,249,251,253,255,257,259,261,263,265,268,270,273,275,277,280,282,284],{"class":43,"line":248},10,[41,250,212],{"class":54},[41,252,59],{"class":58},[41,254,63],{"class":62},[41,256,66],{"class":58},[41,258,69],{"class":58},[41,260,73],{"class":72},[41,262,76],{"class":58},[41,264,80],{"class":79},[41,266,267],{"class":54}," console",[41,269,59],{"class":58},[41,271,272],{"class":62},"log",[41,274,105],{"class":54},[41,276,198],{"class":58},[41,278,279],{"class":201},"Sum:",[41,281,198],{"class":58},[41,283,113],{"class":58},[41,285,286],{"class":54}," data)\n",[11,288,290],{"id":289},"when-youll-hear-this","When You'll Hear This",[16,292,293],{},"Move the image processing to a Web Worker — it's killing the main thread.,SQLite WASM runs inside a Web Worker in modern browser apps.,Web Workers can't touch the DOM — only communicate via messages.",[295,296,297],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":299},[300,301,302,303],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":289,"depth":51,"text":290},"frontend","JavaScript normally runs on one thread, which means heavy computation freezes your UI.","advanced","md","w",{},"\u002Fterms\u002Fw\u002Fweb-worker",[312,313,314],"Service Worker","Event Loop","INP",{"title":5,"description":305},{"changefreq":317,"priority":318},"weekly",0.7,"terms\u002Fw\u002Fweb-worker","DuWjTW9LtCVWjyHFvSCHFoV9g7xbrDZjpzV3XqvV5jM",[322,325,329],{"title":313,"path":323,"acronym":6,"category":304,"difficulty":306,"description":324},"\u002Fterms\u002Fe\u002Fevent-loop","JavaScript can only do one thing at a time (single-threaded), but the Event Loop is the trick that makes it seem like it can multitask.",{"title":314,"path":326,"acronym":314,"category":304,"difficulty":327,"description":328},"\u002Fterms\u002Fi\u002Finp","intermediate","INP measures how snappy your website feels every time you interact with it — not just the first click, but every button press, dropdown open, and form subm...",{"title":312,"path":330,"acronym":6,"category":304,"difficulty":306,"description":331},"\u002Fterms\u002Fs\u002Fservice-worker","A Service Worker is a JavaScript script that runs in the background, separate from your web page.",1776518257789]