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()$等方法c $ c>
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屋!