DAY27 - 来加速你的网站！利用Web Worker创造多执行绪的Javascript

什麽是Web Worker? 它可以做什麽？在了解Web Worker前，可能需要先知道：网页中 Javascript

前情提要 - 网页中 Javascript

Javascript 扮演的角色

Javascript 语言的特性

因为Javascript是一个单执行绪（single thread）的程序语言。
学术一点的说法：是只有一个主执行绪的程序；
简单的来说：一次只能执行一个指令；
生活一点来说：
你专心写程序不做其他事 --> 单执行绪
你边写程序边听音乐还边唱歌 --> 多执行绪

Javascript 面临的问题

由於「单执行绪」的程序语言特质，加上「前端(逻辑处理+画面渲染)处理量日渐提升」，让Javascript在效能面有时会面临困境。而Web Worker就是解决这样的困境的方法之一。

Web Worker 介绍

什麽是Web Worker?

Web Worker 是 HTML5 中提出的概念。

Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application.

Web Worker替 JavaScript 创造多执行绪环境，允许主执行绪建立 Worker 执行绪，将一些任务分配给後者执行。

用一个简单的例子来说明一下有没有Web Worker之间的差异，比方我今天要制作珍珠奶茶和巧克力松饼：

在只有单执行绪的Javascript里，我就需要先准备好我的data(麦香奶茶)，然後开始将资料做一些处理dowork(data)，像是加入珍珠和冰块并把奶茶倒入，这类复杂的运算；做完之後再把处理过後的data拿出来使用useData(ProcessData)，把一整桶座好的珍珠奶茶装成一杯；再继续做下一个任务制作巧克力松饼。一件事情做完，再往下一件事做，就是原本Javascript的执行方式。

而加入Web Worker之後：

多了一个Worker执行绪，可以帮忙分担工作，因此会让Worker执行绪分担一点复杂的工作（会花一点时间），而主执行绪可以继续执行其他事情。同时进行就可以加快执行速度。如上图所示，准备好麦香奶茶後(data)，我们把复杂的加冰块、到奶茶、加珍珠的制作过程销给Worker执行绪处理，而Worker执行绪再把处理後的资料（珍珠奶茶）传回给主执行绪使用。在Worker执行绪制作珍珠奶茶的过程中，主执行绪可以进到下一个任务做巧克力松饼。因此整体完成的时间就可以比较快速！

简而言之，Web Worker 就是多一个人帮忙分担你要做的事，但这个人什麽都可以做吗？有这麽好的事？？？

使用范围与限制

当然没这个好康啦，请人帮忙还是要有点限制的，这边我们就来看一下Web Worker的使用范围和限制

1. 可运行基本的javascript、XMLHttpRequest (XHR)
2. 几乎无法对画面做操作
   • 无法访问window、document、DOM节点 且 脚本限制不可修改
   • 不可呼叫 alert、confirm

知道了Web Worker的使用范围，那我们到底可以请他帮什麽忙？

使用情境

再开始说明情境前，我们在复习一下，Web Worker的特型：

1. 多执行绪
2. 与主执行绪独立，不影响主执行绪运行

因此，我们大概可以归纳出两种情境

情境1 – 太多分出去：

多任务串型转成并行:顺序的任务，转为并行，任务之间必须没有依赖关系，
但是要注意多任务调度的调配需要考虑

情境2 – 难的分出去：

大量运算任务避免在主执行绪中执行，复杂运算移到 Web Worker

程序范例

step1 程序档案结构

• HTML x 1
  画面呈现 – index.html
• Javascript x2
  主执行绪程序 – customize.js
  Worker执行绪程序 – worker.js
• 其他css…

step2 程序撰写 - 主执行绪程序

customize.js (主执行绪程序)
2-1. 检查是否支援web worker，若有的话便建立一个worker执行绪

2-2. 透过PostMessage传送资料给worker执行绪,onmessage 接收worker执行绪处理好的资料

step3 程序撰写 – worker 执行绪程序

透过onmessage 收主执行绪传来的资料，PostMessage传送处理好的资料

再将HTML加上所需的画面，就可以达到引用Web Worker的效果
程序sample 下载 https://ppt.cc/fhmopx

产生的议题

议题1. 评估是否真的适合使用

使用Web Worker真的都变快吗？简单的运算和少量的运算如果加上两执行序的沟通成本，那不如就是主执行绪自己制作就可以了。

议题2. PostMessage发送&接收 是否会造成卡顿？

由於主执行绪与Worker执行绪之间的沟通需要靠PostMessage(如下图所示)

若PostMessage的发送接收时间较长，依然会造成卡顿，那怎样的情况会造成发送接收时间较长？其实有数据显示

当传输量特别大的时候，PostMessage 可能会造成卡顿的情况，不同平台，造成卡顿的传输量上限也不同

建议1.

• 当javascript中还包含动画渲染，资料传输量保持在10K以下
• 当javascript中不包含动画渲染，资料传输量保持在100K以下

建议2.分段传输

建议3.传递 action 而不是 data 本身

议题3. 是否造成新的逻辑问题

议题4. 多执行绪下的错误处理

当任务分配给两边一定会多了一些会出错的可能性，要注意的可能包含像：失败处理、超时处理或冲突处理等等

实务上的环境支援程度

其实Web Worker还可以再仔细区分为两种：「专用执行绪」和「共享执行绪」

• 专用执行绪（Dedicated Web Worker）
  通常大家讲的Web Worker是指这种类型
  仅能被建立它的指令码所使用
  （一个专用执行绪对应一个主执行绪）
• 共享执行绪（Shared Web Worker）
  能够在不同的指令码中使用
  （一个共享执行绪对应多个主执行绪）

专用执行绪（Dedicated Web Worker）浏览器支援度

目前约有 97.06% 的浏览器支援专用执行绪

共享执行绪 (Shared Web Worker)浏览器支援度

共享执行绪，则仅有大约 38.09% 的浏览器支援

好了，这就是简单的Web Worker入门分享啦～～～