对SVG动画进行惰性异步光栅化处理

翻译：疯狂的技术宅
原文： http://jakearchibald.com/2017...

---

本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章

---

渲染SVG图像可能会很是慢

在转换 SVG 图像时，浏览器会试着在每一帧上进行渲染，以便使图像尽量的清晰。 不幸的是，SVG渲染可能会很慢，特别是对于较大的图像。

这里是一个DEMO，打开后点击“Scale SVG”查看效果。

图：使用 Devtools 查看SVG动画的时间线

这是一个很是复杂的SVG，在某些帧上消耗的时间是咱们帧预算的10倍，因此这个动画看起来很是糟糕。 这是在一款功能强大的MacBook上作的测试。

若是是更简单的SVG，就不那么糟了。 这是用Firefox的logo演示的另外一个例子，看起来效果还能够。

不过新API为咱们提供了更多的控制方法：

SVG栅格化的惰性处理

createImageBitmap(imgElement).then(imageBitmap => { 
  // … 
});

createImageBitmap能够将许多不一样的图像栅格化为位图数据，这些数据能够绘制到canvas元素上。 可是，在Chrome 61+中，启用了chrome://flags/#enable-experimental-canvas-features，它能够为 SVG 图像启用HTML图像元素，并在主线程以外进行异步的栅格化处理，因此不会破坏动画。

另外你还能够只渲染SVG的一部分，并以特定大小进行输出：

createImageBitmap( 
  imgElement, 
  sourceCropX, sourceCropY, 
  sourceCropWidth, sourceCropHeight, 
  {resizeWidth, resizeHeight} 
).then(imageBitmap => …);

这容许咱们很是方便的使用画布对SVG进行位图缩放，同时渲染被裁剪后且很是清晰的版本。 一旦清晰版准备就绪，就能够将其包含在动画中。

这里是一个DEMO，按“Scale canvas”查看效果。 须要Chrome 61+ 中查看，并启用 chrome://flags/#enable-experimental-canvas-features 。

图：Devtools中画布动画的时间线

使用这种方法对CPU来讲更加友好，动画也很流畅：

查看SVG动画与SVG-in-canvas两种效果比较的视频演示：https://youtu.be/-yQBbWlXuqg

对于复杂的汽车SVG图像，最后才会出现清晰的图像。 使用Firefox徽标时，清晰版出现得更早，由于渲染时间更短。

DEMO的全部代码：https://glitch.com/edit/#!/sv...:1:0

平滑光栅化

从上面的时间线能够看出，Chrome在将更清晰的纹理传到GPU时仍然会跳过一帧。 这个问题能够经过将工做分块为更小的块来解决，所以GPU上传不会破坏帧预算。

OpenSeadragon：能够动态加载图像切片，并建立可缩放图像。 它很是适合从网络中获取位图数据，但有点hack。

Zoomable lazy-rendered tiled SVG： 须要Chrome 61+并启用 chrome://flags/#enable-experimental-canvas-features 。

是的，边缘有一点粗糙。 就像我前面说的那样，这是一个hack。 不过我真的对此很兴奋，对 SVG 图像更加酷炫的处理技术在逐渐用于web。

---

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章