2011-06-03 55 views
4

我想知道是否有简单的方法在浏览器上实现快速基准测试的渲染速度?检查系统是否能顺利显示JS效果

很高兴有漂亮的动画效果,但只有当机器可以处理它。有了SVG和所有的效果,jQuery为大众提供了可视化显示大量数据和动画的可能性。然而,没有简单的方法(我可以找到)来检查用户代理是否应该交付数据的'浮动动画svg','静态svg'或'表格'版本。

谢谢

回答

1

我知道这样做的唯一方法就是实际运行一个代表性的动画并测量其速度,要么是及时渲染x帧,要么是每个固定时间的总帧数。 jQuery和YUI中的动画库根据呈现每帧的速度调整渲染帧的数量。你可以看看他们是如何做到这一点,以获得一些想法如何衡量这一点,或者如果你正在使用这些库中的一个,你甚至可以在动画之后从中获取信息。

您可以运行此测试动画,然后对结果进行cookie,然后只在您未找到cookie时重新运行测试动画。或者,您可以在应用程序的正常过程中运行所需的动画,但要测量它的运行效果,以及它是否太慢或不稳定,那么下次需要更快地使用cookie。

+0

到目前为止最好的答案是,我将查看jQuery,并尝试查找您所说的代码。太棒了! – nak 2011-06-27 15:46:35

0

尝试使用Firebug中的Net选项卡。只需加载想要测试的页面,打开Firebug,点击网络标签中的向下箭头,然后选择启用,然后刷新页面。您可以获得页面上每个元素加载时间的漂亮图形。

+0

谢谢,我是新来的萤火虫,所以这有助于此,但这仍然不是一个解决方案。我只知道我的电脑如何加载某些元素。真的很整洁,但试过了! – nak 2011-06-03 18:44:50

0

我用Enhance.js

做到这一点看看加载CSS和JS的例子专为屏幕和移动设备

enhance({ 
     loadStyles: [ 
       {media: 'screen', excludemedia: 'screen and (max-device-width: 480px)', href: 'css/screen.css'}, 
       {media: 'screen and (max-device-width: 480px)', href: 'css/handheld.css'} 
     ], 
     loadScripts: [ 
       {media: 'screen', excludemedia: 'screen and (max-device-width: 480px)', src: 'js/screen.js'}, 
       {media: 'screen and (max-device-width: 480px)', src: 'js/handheld.js'} 
     ]  
}); 

Enhance.js也有其他类型的检查,你也可以添加或自定义的检查,如果有必要

Filament Group page,还有更多关于它