html canvas 优化,提高HTML5 canvas性能的几种方法（转）

简介

HTML5 canvas 最初起源于苹果(Apple)的一项实验，现在已经成为了web中受到广泛支持的2D快速模式绘图(2Dimmediate mode graphic)的标准。许多开发者现在利用它来实现众多的多媒体项目、可视化醒目以及游戏等等。然而，随着我们构建的应用程序的复杂度的增加，我们难免会遇到所谓的性能问题。

已经存在众多优化canvas性能的方法了，但是还没有一篇文章将这些方法系统的整理并加以分析。本文的目的就在于将这些方法整理、巩固以使其曾为 开发者们更容易理解、消化、吸收的资源。本文囊括了适用于所有计算机绘图环境(computer graphics environments)的最基本的优化方法，以及特定于canvas的优化方法。其中特定于canvas的优化方法可能会随着canvas实现方式的 更新而发生变化。特别的，当浏览器开发商实现了canvas GPU 加速时，我们探讨的某些优化方法可能会显得并不是特别有效，这些情况我们会在特定的地方标注出来。

请注意，本文侧重点不在于讨论HTML5 canvas的用法。如果想了解canvas的具体用法可以参见HTML5 Rocks网站中canvas相关的文章。比如Dive into HTML5 chapter 以及MDN tutorial。

性能测试

为了处理飞速变化着的HTML5 canvas，JSPerf(jsperf.com) 测试证明了我们在文中提到的每一个方法目前都还生效。JSPerf是一个十分有用的web应用程序，web开发者们可以利用此程序编写 JavaScript 性能测试用例。每一个测试用例只关注你企图达到的某一方面的结果(比如说清楚画布)，每一个这样的测试用例包含有若干个能够达到同一结果的不同方法。 JSPerf在一小段时间内尽可能多的运行每一个方法，并没给出一个统计学上有显著意义的每秒中迭代次数。高分意味着更高的性能。

浏览者可以