Web程序性能优化——Web Worker

程序性能（一）

对于大多数的前端开发者，都不会特地关注本身开发的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前端开发工程师，表明做品：口红挑战网红小游戏、芦苇科技官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专一于前端框架、服务端渲染、SEO技术、交互设计、图像绘制、数据分析等研究。

欢迎和咱们一块儿并肩做战： web@talkmoney.cn 访问 www.talkmoney.cn 了解更多