以帕莱托法则(即80-20法则)来看,20%的代码将占用80%的CPU周期,程序员应集中于优化这20%、10%或5%,而忽略其他部分,这样BUG会更少。
仔细检查调用的非常频繁的Javascript代码,DOM搜索和操作比较慢,应该尽量避免。
高开销的计算可以预先进行,并将值存在一个查找表(lookup table)中,使用时给出简单的整形下标就可以取出查找表中的值。只要查找表的访问代价比从头计算的代价低。比如三角函数。
整数更快,CPU更容易处理。
按位与操作,可以用来检查一个对象是否有一组属性或标记。需要设计二进制标记。
位异或,可用于切换变量,比如 toggle ^= 1; //toggle值将在1和0之间转换(假设原来值是1或0)
算数位右移 x = y >> 0; //等同于一个快速的Math.floor()函数
移除循环开销可提升一些性能,前提是循环迭代次数非常多,循环体开销非常小。加入要展开循环的话,可以用达夫设备经典算法的变种,部分展开循环。
理想情况下,一旦元素被找到,不应该再重新搜索它们。
将所有要插入的元素构建为一个大的字符串,然后一次插入,效率更高。
重复的增删和销毁DOM元素会对性能有不利的影响。
通过局部变量访问参数比通过访问传入的params对象的属性要快
animIndex += xDir > 0 ? 1 : -1; animIndex %= 5; animIndex += animIndex < 0 ? 5 : 0; 据xDir决定增减,取余操作将其维持在-4到+4之间,如果animIndex是负的,纠正到对应的正索引。
; 最前面单独的分号可以避免前面的代码遗漏的分号可能导致的问题。
setInterval不能保证回调函数以指定的间隔执行。Windows XP底层操作系统定时器提供15毫秒精度。Google Chrome可将Windows切换到一个准确的定时器模式并提供1毫秒的精度。
+new Date()等价于new Date().getTime();
可以通过消除对不可能碰撞对象的多余检查,来进一步减少测试的次数。
碰撞检测中对对象分区的做法被称为宽阶段(broad-phase)碰撞检测。
仅仅使用浏览器交互或CSS来放大canvas,其效果和放大位图图像一样,会有块状模糊效应。
canvas默认大小为300*150像素。
drawImage()时遇到性能问题,如果图像源是另一个canvas会好一些。不过似乎只对软件加速的有用。
使用drawImage()时,在分数像素位置,Firefox和Opera可能会有严重的性能损失和其他奇怪的故障,所以尽量四舍五入为整数形式。
绘制alpha值小于1的元素性能会稍低,因为必须额外计算要显示的每个像素的最终颜色。无论是否使用硬件加速都是如此。所以如果不是必须,最好不要使用alpha。
保证单向的碰撞检测,只有物体1对物体2检测,没有物体2对物体1检测,这样可以使所需的测试次数减少一半。
URL限定大小为2KB(GET方式)。