HTML5游戏开发 之 循环的控制(3)
7) 改进性能
RequestAnimationFrame确实是实现动画不可或缺的利器,但是不可以过度的使用。尤其是和一些渐变性的事件相关联的动画,比如,Chrome Web Store首页利用垂直滚轴不断显示页面内容。下面给出一个不太好的例子:
上面这个例子,每次scroll事件的时候,都调用RequestAnimationFrame,虽然浏览器会量力而行的执行动画渲染,但是有两个冲突的地方,成为了动画渲染的性能瓶颈。首先,scroll事件调用的频率,远远大约每秒60帧。也就是说,浏览器会缓存大量的RequestAnimationFrame事件,导致很多的update函在做无用功。其次,在每次执行RequestAnimationFrame的时候,里面对dom元素的属性进行了修改,引起了很多的Reflow和Repaint事件,显然完成所有的Reflow和Repaint时间的远远超过16ms。
为了解决第一个问题,首先要将scroll和RequestAnimaitonFrame函数分离,修改后的代码如下:
上面的代码,scroll事件仅负责将最新的窗口位置,赋值给一个变量。这样的话,可以避免大量的RequestAnimationFrame事件被缓存,从而真正让RequestAnimationFrame按照浏览器的能力,进行动画渲染。
对于第二个问题,唯一的办法,尽量的减少Repaint和Reflow的事件。道理虽然简单,但是优化难度很大,要求读者对于Dom的渲染的每个函数都非常熟悉。下面列出几篇文章,仅供参考:
ClassList for great good.
Breakdown of repaint.
Learning from Twitter
(未完待续)
上文:
HTML5游戏开发 之 循环的控制(2)
HTML5游戏开发 之 循环的控制(1)
HTML5 游戏开发 之 资源加载篇(2)
HTML5 游戏开发 之 资源加载篇(1)
RequestAnimationFrame确实是实现动画不可或缺的利器,但是不可以过度的使用。尤其是和一些渐变性的事件相关联的动画,比如,Chrome Web Store首页利用垂直滚轴不断显示页面内容。下面给出一个不太好的例子:
- function onScroll() {
- update();
- }
- function update() {
-
- // assume domElements has been declared
- // by this point :)
- for(var i = 0; i < domElements.length; i++) {
-
- // read offset of DOM elements
- // to determine visibility - a reflow
-
- // then apply some CSS classes
- // to the visible items - a repaint
-
- }
- }
- window.addEventListener(‘scroll’, onScroll, false);
上面这个例子,每次scroll事件的时候,都调用RequestAnimationFrame,虽然浏览器会量力而行的执行动画渲染,但是有两个冲突的地方,成为了动画渲染的性能瓶颈。首先,scroll事件调用的频率,远远大约每秒60帧。也就是说,浏览器会缓存大量的RequestAnimationFrame事件,导致很多的update函在做无用功。其次,在每次执行RequestAnimationFrame的时候,里面对dom元素的属性进行了修改,引起了很多的Reflow和Repaint事件,显然完成所有的Reflow和Repaint时间的远远超过16ms。
为了解决第一个问题,首先要将scroll和RequestAnimaitonFrame函数分离,修改后的代码如下:
- var latestKnownScrollY = 0;
- function onScroll() {
- latestKnownScrollY = window.scrollY;
- }
-
- function update() {
- requestAnimationFrame(update);
- var currentScrollY = latestKnownScrollY;
-
- // read offset of DOM elements
- // and compare to the currentScrollY value
- // then apply some CSS classes
- // to the visible items
- }
-
- // kick off
- requestAnimationFrame(update);
上面的代码,scroll事件仅负责将最新的窗口位置,赋值给一个变量。这样的话,可以避免大量的RequestAnimationFrame事件被缓存,从而真正让RequestAnimationFrame按照浏览器的能力,进行动画渲染。
对于第二个问题,唯一的办法,尽量的减少Repaint和Reflow的事件。道理虽然简单,但是优化难度很大,要求读者对于Dom的渲染的每个函数都非常熟悉。下面列出几篇文章,仅供参考:
ClassList for great good.
Breakdown of repaint.
Learning from Twitter
(未完待续)
上文:
HTML5游戏开发 之 循环的控制(2)
HTML5游戏开发 之 循环的控制(1)
HTML5 游戏开发 之 资源加载篇(2)
HTML5 游戏开发 之 资源加载篇(1)
【HTML5游戏开发 之 循环的控制(3)】相关文章
4. html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
5. html5游戏开发-零基础开发RPG游戏-开源讲座(一)
6. html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
9. HTML5游戏开发工具:Make Games with Construct 2
10. html5游戏开发引擎大全
本文来源:https://www.51html5.com/a635.html
上一篇:HTML Canvas绘图使用详解
下一篇:HTML5 Canvas动画设计解析
﹝HTML5游戏开发 之 循环的控制(3)﹞相关内容
- HTML5游戏开发 之 资源加载篇(1)
- HTML5游戏开发工具推荐:IMPACT
- HTML5游戏开发的5条最佳实践
- HTML5游戏开发与货币化经验分享
- AppMobi公开HTML5游戏开发工具
- HTML5游戏开发工具PlayMobi支持Facebook支付
- 磊友黄何:HTML5游戏开发成本低 盈利模式清晰
- HTML5游戏开发盈利之道
- HTML5游戏开发的五个最佳实践
- HTML5游戏开发与货币化经验分享