jQuery/Javascript 框架效率

发布于 2024-09-04 15:40:17 字数 376 浏览 3 评论 0原文

我的最新项目是使用 javascript 框架 (jQuery) 以及一些插件（验证、jquery-ui、datepicker、facebox...）来帮助制作现代 Web 应用程序。

我现在发现页面加载速度比我习惯的要慢。经过一些 js 分析（感谢 VS2010！），似乎很多时间都花在了框架内部的处理上。

现在我明白了ui工具越复杂，需要做的处理就越多。该项目尚未达到大型阶段，我认为功能将是平均水平。在这个阶段，我可以看到它不会很好地扩展。

我注意到 jQuery 中的“each”命令需要相当多的处理时间。

其他人在使用 JS 框架时是否遇到过一些额外的延迟？如何最大限度地减少它们对页面性能的影响？是否有使用 JS 框架实施的最佳实践？

谢谢

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞别 2024-09-11 15:40:17

我个人的看法是在有意义且让生活更轻松的地方使用框架方法和工具，例如选择器和解决跨浏览器的怪癖，并在不需要使用框架方法的地方使用普通的旧版 JavaScript，例如，在简单的循环中。

我会检查并仔细检查您使用该框架的代码，以确保其性能良好；以性能不佳的方式使用框架太容易了，有时直到人们对其进行分析后才发现这一点：）

框架确实会引入额外的延迟，因为通常会由于使用框架而执行许多功能使用它们的入口点函数。

编辑：

有关使用 jQuery 的一些一般要点：

1. 如果您要多次使用 jQuery 对象，请将它们缓存在局部变量中。查询 DOM 是一项相对昂贵的操作，因此应该尽可能少地执行。如果您有相关的选择器，请考虑执行广泛的选择，然后使用诸如 find()、filter() next() 等方法code>、prev() 等来过滤集合以获取您可以使用其他选择器函数获取的相关元素。

2.在函数内部，不必要时不要将对象包装在 jQuery 对象中。如果有一种可靠的跨浏览器方式来访问对象属性值，那么就使用它。例如，文本输入 HTMLElement 的 value 属性

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 });

3. 尽量避免在仅使用一小部分功能的情况下添加大型脚本文件。在页面加载时可能会花费大量时间来解析和执行您永远不会使用的代码！如果可能，仅提取所需的相关代码。我知道这可能很困难并且并不总是可行，特别是在版本控制方面，但仍然值得指出。

My personal take is to use the framework methods and tools where they make sense and make life easier, for example selectors and solving cross-browser quirks, and to use plain old vanilla JavaScript where there is no need to use the framework methods, for example, in simple loops.

I would check and double check the code that you have that uses the framework to ensure that it will perform as well as it can; it is all too easy to use a framework in a poor performing fashion and sometimes one doesn't discover this until one profiles it :)

Frameworks do introduce extra latency as there are usually a number of functions that are executed as a result of using the entry point function into using them.

EDIT:

Some general points with regards to using jQuery:

1.cache your jQuery objects in local variables if you are going to use them more than once. Querying the DOM is a relatively expensive operation and therefore should be done as little as is needed. If you have related selectors, take a look at performing a wide selection and then using the methods such as find(), filter() next(), prev() etc to filter the collection to get the relevant elements that you would have usedanother selector function to get.

2.Inside of functions, don't wrap objects in jQuery objects unneccessarily. If there is a cross browser way of accessing an object property value that is reliable, then use that. For example, the value property of a text input HTMLElement

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 });

3.Try to avoid adding large script files where you're using only a small piece of the functionality. There can be a lot of time spent parsing and executing code on page load that you're never going to use! If possible, extract only the relevant code that is needed. I appreciate that this can be hard and is not always possible, particularly when it comes to versioning, but it's worth pointing out nonetheless.

回复收藏 0 原文

~没有更多了~