你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见cup风扇转吗？你正在写一个javascript canvas库吗？那么下面九点就是你必须知道的！
一.预渲染 错误代码：
var canvas = document.getelementbyid(mycanvas); var context = this.canvas.getcontext('2d'); var drawasync = eval(jscex.compile(async, function () { while (true) { drawmario(context); $await(jscex.async.sleep(1000)); } })) drawasync().start();
正确代码：
var canvas = document.getelementbyid(mycanvas); var context = this.canvas.getcontext('2d'); var m_canvas = document.createelement('canvas');m_canvas.width = 64; m_canvas.height = 64; var m_context = m_canvas.getcontext('2d'); drawmario(m_context); var drawasync = eval(jscex.compile(async, function () { while (true) { context.drawimage(m_canvas, 0, 0); $await(jscex.async.sleep(1000)); } })) drawasync().start();
这里m_canvas的宽度和高度控制得越小越好。
二.尽量少调用canvasapi错误代码：
for (var i = 0; i 1; i++) { var p1 = points[i]; var p2 = points[i + 1]; context.beginpath(); context.moveto(p1.x, p1.y); context.lineto(p2.x, p2.y); context.stroke(); }
正确代码：
context.beginpath(); for (var i = 0; i 1; i++) { var p1 = points[i]; var p2 = points[i + 1]; context.moveto(p1.x, p1.y); context.lineto(p2.x, p2.y); } context.stroke();
三.尽量少改变canvas状态错误代码：
for (var i = 0; i 2 ? color1 : color2); context.fillrect(i * gap, 0, gap, 480); }
正确代码：
context.fillstyle = color1; for (var i = 0; i 2; i++) { context.fillrect((i * 2) * gap, 0, gap, 480); } context.fillstyle = color2; for (var i = 0; i 2; i++) { context.fillrect((i * 2 + 1) * gap, 0, gap, 480); }
四.重新渲染的范围尽量小错误代码：
context.fillrect(0, 0, canvas.width, canvas.height);
正确代码：
context.fillrect(20, 20, 100, 100);
五.复杂场景使用多层画布 canvas width=600 height=400 style=position: absolute; z-index: 0>canvas>canvas width=600 height=400 style=position: absolute; z-index: 1>canvas>
六.不要使用阴影 context.shadowoffsetx = 5; context.shadowoffsety = 5; context.shadowblur = 4; context.shadowcolor = 'rgba(255, 0, 0, 0.5)'; context.fillrect(20, 20, 150, 100);
七.清除画布详细性能差别：
http://simonsarris.com/blog/346-how-you-clear-your-canvas-matters
一般情况下：clearrect的性能优于fillrect优于canvas.width = canvas.width;
八.像素级别操作尽量用整数几种取整数的方法：
rounded = (0.5 + somenum) | 0;rounded = ~ ~(0.5 + somenum);rounded = (0.5 + somenum) 0;
九.使用requestanimationframe制作游戏或动画
(function () {
var lasttime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x window.requestanimationframe = window[vendors[x] + 'requestanimationframe'];
window.cancelanimationframe =
window[vendors[x] + 'cancelanimationframe'] || window[vendors[x] + 'cancelrequestanimationframe'];
}
if (!window.requestanimationframe)
window.requestanimationframe = function (callback, element) {
var currtime = new date().gettime();
var timetocall = math.max(0, 16 - (currtime - lasttime));
var id = window.settimeout(function () { callback(currtime + timetocall); },
timetocall);
lasttime = currtime + timetocall;
return id;
};
if (!window.cancelanimationframe)
window.cancelanimationframe = function (id) {
cleartimeout(id);
};
} ());
十.其他与渲染无关的计算交给worker
复杂的计算交给引擎（自己写，或者用开源的），比如3d、物理
缓存load好的图片，canvas上画canvas,而不是画image
同步本文已同步更新至：
html5实验室【目录】: http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html