6.Web Worker

接下来Web Worker。 Web Worker是一个多线程的JS进程。应用场景其实我们在线上的话，是没有的，我就不讲了。但是可以讲下具体我看到过的应用场景。

首先介绍一下WEBWORK是什么东西？它是一个OS级别的线程。之前我们模仿多线程，实际上都是多开一个窗口。但是现在的话，浏览器本身就提供了，这个会让操作带来更多便利，是让我们整个文档比较重，并不是很建议的方式。

然后WebWorker访问能力是有限的，它并不能访问到很多全局对象。比如说documnet对象它是访问不了的。 WebWorker最适合的场景就是CPU密集型的计算操作。之前我们做游戏的时候，我们用BOX2D。应该很多人听到过，它涉及到大量的计算，就是整个 页面里面，下面所有的物体要去计算它们的碰撞关系，这个计算量是非常大的。但是如果放在当前的JS的进程里面去执行，这个计算量一大，一计算，整个页面就 非常卡。但是如果用WebWorker去做，它是异步的过程，实时的发送过去，在计算的过程中还能干其他事，这就是多线程。

7.设备API

讲一下设备API。设备API我觉得最重要在性能方面，也是目前实现最早的API。一个是CONNECTION，就是网络带宽。这个有什么作用？在 中国这个场景下，必须得记住，很多用户的网速依旧是很低的。我们希望让用户网速低的时候，能够自动降级到一个比较低的方案。如果用现有的技术，我们是做不 到的。但是使用设备API我们是可以的。因为我们知道，从设备上可以取到这些信息。它的宽带是多少，多少宽带的时候我们能干的事情。比方说宽带好的时候， 我就用高清图片。宽带比较低的时候，就用清晰度比较低的图片。

8.电池

下面一个是关于电池的。我觉得从性能角度来说，主要是电量方面。假如说用户电池电量比较低的时候，我觉得是应该尽量少做一些事情。本身手机现在电池的技术来没有突破，我觉得让APP看起来比较高性能，也是一个宣传亮点。

9.CANVAS

接下来是CANVAS。讲CANVAS的几个性能优化点，用了这些东西，性能会有10倍的提升。

第一，每个CANVAS就是一个画布，我们要去渲染一个图形的时候， 我们是可以把它分层的。就是像PS里面一样，是一层两层三层。很多用户在做游戏的时候，直接把所有东西仿放到一个层里，一更新所有的东西都要更新。但如果 你把它分层，你让背景放在背景层，角色放到角色层。这样的话，我要更新角色的时候，只会更新角色，背景层不需要变。让CPU干的事情更少了，性能自然而然 就提升了。

第二，context.drawImage。不要去缩放图片，我们一开始就犯了一个错误，我们的美工做的图片始终跟我们不一致，然后我们要去缩放图 片。因为本身设备它的图片大小是这样的，我们必须按比率缩放图片。缩放图片以后发现在低端设备下，比方说iPad或者iPhone就会非常卡，我们就想为 什么？就进行代码上的分析，当用这个方法时候，花费的时候特别多。

第三，requestAnimationFrame。这是专门为渲染优化的一个方法。它本身的原理是这样的，当浏览器每过一桢的时候，会触发这个方 法，当我在触发的时候，Canvas得到这个浏览器已经准备好做下桢的事情。如果用传统的方法，是不会去考虑你更多的东西，它只会知道我过了多少时间，我 就要执行。假如说用户之前被阻塞了，每10秒钟执行这一方法，在10秒之内，实际他之前的事情还没有做完，然后这个事情就会被延后。它就是为了动画看上去 更流畅而优化的，因为每一桢的时候，它就告诉你说，你可以做一些事情。