珍珠岩防火隔离带厂家
免费服务热线

Free service

hotline

010-00000000
珍珠岩防火隔离带厂家
热门搜索:
技术资讯
当前位置:首页 > 技术资讯

比较更新DOM格式游戏对象的4种方式

发布时间:2021-01-20 06:55:40 阅读: 来源:珍珠岩防火隔离带厂家

若你选择在游戏中使用DOM格式,而非SVG或canvas。很好!DOM格式是个杰出综合解决方案。本文通过研究四种以DOM格式更新游戏对象的方式,说明哪种方式效果最佳。

HTML5 game from

用于图表的测试包含变更游戏对象位置,以及反复更新。但也随机调整少数对象,旨在促使整个测试更具公平性。

以下是测试这些方式的脚本。

测试 1:InnerHTML

innerHTML是通过网页页面更新内容最传统的方式,同时也是创造DOM元素最快速和最普遍的方式。任何Element对象都具有此属性。Element对象赋值后就会开始分析数值,这是由于HTML在字符串中创造新Element对象。

此测试包含循环机制,所有更新都通过innerHTML以及回归游戏对象中的HTML字符串,重新渲染DOM树状图。

测试2:修改所有样式属性

这是游戏开发的标准方式,此测试将样式属性调整至新数值(游戏邦注:例如左边、顶部、宽度、高度和背景、各种着色)。这些调用只会带来Repaint活动,所以从理论角度看,这应该是最迅速的。

但这有点违反直觉,因为我们设定的属性也许不会发生改变,因此纯属浪费时间。这将我们带入下个测试。

测试3:修改变更属性

和上个测试类似,待到渲染时刻,我们通过存储上个数值检查属性是否发生改变。若发生改变,样式属性就得到更新。问题是我们需要编写更多代码,借用更多存储空间,带来更多Repaint情况,因此会降低运作性能。

测试4:调节器

上个测试有些与众不同——我们并非借助游戏循环机制反复更新游戏对象,而是借助调节器,它只有在被修改情况下才会进行重新渲染。调节器,或访问器,和运用属性类似,除非我们能够准确把握设定或访问装置时会发生什么情况。

注意:调节器的兼容性不高。Webkit和Mozilla都支持defineSetter,虽然defineSetter已被弃用,但其运作速度似乎最快。Opera和IE9可以充分利用fineProperty。

在此测试中,属性X有接收器和调节器。当X被赋值,调节器就启动。然后调节器就会将样式属性(左边)调整至新数值。

循环机制生成后,只有修改后的属性会获得更新,它们一经调整就会立即更新(游戏邦注:而非待到下个游戏循环更新出现)。这具有很多优点,但也带来许多问题。假设我们需要设置众多属性,频繁更新属性意味着需要执行多个调节装置,每个循环更新会带来许多Repaint活动。

结果

大量推测后,下面来看看若干图表数据!

chart from

从图表中我们可以发现修改前检验数值是最迅速的方式,第二快的方式是使用调节器。

在我更早的测试版本中,背景图像会重新应用至各着色操作,着色极大影响运作性能。移除此内容后,测试速度就会翻倍。因此,有个小建议:不要每次着色都更新图像。

调节器似乎是个不错的解决方案,因为你无需通过游戏循环机制维持渲染效果,而且调节器运作迅速。但在游戏中,这并非总是理想方式;一次更新众多属性意味着所有调整属性都需要调用函数,更别说所有调整行为带来的Repaint活动。此外,由于早前提到的兼容问题,利用调节器并不切实际。

所有浏览器操作数据均显示,innerHTML是最缓慢的方式,因此应排除在外。

我们可以得出的结论是需保持追踪测量数值,仅在必要时候调整属性。另一注意点是更新图像(游戏邦注:例如背景属性)会极大影响运作性能,即便图像保持一致。

令人惊讶的是,即便未发生任何变化,调整属性也会极大影响内容运作性能。我最初的猜测是浏览器会获悉何时需进行调整,但其实并非如此。此外,设置前检验数值是否发生变化更快速。

征战天下游戏官网

飘渺仙剑破解版

剑决天下最新版