【前端词典】实现 Canvas 下雪背景引发的性能思考
前言
代码已上传至 github 【https://github.com/wanqihua/koa-canvas】
入题
需求给出的 UI 样式如下：
UI 的需求是雪花下落的方向有点倾斜角度，每片雪花的下落速度不一样但要保持在一个范围内。
需求了解的差不多就开始实现这个效果（在看这篇文章之前你需要对 canvas 的一些基本 API 了解）。
drawImage
drawImage 可传入 9 个参数，上图中的 5 个参数是比较常用的，另外几个参数是拿来剪切图片的。
直接使用
drawImage来剪切图片，其性能不会太好，建议先将需要使用的部分用一个离屏canvas保存起来，需要用到的时候直接使用即可。
requestAnimationFrame
requestAnimationFrame 相对于 setinterval 处理动画有以下几个优势：
- 经过浏览器优化，动画更流畅
- 窗口没激活时，动画将停止，省计算资源
- 更省电，尤其是对移动终端
这个 API 不需要传入动画间隔时间，这个方法会告诉浏览器以最佳的方式进行动画重绘。
由于兼容性问题，可以使用以下方法对 requestAnimationFrame 进行重写：
window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })();对于其他 API 烦请查阅文档。
第一次尝试
有一个大概想法后就开心的开始写代码了，基本思路就是使用 requestAnimationFrame 来刷新 canvas 画板。
由于雪花不规则，所以雪花是 UI 提供的图片，既然是图片我们就需要先将图片预加载好，要不然在转换图片的时候很可能影响性能。
使用的预加载方法如下：
function preloadImg(srcArr){ if(srcArr instanceof Array){ for(let i = 0; i < srcArr.length; i++){ let oImg = new Image(); oImg.src = srcArr[i]; } }}前前后后写了一个下午，算是写好了，在手机上查看的效果发现很是卡顿。100 片雪花 FPS 竟然才 40 多。而且在某些机型会出现抖动的情况。
要是产品看到这个效果，恐怕是又要召集相关人员开相关会议了。这么卡顿肯定是写了些开销大的代码，于是乎需要第二次尝试。
晚上还是需要按时下班的。不过下班回家后也不能闲着，开始找相关的资料，以便第二天快速的完成。
第二次尝试前的准备
经过一个晚上的查找学习，大概知道了以下几个优化 canvas 性能的方法：
1. 使用多层画布绘制复杂场景
分层的目的是降低完全不必要的渲染性能开销。
即：将变化频率高、幅度大的部分和变化频率小、幅度小的部分分成两个或两个以上的
canvas对象。也就是说生成多个canvas实例，把它们重叠放置，每个Canvas使用不同的z-index来定义堆叠的次序。
<canvas style="position: absolute; z-index: 0"></canvas><canvas style="position: absolute; z-index: 1"></canvas>// js 代码2. 使用 requestAnimationFrame 制作动画
上面有提到。
3. 清除画布尽量使用 clearRect
一般情况下的性能： clearRect > fillRect > canvas.width=canvas.width;
4. 使用离屏绘制进行预渲染
当时用 drawImage 绘制同样的一块区域：
- 若数据源（图片、canvas）和
canvas画板的尺寸相仿，那么性能会比较好； - 若数据源只是大图上的一部分，那么性能就会比较差；因为每一次绘制还包含了裁剪工作。
第二种情况我们就可以先把待绘制的区域裁剪好，保存在一个离屏的
canvas对象中。在绘制每一帧的时候，在将这个对象绘制到canvas画板中。
drawImage 方法的第一个参数不仅可以接收 Image 对象，也可以接收另一个 Canvas 对象。而且，使用 Canvas 对象绘制的开销与使用 Image 对象的开销几乎完全一致。
当每一帧需要调用的对象需要多次调用 canvasAPI 时，我们也可以使用离屏绘制进行预渲染的方式来提高性能。
即：
let cacheCanvas = document.createElement("canvas");let cacheCtx = this.cacheCanvas.getContext("2d");
cacheCtx.save();cacheCtx.lineWidth = 1;for(let i = 1;i < 40; i++){ cacheCtx.beginPath(); cacheCtx.strokeStyle = this.color[i]; cacheCtx.arc(this.r , this.r , i , 0 , 2*Math.PI); cacheCtx.stroke();}this.cacheCtx.restore();
// 在绘制每一帧的时候，绘制这个图形context.drawImage(cacheCtx, x, y);
cacheCtx的宽高尽量设置成实际使用的宽高，否则过多空白区域也会造成性能的损耗。
下图显示了使用离屏绘制进行预渲染技术所带来的性能改善情况：
5. 尽量少调用 canvasAPI ，尽可能集中绘制
如下代码：
for (var i = 0; i < points.length - 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 < points.length - 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();tips: 写粒子效果时，可以使用方形替代圆形，因为粒子小，所以方和圆看上去差不多。有人问为什么？很容易理解，画一个圆需要三个步骤：先
beginPath，然后用arc画弧，再用fill。而画方只需要一个fillRect。当粒子对象达一定数量时性能差距就会显示出来了。
6. 像素级别操作尽量避免浮点运算
进行
canvas动画绘制时，若坐标是浮点数，可能会出现CSSSub-pixel的问题.也就是会自动将浮点数值四舍五入转为整数，在动画的过程中就可能出现抖动的情况，同时也可能让元素的边缘出现抗锯齿失真情况。
虽然 javascript 提供了一些取整方法，像 Math.floor， Math.ceil， parseInt，但 parseInt这个方法做了一些额外的工作（比如检测数据是不是有效的数值、先将参数转换成了字符串等），所以，直接用 parseInt 的话相对来说比较消耗性能。
可以直接用以下巧妙的方法进行取整：
function getInt(num){ var rounded; rounded = (0.5 + num) | 0; return rounded;}另 for 循环的效率是最高的，感兴趣的可以自行实验。
第二次尝试
通过昨天晚上的查阅，对这个动画做了以下几点优化:
- 使用离屏绘制进行预渲染
- 减少部分 API 的使用
- 浮点数取整
- 缓存变量
- 使用 for 循环，替代 forEach
- 将整体代码使用原型链方式改写了一遍
方案写好了就开始愉快的写代码了。
200 片雪花的时候 FPS 基本稳定在 60，而且抖动的情况也没了；
增加到 1000 片的时候， FPS 还是基本稳定在 60；
增加到 1500 片的时候，稍微有点零星的卡帧；
增加到 2000 片的时候，开始卡顿。
这说明这个动画还是没有优化好，还有优化空间，请各位大佬不吝指教。
推荐使用
stats.js插件，这个插件可以显示动画运行时的 FPS。
主要代码
let snowBox = function () { let canvasEl = document.getElementById("snowFall"); let ctx = canvasEl.getContext('2d'); canvasEl.width = window.innerWidth; canvasEl.height = window.innerHeight; let lineList = []; // 雪的容器 let snow = function () { let _this = this; _this.cacheCanvas = document.createElement("canvas"); _this.cacheCtx = _this.cacheCanvas.getContext("2d"); _this.cacheCanvas.width = 10; _this.cacheCanvas.height = 10; _this.speed = [1, 1.5, 2][Math.floor(Math.random()*3)]; // 雪花下落的三种速度，便于取整 _this.posx = Math.round(Math.random() * canvasEl.width); // 雪花x坐标 _this.posy = Math.round(Math.random() * canvasEl.height); // 雪花y坐标 _this.img = `./img/snow_(${Math.ceil(Math.random() * 9)}).png`; // img _this.w = _this.getInt(5 + Math.random() * 6); _this.h = _this.getInt(5 + Math.random() * 6); _this.cacheSnow(); };
snow.prototype = { cacheSnow: function () { let _this = this; // _this.cacheCtx.save(); let img = new Image(); // 创建img元素 img.src = _this.img; _this.cacheCtx.drawImage(img, 0, 0, _this.w, _this.h); // _this.cacheCtx.restore(); }, fall: function () { let _this = this; if (_this.posy > canvasEl.height + 5) { _this.posy = _this.getInt(0 - _this.h); _this.posx = _this.getInt(canvasEl.width * Math.random()); } if (_this.posx > canvasEl.width + 5) { _this.posx = _this.getInt(0 - _this.w); _this.posy = _this.getInt(canvasEl.height * Math.random()); } // 如果雪花在可视区域 if (_this.posy <= canvasEl.height || _this.posx <= canvasEl.width) { _this.posy = _this.posy + _this.speed; _this.posx = _this.posx + _this.speed * .5; } _this.paint(); }, paint: function () { ctx.drawImage(this.cacheCanvas, this.posx, this.posy) }, getInt: function(num){ let rounded; rounded = (0.5 + num) | 0; return rounded; } };
let control; control = { start: function (num) { for (let i = 0; i < num; i++) { let s = new snow(); lineList.push(s); } (function loop() { ctx.clearRect(0, 0, canvasEl.width, canvasEl.height); for (let i = 0; i < num; i++) { lineList[i].fall(); } requestAnimationFrame(loop) })(); } }; return control;}();
window.onload = function(){ snowBox.start(2000)};建议从 github clone 代码到本地运行。
后话
这篇文章虽然说是关于 canvas 动画的性能优化。一些大佬也已经看出，其他方面的性能优化方案和这个大抵相同，无非是：
- 减少 API 的使用
- 使用缓存（重点）
- 合并频繁使用的 API
- 避免使用高耗能的 API
- 用 webWorker 来处理一些比较耗时的计算
- ……
腾讯云开发者
