4

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

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

谢谢

4

3 回答 3

1

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

您可以运行此测试动画，然后将结果存储为 cookie，然后仅在找不到 cookie 时重新运行测试动画。或者，您可以在您的应用程序的正常过程中运行所需的动画，但测量它的效果如何，如果它太慢或生涩，那么您需要下次使用更快的东西。

于 2011-06-27T02:05:46.113 回答
0

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

于 2011-06-03T18:23:26.540 回答
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 还有其他类型的检查，如果需要，您还可以添加或拥有自定义检查

在灯丝组页面上，有更多关于它的信息

于 2011-06-03T19:49:46.557 回答