Home > Web Front-end > H5 Tutorial > HTML5游戏开发 之 循环的控制(3)

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

PHP中文网
Release: 2016-05-17 09:08:40
Original
1728 people have browsed it

       7) 改进性能

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

  1. function onScroll() {
    update();
    }
    Copy after login
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
}
}
Copy after login
  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);
Copy after login


       上面的代码,scroll事件仅负责将最新的窗口位置,赋值给一个变量。这样的话,可以避免大量的RequestAnimationFrame事件被缓存,从而真正让RequestAnimationFrame按照浏览器的能力,进行动画渲染。

       对于第二个问题,唯一的办法,尽量的减少Repaint和Reflow的事件。道理虽然简单,但是优化难度很大,要求读者对于Dom的渲染的每个函数都非常熟悉。下面列出几篇文章,仅供参考:

       ClassList for great good.

       Breakdown of repaint.

       Learning from Twitter

       (未完待续)

    

以上就是HTML5游戏开发 之 循环的控制(3)的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template