"Javascript高性能动画与页面渲染"笔记
前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗易懂。so……笔记诞生
1、fps -frame per second 帧
页面是每一帧变化都是系统绘制出来的(GPU或者CPU)。但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,以下用fps简称),对应于显示器的60Hz。
2、60Hz和60fps有什么关系?
没有任何关系。fps代表GPU渲染画面的频率,Hz代表显示器刷新屏幕的频率。一幅静态图片,你可以说这副图片的fps是0帧/秒,但绝对不能说此时屏幕的刷新率是0Hz,也就是说刷新率不随图像内容的变化而变化。游戏也好浏览器也好,我们谈到掉帧,是指GPU渲染画面频率降低。比如跌落到30fps甚至20fps,但因为视觉暂留原理,我们看到的画面仍然是运动和连贯的。
3、为什么setTimeout或者setInterval来控制绘制页面存在问题?
首先,Timer计算延时的精确度不够。延时的计算依靠的是浏览器的内置时钟,而时钟的精确度又取决于时钟更新的频率(Timer resolution)。
IE8及其之前的IE版本更新间隔为15.6毫秒。假设你设定的setTimeout延迟为16.7ms,那么它要更新两个15.6毫秒才会该触发延时。这也意味着无故延迟了 15.6 x 2 - 16.7 = 14.5毫秒。
16.7ms
DELAY: |------------|
CLOCK: |----------|----------|
15.6ms 15.6ms
所以即使你给setTimeout设定的延时为0ms,它也不会立即触发。目前Chrome与IE9+浏览器的更新频率都为4ms(如果你使用的是笔记本电脑,并且在使用电池而非电源的模式下,为了节省资源,浏览器会将更新频率切换至于系统时间相同,也就意味着更新频率更低)。
退一步说,假使timer resolution能够达到16.7ms,它还要面临一个异步队列的问题。因为异步的关系setTimeout中的回调函数并非立即执行,而是需要加入等待队列中。但问题是,如果在等待延迟触发的过程中,有新的同步脚本需要执行,那么同步脚本不会排在timer的回调之后,而是立即执行。
再退一步说,假设timer resolution能够达到16.7ms,并且假设异步函数不会被延后,使用timer控制的动画还是有不尽如人意的地方。-->垂直同步问题
"Javascript高性能动画与页面渲染"笔记的更多相关文章
- Javascript高性能动画与页面渲染
转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setT ...
- [转]Javascript高性能动画与页面渲染
No setTimeout, No setInterval 作者 李光毅 发布于 2014年4月30日 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 【前端性能】高性能滚动 scroll 及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...
- 高性能滚动 scroll 及页面渲染优化
最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...
- 前端高性能滚动 scroll 及页面渲染优化
前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...
- 高性能动画!HTML5 Canvas JavaScript框架KineticJS
高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- JS学习笔记:(一)浏览器页面渲染机制
浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...
随机推荐
- Maven添加本地依赖
在写本文的时候先来说明一下maven依赖的各种范围的意思 compile(编译范围) compile 是默认的范围:如果没有提供一个范围,那该依赖的范围就是编译范围.编译范围依赖在所有的c ...
- IOS音频视频
视频播放 MediaPlayer.framework MPMoviePlayerViewController VS MPMoviePlayerController MPMoviePlayerViewC ...
- sql视图和表的区别
整理一下视图和表的区别 区别: 1.视图是已经编译好了的sql,表不是 2.视图没有实际的物理存储记录,表有 3.视图是逻辑概念,表可以进行修改 5.表是内模式,视图是外模式 6.视图是我们查看表的方 ...
- js 两个数组进行去重处理,返回去重后的数组
1.去重的方法为: array_diff(a, b) { for (var i = 0; i < b.length; i++) { for (var j = 0; j < a.length ...
- [已解决]gitee初次使用git clone报错
本文描述的错误按实际出现先后顺序排列,并且附上一些其他可能会出现的问题 错误1: JZKJ@DESKTOP-I7Q9QJ4 MINGW64 ~ $ git clone https://gitee.co ...
- 正则表达式匹配:根据key获取value
需求 url请求html字符串,dytk值写在js里,可以看成是key-value的格式,需要提取dytk值. 解决方法 正则匹配 private string get_dytk(string htm ...
- IP数据包的校验和算法
1.算法思路: IP/ICMP/IGMP/TCP/UDP等协议的校验和算法都是相同的,算法如下: 在发送数据时,为了计算IP数据包的校验和.应该按如下步骤: (1)把IP数据包的校验和字段置为0: ( ...
- 洛谷 P2921 在农场万圣节
https://www.luogu.org/problemnew/show/P2921 开始感觉这题30行代码就可以搞定,还是太菜啦,还是乖乖地写了tarjan. 对图进行缩点,那么这个强联通分量中的 ...
- Java--容器/集合类(Collection)理解和使用
.数组和集合的比较 数组:长度固定,用来存放基本类型的数据 集合:长度不固定,用来存放对象的引用 二.集合类的基本概念 1.java.util包中提供了一些集合类,这些集合类也被称为容器. 常用的集合 ...
- Bzoj 1257 [CQOI2007]余数之和 (整除分块)
Bzoj 1257 [CQOI2007]余数之和 (整除分块) 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1257 一道简单题. 题目 ...