Javascript(jQuery)性能测量和最佳实践(不加载时间) [英] Javascript (jQuery) performance measurement and best practices (not load time)

查看:101
本文介绍了Javascript(jQuery)性能测量和最佳实践(不加载时间)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我会马上说这个问题不是关于加载时间;我知道YSlow,Firebug分析器,以及googlage显示页面组件加载时间的最佳实践和工具。

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和图像),和/或具有非常深的嵌套(从< body>到最深标签的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.

我也用Google搜索并了解了选择器的最佳实践(例如,通过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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆