从9个不同的方面深入分析HTML5的性能（第4页）

 

　　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秒之内，实际他之前的事情还没有做完，然后这个事情就会被延后。它就是为了动画看上去 更流畅而优化的，因为每一桢的时候，它就告诉你说，你可以做一些事情。