jQuery / Javascript框架效率 [英] jQuery/Javascript framework efficiency

问题描述

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

My latest project is using a javascript framework (jQuery), along with some plugins (validation, jquery-ui, datepicker, facebox, ...) to help make a modern web application.

我现在发现页面加载速度比我习惯的慢。经过一些js剖析（感谢VS2010！），似乎很多时候都是在框架内进行处理。

I am now finding pages loading slower than I am used to. After some js profiling (thanks VS2010!), it seems a lot of the time is taken processing inside the framework.

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

Now I understand the more complex the ui tools, the more processing needs to be done. The project is not yet at a large stage and I think would be average functions. At this stage I can see it is not going to scale well.

我注意到jQuery中的'each'命令之类的事情需要相当多的处理时间。

I noticed things like the 'each' command in jQuery takes quite a lot of processing time.

让其他人使用JS框架经历了一些额外的延迟吗？
如何最小化它们对页面性能的影响？
是否有使用JS框架实现的最佳实践？

Have others experienced some extra latency using JS frameworks? How do I minimize their effect on page performance? Are there best practices on implementation using JS frameworks?

谢谢

推荐答案

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

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.

编辑：

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

Some general points with regards to using jQuery:

1.如果你打算使用本地变量中的jQuery对象他们不止一次。查询DOM是一项相对昂贵的操作，因此应该尽可能少地完成。如果您有相关选择器，请查看执行广泛选择，然后使用 find（）， filter（） next（）， prev（）等过滤集合以获取相关元素已经使用了另一个选择器函数来获取。

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.在函数内部，不要不必要地在jQuery对象中包装对象。如果存在跨浏览器方式访问可靠的对象属性值，则使用该方法。例如，文本输入的值属性HTMLElement

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.尽量避免在只使用一小部分功能的情况下添加大型脚本文件。在页面加载上解析和执行代码可能会花费大量时间，而您永远不会使用它们！如果可能，仅提取所需的相关代码。我很欣赏这可能很难并且总是不可能，特别是在版本控制时，但值得指出。

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.

这篇关于jQuery / Javascript框架效率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！