检查系统是否能够流畅地展示JS特效

Question

我想知道是否有一种简单的方法可以在浏览器上实现快速基准测试来提高渲染速度？

有漂亮的动画效果是很好的，但前提是机器能处理它。有了SVG和jQuery给大众的所有效果，就有可能以可视化和动画的方式显示大量数据。然而，没有简单的方法(我还能找到)来检查和查看是否应该向用户代理提供“华丽的动画svg”、“静态svg”或“表”版本的数据。

谢谢

Answer 1

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

您可以运行此测试动画，然后对结果进行cookie，然后仅在找不到cookie时重新运行测试动画。或者，你可以在你的应用程序的正常运行过程中运行所需的动画，但要测量它的工作情况，如果它太慢或太干，那么就告诉你下次需要使用更快的东西。

Answer 2

尝试使用Firebug中的Net选项卡。只需加载您想要测试的页面，打开Firebug，单击Net选项卡中的小向下箭头并选择Enable，然后刷新页面。您可以获得页面上每个元素的加载时间的漂亮图表。

Answer 3

我以前使用过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上，有更多关于它的信息