7) 改进性能
requestanimationframe确实是实现动画不可或缺的利器，但是不可以过度的使用。尤其是和一些渐变性的事件相关联的动画，比如，chrome web store首页利用垂直滚轴不断显示页面内容。下面给出一个不太好的例子：
function onScroll() { update(); }
function update() {
// assume domElements has been declared
// by this point :)
for(var i = 0; i <ol class=" list-paddingleft-2"><li><p>window.addEventListener(‘scroll’, onScroll, false);</p></li></ol><p> 上面这个例子，每次scroll事件的时候，都调用RequestAnimationFrame，虽然浏览器会量力而行的执行动画渲染，但是有两个冲突的地方，成为了动画渲染的性能瓶颈。首先，scroll事件调用的频率，远远大约每秒60帧。也就是说，浏览器会缓存大量的RequestAnimationFrame事件，导致很多的update函在做无用功。其次，在每次执行RequestAnimationFrame的时候，里面对dom元素的属性进行了修改，引起了很多的Reflow和Repaint事件，显然完成所有的Reflow和Repaint时间的远远超过16ms。<br><br> 为了解决第一个问题，首先要将scroll和RequestAnimaitonFrame函数分离，修改后的代码如下：<br><br></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12439" title="Roblox 游戏开发 AI 工作流"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="Roblox 游戏开发 AI 工作流" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill12439" title="Roblox 游戏开发 AI 工作流" class="overflowclass">Roblox 游戏开发 AI 工作流</a>
<p class="overflowclass">从设计文档到代码审查再到数值平衡检查，一套结构化的游戏开发命令流，让 AI 按专业流程辅助你开发 Roblox 游戏。</p>
</div>
<a rel="nofollow" href="/xiazai/skill12439" title="Roblox 游戏开发 AI 工作流" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:php;toolbar:false">
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.php.cn）！
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
