对于大多数的前端开发者，都不会特意关注自己开发的web程序是否存在性能问题，但是在一些特殊的场景，比如游戏，就不得不涉及性能优化的问题了。
JavaScript发展至今，已经可以能胜任多种开发任务，开发的程序能在多种平台和环境运行，但是一直摆脱不了一点的是：密集型计算并不是JavaScript擅长的领域。下面简单介绍提升web程序性能的技术。
Web Worker
提到web开发，大多数人想到两个关键次：异步、单线程。但其实单线程并不是web程序唯一的运行方式，HTML5引入了一个新机制Web Worker,将多线程带到了web开发。
多线程程序中，通常会因为线程共享作用域和资源产生进程之间的诸多问题，这就需要线程间通信和锁机制，这会产生额外的开销，而在浏览器中，子线程不能和主程序共享作用域，所以不会将这些问题带到JavaScript中。
示例
下面的代码是主线程的代码，即你的index.html的script标签中的代码，该html文件不能用文件读取的形式直接打开，必须开启一个web服务器打开。
子线程和主线程通过简单的消息机制进行通讯。
// 实例化一个Worker
// 参数是一个url地址，应该指向的是一个js文件而不是html
var worker = new Worker('./task.js')
// 监听子线程的消息
worker.addEventListener('message', function (e) {
console.log('message from child: ' + e.data)
})
// 向指定子线程发送消息
worker.postMessage('do some thing')
下面是一个子线程的示例代码
console.log('worker ready')
// 监听来自主线程的消息
addEventListener('message', function (e) {
console.log('message from parent: ' + e.data)
})
// 向主线程发送消息
postMessage('child ready')
子线程的资源
在Worker内部是无法访问主线程的任何资源的，不能访问全局变量，不能访问DOM和BOM相关的资源，他是一个完全独立的线程。在chrome中，子线程也不能再开启一个子线程。
// 以下代码都会报错
alert('aaa')
document.querySelector('div')
var subWorker = new Worker('./task2.js')
Worker可以执行网络操作（ajax WebSocket）和定时器，也可以访问几个重要的全局对象的复本，包括navigator、location、JSON和applicationCache。也可以通过importScript(..)向Worker加载额外JavaScript代码，这种加载方式是同步阻塞的，Worker会执行完加载的代码再继续往下执行剩余的代码。
Worker中重要全局对象的副本
// 以下代码会报错，因为Worker中的location不包含assign方法
location.assign('https://www.baidu.com')
Worker中加载额外代码
importScripts('./task2.js')Web Worker的适用场景
处理密集型数学计算 可以将UI渲染和密集型数学计算分为两个线程处理，提升程序性能和用户体验。
大数据集排序
数据处理（压缩、音频分析、图像处理等）
高流量网络通信
共享Worker
之前的专用Worker在同一个浏览器的不同tab中同时引用同一个js文件创建的Worker，他们之间是没有任何关系的多份Worker复制，也不能进行通信，而ShareWorker最重要的功能是，同个浏览器环境下同一站点的多个页面实例共享同一个Worker，他们之间共享资源，可以互相通信。
浏览器对于同一主机的同时连接数是有限制的，尤其是你的app需要创建长连接socket时，同时打开多个页面就会打开多个socket连接，将这个连接放在中心Worker中可以有效解决这个问题。
SharedWorker共享资源的例子,SharedWorker有很多表现和专用Worker不同
- 通过port建立消息连接，从而得知消息来自哪个程序。
- port在主线程和子线程中都需要初始化。
- 需要在Worker中监听一次connet事件并在回调中初始化端口。
- console.log(..)失效。
// index.html
var worker = new SharedWorker('./task.js')
worker.port.addEventListener('message', function (e) {
console.log('message from child: ' + e.data)
})
worker.port.postMessage('index1')
worker.port.start()// task.js
var a = 1
addEventListener('connect', function (e) {
// 不会打印
console.log(e.ports)
var port = e.ports[0]
port.addEventListener('message', function () {
port.postMessage(++a)
})
port.start()
})上面的代码在打开多个index.html时，页面实例接受到的消息是一个递增的数值，说明了多个页面实例公用了一个Worker并且共享了资源。
如果有某个端口连接终止而其他端口仍然活跃时，共享worker不会终止。而专用Worker在它的主程序终止后就会终止。
下期预告
其他的程序性能优化技术asm.js和Webassembly入门知识将再下期介绍。
作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。 一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多