解密Angular WebWorker Renderer (一)

先来做个对比

开发框架版本：Angular 4.x

项目地址：Charway/angular-webworker-renderer-demo

运行结果：传统的UI线程渲染效果（上图），使用WebWorker线程渲染（下图）



从动图中很明显可以看出，使用了WebWorker Renderer渲染的页面运行流畅，没有卡顿。

简单介绍下Web WokerWeb Workers是一种机制，通过它可以使一个脚本操作在与Web应用程序的主执行线程分离的后台线程中运行。这样做的优点是可以在单独的线程中执行繁琐的处理，让主（通常是UI）线程运行而不被阻塞/减慢。 ——  Web Workers API from MDN

简单来说，在出现WebWoker之前，Web开发人员无法手动在浏览器中创建线程，而出现WebWoker之后，Web开发人员可以进入多线程开发Web项目了。

Web Worker的优势

下面根据AngularConf的YouTube视频（见参考）中的内容总结了下使用WebWorker的优势：

  • 运行过程中不会阻碍主线程（UI渲染线程）的运行，特别适合执行计算密集型的程序
  • WebWorker线程可跨窗口或frames（使用SharedWorker）
  • 使用WebWorker后能更优雅地执行测试过程（一些脱离可DOM操作的测试）
  • 兼容性（IE 10+）
  • 更高效地利用电量

对于最后一点的解释，应该先转化为另外一个问题，一些计算密集型的程序为什么不在服务端执行完毕后返回给前端？这在视频中也给出了解释，作者总结了一句话：It costs more to transmit a byte than to compute it，意思是传输一个byte比计算出一个byte的消耗更大。为什么呢？自己想吧

Web Worker可能的使用场景

那么真的有这么多应用场景吗？以下列举了几个场景：

  • 解析一个庞大的JSON结构
  • 图片／音频处理
  • 大规模数据可视化

仔细想一想，这样的场景还是很特殊的，可能在实际的应用中并不多见。那么，在目前的主流前端框架是否有利用到WebWorker的特性来帮助其提升性能呢？经过调研，调研的部分都还在探索阶段，比如在React框架中的探索，P