Javascript (jQuery) 性能测量和最佳实践(不是加载时间)

IT技术 javascript jquery optimization performance
2021-02-28 18:46:03

我会马上说这个问题与加载时间无关;我了解 YSlow、Firebug 分析器,以及谷歌搜索关于页面组件加载时间的任何最佳实践和工具。

我在问有哪些好的分析工具或库或附加组件可用于衡量 Javascript(特别是 jQuery)的实际执行情况,以改善实际用户体验。例如,测量从点击到屏幕上可见结果的时间,或帮助确定基于 jQuery 的悬停效果响应缓慢的原因。

我们注意到当页面/DOM 变得相对较大时(例如,70kb 到 150kb 的 HTML,不包括外部 CSS、JS 和图像),和/或具有非常深的嵌套(从 <body> 到最深的标记 14-25 层) ),jQuery 事件触发更慢,或者整个 JS 用户体验变得缓慢。

我还搜索并了解了选择器的最佳实践(例如,通过 id 进行选择比使用类进行选择要快得多),我将实施这些实践。然而,一旦所有的 jQuery 都被完全加载,并且所有的事件都被挂钩,我们仍然需要改进实际的事件触发和执行。

我已经实现了一些事件委托,而且我确实感觉到减少钩住的 DOM 元素会使事情稍微好一些,但整体体验仍然需要改进大页面。我应该提到的是,由于该站点是 AJAX 密集型的(很多是通过 AJAX 加载的,而不是最初的 HTTP 命中),我们大量使用 livequery 而不是普通的 jQuery 事件挂钩。我还应该提到,我们稍微更关注 IE(7+) 性能,但也需要良好的 Firefox 性能。

随着我的发展和改变,我认为我需要一种方法来衡量改变前后的速度,这样我就可以得到关于改变是否能改善任何事情的具体数字。

任何提示、工具、库、博客文章、网址?

2个回答

JSLitemus看起来像是我可以尝试的东西。

除了 JSLitmus,你有没有想出什么办法?更具体地说 - 您的网页有什么问题?
2021-04-24 18:46:03
我实际上已经用 JSLitmus 实现了一个小测试,它非常适合它的功能。不过,我仍然愿意接受其他人对这个 SOF 问题的回答。
2021-04-29 18:46:03

通过使用 Firebug,您可以进入控制台选项卡,然后单击左上角的 firebug 图标(称为“Firebug 选项”)。然后单击“Profile Javascript”选项,然后执行您想要测量的操作,例如单击 javascript 按钮、拖动 Jquery 可拖动对象或运行一些 javascript 代码的任何您想要的内容。当您执行了要测量的 javascript 后,返回到相同的菜单选项并再次单击“配置文件 javascript”(使其取消选中)。现在控制台选项卡将填满您之前运行的所有操作以及执行每个方法所花费的时间等(以及总时间)。

你在做 3 年之前读过这个问题吗?这是第一行“这个问题与加载时间无关;我知道 YSlow,Firebug 分析器”
2021-04-29 18:46:03
他实际上回答了这个问题(比大多数人都回答得好)。他在这里描述的不是如何测量加载时间,而是脚本执行时间(这是一个非常好的性能指标),这正是问题所在。
2021-05-11 18:46:03