浅谈 Web App 动画效率
自从 HTML5 诞生之后,关于 Web App 和 Native App 的讨论就从未间断过,孰优孰劣大家各执一词。但作为前端开发者的我们,心里其实是明白的,这个世界是你们的(Native App),也是我们(Web App)的,但终究还是我们的,如果几十年后再回头看这一路的话,会发现你们不过是一插罢了。哈哈哈哈哈哈
但现在摆在眼前的事实是,Native App 比 Web App 的市场大,大家更愿意去用 Java 或者 OC ,而不愿意用 Js。大家都不喜欢用 Web App ,究其原因无非就两点:兼容性、慢。
那我们就来谈谈慢这个问题。但貌似这个问题很庞大,这里就谈一些我了解的东西。
提高页面加载速度,这个问题老生常谈了,什么多域名、CDN、组件化、seajs都是解决办法,淘宝首页就是个很好的案例。这里我们就不再赘述,网上很多其它相关的资料。
动画才是我们今天要谈论的主要内容:如何做到 60fps。
60pfs 这是CRT显示器的刷新频率,也是人眼感觉不到卡顿的频率,也就是每秒 60 帧,每帧的时间间隔是 16ms。然后我们了解一下浏览器的渲染机制,计算机需要在 16ms 内完成下面这些任务:
- 计算 Js
- 浏览器计算 layout
- 绘图 paint
- 在 GPU 上拼合图层 composite
第一步 JS 计算是由开发者控制的,在这里的操作会影响到下面三步。在前端性能上我们经常遇到的问题就是回流,这就是由于开发者调用了一些方法触发了 layout,然后浏览器就接着 paint、composite。
所以在做动画的时候,不要用 JS 做计算密集型的任务,jQuery 返回的对象做好缓存,避免多次调用。layout 能不触发就不触发,paint 能不触发就不触发。那怎么做才能只触发 composite 呢? opacity
和 transform
这两个属性是不会触发 layout 和 paint 的。所以作为前端开发,我们很喜欢也很乐于做透明度淡入淡出,因为这个不会用太大的性能问题。
有的同学就要问了:咦?color 和 box-shadow 这些也不涉及到 layout 啊,那我可以大规模的运用吗?
答案是不行,为什么呢?因为在 layout、paint 和 composite 中,最消耗性能的就是 paint。具体有多消耗呢?
上面是我打开一个带有视差滚动效果的 medium 页面后,从上向下滚动时产生的数据,其中绿色部分就是 paint + composite。可以看到在桌面上,视差滚动勉强达到 60fps,这样的性能在手机上肯定是惨不忍睹的。其实在视差滚动中,元素的颜色大小位置都没有改变,理论上是不需要 repaint 的,那么如何才能避免它呢?
其中一种方法就是创建新的 layer,但这种方法有一定的代价,其中最出名的就是在高 DPI 屏幕下字体显示问题,还有子元素position:fixed
错位等等一些事情。
上面的图片就是在 surface pro3 + chrome 访问 feedly 的截图,可以明显的看到文字发虚。
日子还是要过的,Native App 也是要被打败的,那么怎么办呢?
Flipboard 开发团队就发明了一种丧心病狂的办法:用 canvas 渲染。Canvas 直接与 GPU 打交道,渲染速度非常快。但在使用过程中还是有很多顾虑的,下面是会遇到的一些问题:
- 文字换行如何处理
- 图片需要加载后才能放入 canvas
- 元素层级如何处理
- 自定义字体
- 如何排版
尤其是排版问题,CSS已经很成熟了,自己创立其它机制来排版无疑是搬石头砸自己的脚。所以 Flipboard 开发小组就将 DOM 和 Canvas 合二为一,利用 DOM 的排版优势和 Canvas 的渲染优势。
现在用手机访问 Flipboard 就可以看到他们的这一成果了,其方法就是文档结构按照正常的 DOM 来,但是不加任何的颜色样式,然后把这一层透明度改为 0 。在其上层再加入一层 canvas ,用来显示渲染的结果。效果还是很不错的:
总的来说,未来还是很光明的,虽然 web app 有各种各样的性能问题,但它还是向着越来越好的方向发展。只要我们合适的利用浏览器给我们的资源,我们还是可以做出优秀的效果的。
参考文章:
- 也许,DOM 不是答案
- 60fps on the mobile web
参考视频:
- #perfmatters: 60fps layout and rendering
浅谈 Web App 动画效率相关推荐
- 浅谈Web App前端设计原则
关于Web App 随着web 2.0时代的到来,越来越多的应用程序都是基于Web环境来构建的.这样做的好处显而易见,用户可以方便地使用浏览器来访问应用,而不需要安装客户端程序.而在企业内部,很多应用 ...
- 浅谈web开发以及django的安装和入门
浅谈web开发 1.B/S和C/S结构 B/S:浏览器与服务器进行的交互模式(不需要官方下载的,一夫多妻制) C/S:客户机与服务器进项的交互模式(必须官方下载的,一夫一妻制 2.MVC和MVT MV ...
- 浅谈代码的执行效率(4):汇编优化
终于谈到这个话题了,首先声明我不是汇编优化的高手,甚至于我知道的所有关于汇编优化的内容,仅仅来自于学校的课程.书本及当年做过的一些简单练习.换句话说,我了解的东西只能算是一些原则,甚至也有一些&quo ...
- 浅谈web应用的负载均衡、集群、高可用(HA)解决方案
浅谈web应用的负载均衡.集群.高可用(HA)解决方案 转载于:https://www.cnblogs.com/hfultrastrong/p/7887420.html
- 浅谈 Web 3.0
这篇文章的目的就是简单解释一下这个「Web 3.0」新概念. 为了更好地理解「Web 3.0」,我们可能需要从 「Web 1.0」和「Web 2.0」说起. 浅谈 Web 3.0 「Web 1.0」 ...
- 浅谈web api和Webservice
浅谈web api和Webservice webapi用的是http协议,webservice用的是soap协议 webapi无状态,相对webservice更轻量级.webapi支持如get,pos ...
- 浅谈如何app增加用户粘性
前言: app开发主要目的就是需求,需求就是让别人用,让别人使用我的app能够为用户提供相应的一些能够完成他所想要的功能.有需要才会有存在的必要,要是没有需求,那么也就没有了存在的必要了. 研究背景: ...
- 浅谈Web中前后端模板引擎的使用
前言 这篇文章本来不打算写的,实话说楼主对前端模板的认识还处在非常初级的阶段,但是为了整个 源码解读系列 的完整性,在深入 Underscore _.template 方法源码后,觉得还是有必要记下此 ...
- 浅谈提升C#正则表达式效率
摘要:说到C#的Regex,谈到最多的应该就是RegexOptions.Compiled这个东西,传说中在匹配速度方面,RegexOptions.Compiled是可以提升匹配速度的,但在启动速度上 ...
最新文章
- WIFI芯片厂商介绍
- 使用ffmpeg对视频进行TS切片
- 如何在windows下安装JDK
- C#设计模式之11-享元模式
- Dart核心基础List概述
- redis 分页_Redis排行榜的设计与实现
- 常用jar包_几个解决 Maven Jar 包冲突的小技巧.
- 研发感悟:从CPU架构图谈谈开发工作
- 语音库构建_推动数据采用,以通过语音接口构建更好的产品
- 图像匹配之序贯相似性检测法匹配
- web渗透测试----14、CSRF(跨站请求伪造攻击)
- 2021年终总结,我躺平了?
- 虚函数表构成、地址详细说明
- STM32入门指南(0)—配置开发环境
- C语言RGB转Lab色域
- 怎么用计算机创建wifi,如何用自己电脑开WIFI热点
- 路虎:独到所处,揽胜极致.
- 萝卜青菜各有所爱------htm 与 html
- Perfmon监控Windows进程性能
- jquery引入外部CDN,失效后则引入本地jq库
热门文章
- mysql 的命名管道_笔记27-徐 SQLSERVER命名管道工作原理
- 赶紧进来修内功--- 详细讲解在内存中数据的存储方式(整形篇)
- 账户系统和会计系统的设计
- FFmpeg播放视频文件流程
- Linux Purify命令
- 卷积神经网络特征图可视化热图可视化
- 华为云WeLink:用科技帮助乡村教师,推动乡村教育发展
- [JavaScript][AJAX]onreadystatechange事件;AJAX含义及组成部分;AJAX工作原理/HTTP工作原理;一个页面从输入url到呈现网页过程;FormData对象;防抖
- 张甜甜:在实践中迈进数据科学领域 | 优秀毕业生专访
- 【每日一题Day95】LC1815得到新鲜甜甜圈的最多组数 | 状态压缩dp 记忆化搜索