检查系统是否能流畅显示JS效果

Question

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

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

谢谢

Answer 1

我知道执行此操作的唯一方法是实际运行代表性动画并测量其速度，无论是渲染 x 帧的时间还是每个固定时间的总帧数。 jQuery 和 YUI 中的动画库根据渲染每个帧的速度来调整渲染的帧数。您可以看看他们是如何做到这一点的，以获得一些如何衡量这一点的想法，或者如果您正在使用这些库之一，您甚至可以在动画之后从它们中获取信息。

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

Answer 2

尝试使用 Firebug 中的“网络”选项卡。只需加载要测试的页面，打开 Firebug，单击“网络”选项卡中的小向下箭头并选择“启用”，然后刷新页面。您会得到页面上每个元素的加载时间的漂亮图表。

Answer 3

我之前已经使用 Enhance.js 来执行此操作，

请看一下加载 css 和的示例专门用于屏幕和移动设备的

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'}
        ]       
});

Node.jsEnhance.js 还具有其他类型的检查，如果需要，您还可以添加或拥有自定义检查

灯丝组页面，还有更多相关内容