当前位置:Gxlcms > html代码 > HTML5游戏开发之循环的控制(3)

HTML5游戏开发之循环的控制(3)

时间:2021-07-01 10:21:17 帮助过:15人阅读

7) 改进性能

RequestAnimationFrame确实是实现动画不可或缺的利器,但是不可以过度的使用。尤其是和一些渐变性的事件相关联的动画,比如,Chrome Web Store首页利用垂直滚轴不断显示页面内容。下面给出一个不太好的例子:

  1. 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
}
}
  1. 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游戏开发 之 循环的控制(3)的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!

人气教程排行