Javascript (jQuery) 性能测量和最佳实践(不是加载时间) [英] Javascript (jQuery) performance measurement and best practices (not load time)
问题描述
我会直接说这个问题与加载时间无关；我了解 YSlow、Firebug 分析器，以及谷歌搜索中关于页面组件加载时间的任何最佳实践和工具.
I'll say right off the bat that this question is NOT about load times; I know about YSlow, the Firebug profiler, and whatever best practices and tools googlage reveals about page component load times.
我在问有哪些好的分析工具或库或附加组件可用于衡量 Javascript(特别是 jQuery)的实际执行情况，以改善实际用户体验.例如，测量从点击到在屏幕上显示可见结果的时间，或帮助确定基于 jQuery 的悬停效果响应缓慢的原因.
I am asking what good profiling tools or libraries or add-ons there are for measuring actual execution of Javascript (specifically jQuery), insofar as improving actual user experience goes. For example, measuring the time from click to visible result on-screen, or helping to determine why a jQuery-based hover effect has slow responsiveness.
我们注意到，当页面/DOM 变得相对较大时(例如，70kb 到 150kb 的 HTML，不包括外部 CSS、JS 和图像)，和/或具有非常深的嵌套(从
开始的 14-25 级); 到最深的标签)，jQuery 事件触发更慢，或者整个 JS 用户体验变得缓慢.We are noticing that when the page/DOM grows relatively large (say, 70kb to 150kb worth of HTML, excluding external CSS, JS and images), and/or has very deep nesting (14-25 levels from <body> to deepest tag), jQuery events fire more slowly, or the whole JS user experience gets sluggish.
我还搜索并了解了选择器的最佳实践(例如，通过 id 选择比通过类选择快得多)，我将实施这些实践.然而，一旦所有的 jQuery 都被完全加载，并且所有的事件都被挂钩，我们仍然需要改进实际的事件触发和执行.
I also have googled and learned about best practices for selectors (e.g. selecting by id is much faster than selecting with classes), I will be implementing these practices. However, once all jQuery is fully loaded, and all events hooked, we still need to improve the actual event firing and execution.
我已经实现了一些事件委托，我确实感觉到钩子 DOM 元素越少越好，但整体体验仍然需要改进大页面.我应该提到的是，由于该站点是 AJAX 密集型的(很多是通过 AJAX 加载的，而不是最初的 HTTP 命中)，我们大量使用 livequery 而不是普通的 jQuery 事件挂钩.我还要提一下，我们稍微更关注 IE(7+) 的性能，但也需要良好的 Firefox 性能.
I have implemented some event delegation already, and I do get the sense that having fewer hooked DOM elements makes things slightly better, but the overall experience still needs improvement with large pages. I should mention that, since the site is AJAX heavy (lots is loaded via AJAX as opposed to initial HTTP hit), we are making heavy use of livequery instead of the plain jQuery event hooks. I should also mention that we are slightly more focused on IE(7+) performance, but also require good Firefox performance.
在我开发和进行更改时，我认为我需要一种方法来衡量更改前后的速度，以便我可以了解更改是否可以改善任何事情的具体数字.
As I develop and make changes, I figure I need a way to measure speeds pre- and post-change, so I can have concrete numbers on whether or not a change improves anything.
任何提示、工具、库、博客文章、网址?
Any tips, tools, libs, blog posts, URLs?
推荐答案
JSLitmus 看起来像我可以试试.
JSLitmus looks like something I might try out.
这篇关于Javascript (jQuery) 性能测量和最佳实践(不是加载时间)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
