我最近用HTML5做了一些实验,发现HTML5在移动、平板电脑甚至桌面上运行的很差。 我进行了以下测试:
150 elements moving across the page with jQuery http://erality.com/public/html5/001/
25 elements move across the page with HTML5 http://erality.com/public/html5/002/
jQuery 版本在桌面上运行良好,在较新的平板电脑上运行相当好。 HTML 5 版本( 元素的六分之一) 在桌面上运行不好, 在平板电脑上运行很可怕。 这是否正常的性能? 我做错了吗?
任何洞察力都会有所帮助
“HTML5”版本的性能不佳的原因是它使用了setTimeout ,而不是request AngimationFrame (RAF),这是用 HTML5 画布绘制任何东西的建议方法。 。
<% 1 > 编辑 : 我本该写"是部分 < em > 解释" 。
除 RAF 外, 您应该尝试使用设置“ 间隔” 而不是设置“ 暂停 ” 。 另外, 为什么每个设置时间的长度会有一个随机因素? 如果您不想使用 RAF, 我建议使用设置“ 间隔”, 固定间隔( 起始时间为 16ms ), 并在每个间隔更新所有花瓣。 目前您对每个花瓣都使用单独的设置时间, 随机持续时间, 这可能会造成很多滞后时间 。
""http://msdn.microsoft.com/library/hh673556.aspx" rel="nofollow" >这里 是有关RAF业绩效益的一个很好的MSDN文章。 它将RAF与SetTimeout/setInterval作了比较。
因此,应用程序与浏览器绘画间隔完全一致,只使用适当数量的资源。
此外:
无法绘制每三幅图, 原因是在显示更新间隔前会出现另一个绘图请求 。 这种过度绘制导致切片动画, 因为每三幅图都丢失了每三幅。 这种定时分辨率降低也会对电池寿命造成高达25%的消极影响 。
使用 SetTimeout 可能不会计算您示例中的性能差异 。 其他人已经指出, 比较不是苹果到应用程序。 您应该能够用 SetTimeout 获得更快的动画( 我写了一个相当平滑的物理模拟和 SetTimeout ) 。 尽管如此, RAF 远优于设置Timeout, 并且是获得最平滑动画的唯一方法 。
jQuery 和 HTML5 动画性能非常出色,因为每种方式都使用不同的方式移动/绘制对象。
当动画是jQuery时,它会直接访问对象并将其翻译到屏幕上,当Canvas元素时,它会每次在新位置与元素一起重新绘制画布。
P.S.我有这一说法的来源,但事实上这是我的意见。
I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....
I have a div <div id="masterdiv"> which has several child <div>s. Example: <div id="masterdiv"> <div id="childdiv1" /> <div id="childdiv2" /> <div id="...
I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...
<form><input type="file" name="first" onchange="jsFunction(2);"> <input type="file" name="second" onchange="jsFunction(3);"</form> Possible to pass just numbers to the js ...
So I ve got a menu with a hover/selected state and it loads fine in IE6/IE7. However when I scroll down the page and put the element outside of the viewport and then back in I get a broken image! I ...
I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...
Is it possible to reload a form after file-input change? I have a form where the user can chose an image for upload. I also have a php script which displays that image resized. I only wonder if it ...
I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!
