"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).这里 ...
随机推荐
- 转载自infoq:MYSQL的集群方案
分布式MySQL集群方案的探索与思考 2016-04-29 张成远 “本文整理自ArchSummit微信大讲堂张成远线上群分享内容 背景 数据库作为一个非常基础的系统,任何一家互联网公司都会 ...
- (转)SpringMVC学习(六)——SpringMVC高级参数绑定与@RequestMapping注解
http://blog.csdn.net/yerenyuan_pku/article/details/72511749 高级参数绑定 现在进入SpringMVC高级参数绑定的学习,本文所有案例代码的编 ...
- jni 修bug
1. ReferenceTable overflow (max=512) 内存泄露,程序运行一段时间就挂掉了. 在利用反射调用java中的函数需要释放掉查找到的类 void publishJava ...
- 优先队列的使用——Expedition
一.题目描述 你需要驾驶一辆卡车行驶L单位距离.最开始时,卡车上有P单位的汽油.卡车每开1单位距离需要消耗1单位的汽油.如果在途中车上的汽油耗尽,卡车就无法继续前行,因而无法到达终点.中途共有N个加油 ...
- 1658: Easier Done Than Said?
1658: Easier Done Than Said? Time Limit: 1 Sec Memory Limit: 64 MBSubmit: 15 Solved: 12[Submit][St ...
- faster rcnn细节总结
1.roi_pooling层是先利用spatial_scale将region proposal映射到feature map上,然后利用pooled_w.pooled_h分别将映射后的框的长度.宽度等分 ...
- 洛谷 P1126 机器人搬重物 (BFS)
题目链接:https://www.luogu.org/problemnew/show/P1126 吐槽:这题很阴险 一开始没把格子图转化成点图:30分 转化成点图,发现样例过不去,原来每步要判断vis ...
- ios之UISplitViewController
iPad的屏幕比iPhone大,所以在界面上,iPad比iPhone多一个UISplitViewController,用来实现iPad在横屏时,分两栏显示所需要的界面,可以一边是目录一边是具体的内容. ...
- C语言特点_01
C语言特点: 1.C语言的32个关键字 auto 局部变量(自动储存) break 无条件退出程序最内层循环 case switch语句中选择项 char 单字节整型数据 const 定义不可更改的常 ...
- Mac OSX用 dd 命令,浇灌ISO镜像到USB驱动器
Mac OSX用 dd 命令,浇灌ISO镜像到USB驱动器 字数244 阅读197 评论0 喜欢0 把ISO镜像转换为一个可启动的USB设备.一种可行的方法是通过OS X的Terminal “浇灌”到 ...