https://amatsuzero.github.io/LastStand/tags/service-worker/Recent content in Service Worker on Last StandHugozh-cnFri, 08 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/javascript/service-worker/Fri, 08 Nov 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/javascript/service-worker/<h2 id="引言">引言</h2> <p>我们经常可以听到 <strong>Worker</strong> 这个名词，比如本文要介绍的 <strong>ServiceWorker</strong> 后面就带着一个 <strong>Worker</strong> 的单词，那么 <strong>Worker</strong> 实际上指的是什么呢？</p> <p>在介绍 <strong>Worker</strong> 的定义之前，先来回忆一下浏览器的渲染原理。</p> <p>在一个 tab 打开的时候，浏览器会给这个 tab 创建一个新的渲染进程（renderer process），如下图：</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/javascript/service-worker/image-01.webp"></p> <blockquote> <p>图1：Chrome 浏览器的多进程架构</p> <p>图片来源：<a href="https://developer.chrome.com/blog/inside-browser-part1/">developer.chrome.com/blog/inside…</a></p> </blockquote> <p>在每一个渲染进程中，都会有一个主线程（Main Thread），负责 JavaScript 的执行以及浏览器的渲染（JavaScript 的执行与 UI 渲染是一个互相阻塞的流程）。</p> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/javascript/service-worker/image-02.webp"></p> <blockquote> <p>图2：浏览器一帧的剖析</p> <p>图片来源：<a href="https://aerotwist.com/blog/the-anatomy-of-a-frame/">aerotwist.com/blog/the-an…</a></p> </blockquote> <p>如果 JavaScript 执行时间过久（比如超过 33.33 ms），那么一帧内留给 UI 渲染的时间不多，如果这时候网页有正在执行的动画，那么用户就会感受到卡顿。</p> <blockquote> <p>10 FPS：能够达成基本的视觉残留（参考：定格动画至少需要 12 帧每秒以上）</p> <p>30 FPS以下：让人感觉到明显的卡顿和不适感</p> <p>30-50 FPS：因人而异</p> <p>50-60 FPS：流畅</p> </blockquote> <p>一个 Worker，指的是一个可以在后台独立执行 JavaScript 脚本。它存在于一个单独的 worker 线程，即使执行一些长任务也不会阻塞主线程响应用户操作（如鼠标点击、动画等）。</p> <blockquote> <p>另外 Worker 也指使用 <code>new Worker()</code> 构造函数创建的一个对象，可以用在主线程与 worker 线程的通信</p> </blockquote> <p><img loading="lazy" src="https://amatsuzero.github.io/LastStand/posts/frontend/javascript/service-worker/image-03.webp"></p> <blockquote> <p>图3：worker 线程独立于主线程之外</p> <p>图片来源：<a href="https://developer.chrome.com/blog/inside-browser-part3/">developer.chrome.com/blog/inside…</a></p> </blockquote> <p>Worker 与 主线程之间可以通过 <code>postMessage</code> 进行通信：</p>