说明
【跟月影学可视化】学习笔记。
方法一：优化 Canvas 指令
例子：实现一些位置随机的多边形，并且不断刷新这些图形的形状和位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>优化 Canvas 指令</title> <style> canvas { border: 1px dashed #fa8072; } </style> </head> <body> <canvas width="500" height="500"></canvas> <script> const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 创建正多边形，返回顶点 function regularShape(x, y, r, edges = 3) { const points = []; const delta = (2 * Math.PI) / edges; for (let i = 0; i < edges; i++) { const theta = i * delta; points.push([ x + r * Math.sin(theta), y + r * Math.cos(theta), ]); } return points; } // 根据顶点绘制图形 function drawShape(context, points) { context.fillStyle = "red"; context.strokeStyle = "black"; context.lineWidth = 2; context.beginPath(); context.moveTo(...points[0]); for (let i = 1; i < points.length; i++) { context.lineTo(...points[i]); } context.closePath(); context.stroke(); context.fill(); } // 多边形类型，包括正三角形、正四边形、正五边形、正六边形和正100边形、正500边形 const shapeTypes = [3, 4, 5, 6, 100, 500]; const COUNT = 1000; // 执行绘制 function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < COUNT; i++) { const type = shapeTypes[ Math.floor(Math.random() * shapeTypes.length) ]; const points = regularShape( Math.random() * canvas.width, Math.random() * canvas.height, 10, type ); drawShape(ctx, points); } requestAnimationFrame(draw); } draw(); </script> </body> </html>
我们f12查看帧率，效果如下：Google Chrome浏览器怎么开启查看帧率功能？
对于一个 500 边形来说，它的顶点数量非常多，所以 Canvas 需要执行的绘图指令也会非常多，那绘制很多个 500 边形自然会造成性能问题。
下面减少绘制 500 边形的绘图指令的数量：用 -1 代替正 500 边形，如果type小于0表名多边形是正500边形，用 arc 指令来画圆
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>优化 Canvas 指令</title> <style> canvas { border: 1px dashed #fa8072; } </style> </head> <body> <canvas width="500" height="500"></canvas> <script> const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 创建正多边形，返回顶点 function regularShape(x, y, r, edges = 3) { const points = []; const delta = (2 * Math.PI) / edges; for (let i = 0; i < edges; i++) { const theta = i * delta; points.push([ x + r * Math.sin(theta), y + r * Math.cos(theta), ]); } return points; } // 根据顶点绘制图形 function drawShape(context, points) { context.fillStyle = "red"; context.strokeStyle = "black"; context.lineWidth = 2; context.beginPath(); context.moveTo(...points[0]); for (let i = 1; i < points.length; i++) { context.lineTo(...points[i]); } context.closePath(); context.stroke(); context.fill(); } // 多边形类型，包括正三角形、正四边形、正五边形、正六边形和正100边形以及正500边形 // 用 -1 代替正 500 边形 const shapeTypes = [3, 4, 5, 6, 100, -1]; const COUNT = 1000; const TAU = Math.PI * 2; // 执行绘制 function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < COUNT; i++) { const type = shapeTypes[ Math.floor(Math.random() * shapeTypes.length) ]; const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; // 如果type小于0表名多边形是正500边形 if(type > 0) { // 画正多边形 const points = regularShape(x, y, 10, type); drawShape(ctx, points); } else { // 画圆 ctx.beginPath(); // 绘制正多边形，否则用 arc 指令来画圆 ctx.arc(x, y, 10, 0, TAU); ctx.stroke(); ctx.fill(); } } requestAnimationFrame(draw); } draw(); </script> </body> </html>
优化完之后的效果：
方法二：使用缓存
具体做法就是将图形缓存下来，保存到离屏的 Canvas（offscreen Canvas）中，然后在绘制的时候作为图像来渲染，那就可以将绘制顶点的绘图指令变成直接通过 drawImage 指令来绘制图像，而且也不需要 fill() 方法来填充图形。
https://developer.mozilla.org/zh-CN/docs/Web/API/OffscreenCanvas
OffscreenCanvas 提供了一个可以脱离屏幕渲染的 canvas 对象。它在窗口环境和web worker环境均有效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>使用缓存</title> <style> canvas { border: 1px dashed #fa8072; } </style> </head> <body> <canvas width="500" height="500"></canvas> <script> const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 创建缓存的函数 function createCache() { const ret = []; for (let i = 0; i < shapeTypes.length; i++) { // 创建离屏Canvas缓存图形 const cacheCanvas = new OffscreenCanvas(20, 20); // 将图形绘制到离屏Canvas对象上 const type = shapeTypes[i]; const context = cacheCanvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "black"; if (type > 0) { const points = regularShape(10, 10, 10, type); drawShape(context, points); } else { context.beginPath(); context.arc(10, 10, 10, 0, TAU); context.stroke(); context.fill(); } ret.push(cacheCanvas); } // 将离屏Canvas数组（缓存对象）返回 return ret; } // 创建正多边形，返回顶点 function regularShape(x, y, r, edges = 3) { const points = []; const delta = (2 * Math.PI) / edges; for (let i = 0; i < edges; i++) { const theta = i * delta; points.push([ x + r * Math.sin(theta), y + r * Math.cos(theta), ]); } return points; } // 根据顶点绘制图形 function drawShape(context, points) { context.fillStyle = "red"; context.strokeStyle = "black"; context.lineWidth = 2; context.beginPath(); context.moveTo(...points[0]); for (let i = 1; i < points.length; i++) { context.lineTo(...points[i]); } context.closePath(); context.stroke(); context.fill(); } // 多边形类型，包括正三角形、正四边形、正五边形、正六边形和正100边形以及正500边形 const shapeTypes = [3, 4, 5, 6, 100, 500]; const COUNT = 1000; const TAU = Math.PI * 2; // 一次性创建缓存，直接通过缓存来绘图 const shapes = createCache(); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < COUNT; i++) { const shape = shapes[Math.floor(Math.random() * shapeTypes.length)]; const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; ctx.drawImage(shape, x, y); } requestAnimationFrame(draw); } draw(); </script> </body> </html>
开启缓存效果：
缓存的局限性：
如果需要创建大量的离屏 Canvas 对象，就会对内存消耗就非常大，有可能反而降低了性能。
缓存适用于图形状态本身不变的图形元素，如果是经常发生状态改变的图形元素，起不到减少绘图指令的作用。
不使用缓存直接绘制的是矢量图，而通过缓存 drawImage 绘制出的则是位图，所以缓存绘制的图形，在清晰度上可能不是很好。
方法三：分层渲染
简单点说就是用两个 Canvas 叠在一起，将不变的元素绘制在一个 Canvas 中，变化的元素绘制在另一个 Canvas 中。
满足两个条件：
- 一是有大量静态的图形元素不需要重新绘制
- 二是动态和静态图形元素绘制顺序是固定的，先绘制完静态元素再绘制动态元素
上面就是两个canvas，一个动的，一个静态的，我们把它们叠在一起
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>分层渲染</title> <style> .box { position: relative; } canvas { border: 1px dashed #fa8072; } #bg { background-color: #000; } #fg { position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="box"> <canvas width="500" height="500" id="bg"></canvas> <canvas width="500" height="500" id="fg"></canvas> </div> <script> // 绘制随机三角形 function drawRandomTriangle(path, context) { const { width, height } = context.canvas; context.save(); context.translate( Math.random() * width, Math.random() * height ); context.fill(path); context.restore(); } // 绘制背景 function drawBackground(context, count = 2000) { context.fillStyle = "#ed7"; const d = "M0,0L0,10L8.66, 5z"; const p = new Path2D(d); for (let i = 0; i < count; i++) { drawRandomTriangle(p, context); } } // 加载图片 function loadImage(src) { const img = new Image(); img.crossOrigin = "anonymous"; return new Promise((resolve) => { img.onload = resolve(img); img.src = src; }); } // 绘制前置背景 async function drawForeground(context) { const img = await loadImage('./assets/img/plane.png'); const { width, height } = context.canvas; function update(t) { context.clearRect(0, 0, width, height); context.save(); context.translate(0, 0.5 * height); const p = (t % 3000) / 3000; const x = width * p; const y = 0.1 * height * Math.sin(3 * Math.PI * p); context.drawImage(img, x, y); context.restore(); requestAnimationFrame(update); } update(0); } const bgcanvas = document.querySelector("#bg"); const fgcanvas = document.querySelector("#fg"); drawBackground(bgcanvas.getContext("2d")); drawForeground(fgcanvas.getContext("2d")); </script> </body> </html>
方法四：局部重绘
如果元素都有可能运动，或者动态元素和静态元素的绘制顺序是交错的，可以使用局部重绘来处理，局部重绘就是不需要清空 Canvas 的全局区域，而是根据运动的元素的范围来清空部分区域。
canvas 提供 clip() ，能确定绘制的的裁剪区域，区域之外的图形不能绘制 CanvasRenderingContext2D.clip()
另外可以使用动态计算要重绘区域的技术，它也被称为脏区检测。它的基本原理是根据动态元素的包围盒，动态算出需要重绘的范围。
包围盒：指能包含多边形所有顶点，并且与坐标轴平行的最小矩形。
有兴趣的可以看看这篇：AntV Canvas 局部渲染总结
方法五：优化滤镜
用缓存优化版本的代码加上滤镜
可以看到直接干到 1.8 fps 了，说明滤镜对渲染性能的开销还是很大的
我们可以对 Canvas 应用一个全局的 blur 滤镜，把绘制的所有元素都变得模糊，没必要对每个元素应用滤镜，而是可以采用类似后期处理通道的做法，先将图形以不使用滤镜的方式绘制到一个离屏的 Canvas 上，然后直接将这个离屏 Canvas 以图片方式绘制到要显示的画布上，这样就能把大量滤镜绘制的过程缩减为对一张图片使用一次滤镜，下面调整一下代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>优化滤镜</title> <style> canvas { border: 1px dashed #fa8072; } </style> </head> <body> <canvas width="500" height="500"></canvas> <script> const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); // 创建缓存的函数 function createCache() { const ret = []; for (let i = 0; i < shapeTypes.length; i++) { // 创建离屏Canvas缓存图形 const cacheCanvas = new OffscreenCanvas(20, 20); // 将图形绘制到离屏Canvas对象上 const type = shapeTypes[i]; const context = cacheCanvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "black"; if (type > 0) { const points = regularShape(10, 10, 10, type); drawShape(context, points); } else { context.beginPath(); context.arc(10, 10, 10, 0, TAU); context.stroke(); context.fill(); } ret.push(cacheCanvas); } // 将离屏Canvas数组（缓存对象）返回 return ret; } // 创建正多边形，返回顶点 function regularShape(x, y, r, edges = 3) { const points = []; const delta = (2 * Math.PI) / edges; for (let i = 0; i < edges; i++) { const theta = i * delta; points.push([ x + r * Math.sin(theta), y + r * Math.cos(theta), ]); } return points; } // 根据顶点绘制图形 function drawShape(context, points) { context.fillStyle = "red"; context.strokeStyle = "black"; context.lineWidth = 2; context.beginPath(); context.moveTo(...points[0]); for (let i = 1; i < points.length; i++) { context.lineTo(...points[i]); } context.closePath(); context.stroke(); context.fill(); } // 多边形类型，包括正三角形、正四边形、正五边形、正六边形和正100边形以及正500边形 const shapeTypes = [3, 4, 5, 6, 100, 500]; const COUNT = 1000; const TAU = Math.PI * 2; // 一次性创建缓存，直接通过缓存来绘图 const shapes = createCache(); ctx.filter = "blur(5px)"; // 创建离屏的 Canvas const ofc = new OffscreenCanvas(canvas.width, canvas.height); const octx = ofc.getContext("2d"); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); octx.clearRect(0, 0, canvas.width, canvas.height); // 将图形不应用滤镜，绘制到离屏Canvas上 for (let i = 0; i < COUNT; i++) { const shape = shapes[Math.floor(Math.random() * shapeTypes.length)]; const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; octx.drawImage(shape, x, y); } // 再将离屏Canvas图像绘制到画布上，这一次绘制采用了滤镜 ctx.drawImage(ofc, 0, 0); requestAnimationFrame(draw); } draw(); </script> </body> </html>
可以看到效果立竿见影：
方法六：多线程渲染
多线程渲染是用来优化非渲染的计算和交互方面导致的性能问题。比如渲染过程消耗了大量的时间，它可能会阻塞其他的操作，比如对事件的响应。这个时候可以利用浏览器支持 Canvas 可以在 WebWorker 中以单独的线程来渲染，这样就可以避免对主线程的阻塞，也不会影响用户交互行为。
具体的过程：
在浏览器主线程中创建 Worker
然后将 Canvas 对象通过 transferControlToOffscreen 转成离屏 Canvas 对象发送给 Worker 线程去处理
方法 HTMLCanvasElement.transferControlToOffscreen() 将控制转移到一个在主线程或者 web worker 的 OffscreenCanvas 对象上。
postMessage用法可以参考：https://developer.mozilla.org/zh-
CN/docs/Web/API/Window/postMessage
我们新建一个 worker.js 文件，在里面写进之前优化好的代码，并且添加监听
// 创建正多边形，返回顶点 function regularShape(x, y, r, edges = 3) { const points = []; const delta = (2 * Math.PI) / edges; for (let i = 0; i < edges; i++) { const theta = i * delta; points.push([x + r * Math.sin(theta), y + r * Math.cos(theta)]); } return points; } // 根据顶点绘制图形 function drawShape(context, points) { context.lineWidth = 2; context.beginPath(); context.moveTo(...points[0]); for (let i = 1; i < points.length; i++) { context.lineTo(...points[i]); } context.closePath(); context.stroke(); context.fill(); } // 多边形类型，包括正三角形、正四边形、正五边形、正六边形和正100边形以及正500边形 // 用 -1 代替正 500 边形 const shapeTypes = [3, 4, 5, 6, 100, -1]; const COUNT = 1000; const TAU = Math.PI * 2; // 创建缓存的函数 function createCache() { const ret = []; for (let i = 0; i < shapeTypes.length; i++) { const cacheCanvas = new OffscreenCanvas(20, 20); const type = shapeTypes[i]; const context = cacheCanvas.getContext("2d"); context.fillStyle = "red"; context.strokeStyle = "black"; if (type > 0) { const points = regularShape(10, 10, 10, type); drawShape(context, points); } else { context.beginPath(); context.arc(10, 10, 10, 0, TAU); context.stroke(); context.fill(); } ret.push(cacheCanvas); } return ret; } // 执行绘制 function draw(ctx, shapes) { const canvas = ctx.canvas; ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < COUNT; i++) { const shape = shapes[Math.floor(Math.random() * shapeTypes.length)]; const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; ctx.drawImage(shape, x, y); } requestAnimationFrame(draw.bind(null, ctx, shapes)); } // 监听message console.log('self------>', self) self.addEventListener("message", (evt) => { console.log('message--->', evt) if (evt.data.type === "init") { const canvas = evt.data.canvas; if (canvas) { const ctx = canvas.getContext("2d"); const shapes = createCache(); draw(ctx, shapes); } } });
在 html 文件里面引入该 js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>多线程渲染</title> <style> canvas { border: 1px dashed #fa8072; } </style> </head> <body> <canvas width="500" height="500"></canvas> <script> const canvas = document.querySelector('canvas'); const worker = new Worker('./assets/js/29/worker.js'); const ofc = canvas.transferControlToOffscreen(); worker.postMessage({ canvas: ofc, type: 'init', }, [ofc]); </script> </body> </html>
