专栏首页京程一灯对SVG动画进行异步懒光栅化处理 [每日前端夜话(0x17)]

对SVG动画进行异步懒光栅化处理 [每日前端夜话(0x17)]

每日前端夜话0x17

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:1917 字 2代码 3 图 1 视频

预计阅读时间: 7 分钟

翻译:疯狂的技术宅 原文:http://jakearchibald.com/2017/lazy-async-svg/

渲染SVG图像可能会非常慢

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

这里是一个DEMO[https://svg-zoom-demo.glitch.me/],打开后点击“Scale SVG”查看效果。

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

这是一个非常复杂的SVG,在某些帧上消耗的时间是我们帧预算的10倍,所以这个动画看起来非常糟糕。 这是在一款功能强大的MacBook上做的测试。

如果是更简单的SVG,就不那么糟了。 这是用Firefox的logo演示的另一个例子[https://svg-zoom-demo.glitch.me/?firefox-logo],看起来效果还可以。

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

SVG懒栅格化处理

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

另外你还可以只渲染SVG的一部分,并以特定大小进行输出:

这允许我们非常方便的使用画布对SVG进行位图缩放,同时渲染被裁剪后且非常清晰的版本。 一旦清晰版准备就绪,就可以将其包含在动画中。

这里是一个DEMO[https://svg-zoom-demo.glitch.me/],按“Scale canvas”查看效果。 需要Chrome 61+ 中查看,并启用 chrome://flags/#enable-experimental-canvas-features

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

使用这种方法对CPU来说更加友好,动画也很流畅:

查看SVG动画与SVG-in-canvas两种效果比较的视频演示:

演示视频时长30秒,越消耗4M流量。原始地址:https://youtu.be/-yQBbWlXuqg

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

DEMO的所有代码:https://glitch.com/edit/#!/svg-zoom-demo?path=script.js:1:0

平滑光栅化

从上面的时间线可以看出,Chrome在将更清晰的纹理传到GPU时仍然会跳过一帧。 这个问题可以通过将工作分块为更小的块来解决,因此GPU上传不会破坏帧预算。

OpenSeadragon:可以动态加载图像切片,并创建可缩放图像。 它非常适合从网络中获取位图数据,但有点hack。链接:【http://openseadragon.github.io/】

Zoomable lazy-rendered tiled SVG: 需要Chrome 61+并启用 chrome://flags/#enable-experimental-canvas-features 。链接:【https://lazy-svg.glitch.me/】

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

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:京程一灯

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 令人惊叹的JavaScript装B黑科技

    Javascript是一门很吊的语言,我可能学了假的JavaScript,哈哈,大家还有什么推荐的,补充送那啥邀请码。

    疯狂的技术宅
  • SVG 路径动画简易指南

    任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追...

    疯狂的技术宅
  • 小程序面向个人开发者开放!新增六大能力

    小程序开放个人开发者申请注册,个人用户可访问微信公众平台,扫码验证个人身份后即可完成小程序帐号申请并进行代码开发。

    疯狂的技术宅
  • 玩转SVG让设计更出彩

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 使用SVG,提升视觉设计表现力,让设计更出彩。 ? 前言 SVG 概述 随着浏览器...

    腾讯ISUX
  • SVG - 创建SVG图片

    SVG - 创建SVG图片 HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Can...

    HTML5学堂
  • 三种图表技术SVG、Canvas、WebGL 3D比较

    因为前两项都是描述2D图形的,而WebGL是描述3d的,所以以下针对SVG和Canvas做比较。

    IT人一直在路上
  • 【爬虫】利用Python爬虫爬取小麦苗itpub博客的所有文章的连接地址并写入txt文件中(1)

    今天小麦苗给大家分享的是利用Python爬虫爬取小麦苗itpub博客的所有文章的连接地址并写入txt文件中(1)。

    小麦苗DBA宝典
  • 13-ESP8266 SDK开发基础入门篇--上位机串口控制 Wi-Fi输出PWM的占空比,IEEE754规约

    https://www.cnblogs.com/yangfengwu/p/11100552.html

    杨奉武
  • 谷歌趋势:人工智能首超大数据,深度学习关注度上升最快

    【新智元导读】 KDnugget 在谷歌趋势(Google Trends)上对比了几个相关关键词的关注度,对大数据、机器学习、人工智能、数据科学和深度学习进行排...

    新智元
  • iOS开发中常用的宏

    剑行者

扫码关注云+社区

领取腾讯云代金券