jQuery / Javascript框架效率

Question

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

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

现在，我了解ui工具越复杂，需要完成的处理越多。 该项目尚未进入大型阶段，我认为这将是平均职能。 在这个阶段，我可以看到它的伸缩性不好。

我注意到诸如jQuery中的“ each”命令之类的事情需要花费大量的处理时间。

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

谢谢

Answer 1

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

我将检查并仔细检查您使用该框架的代码，以确保其性能良好。 以性能低下的方式使用框架太容易了，有时只有在对其进行概要分析后才发现它：)

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

编辑：

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

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

2.在函数内部，不要不必要地将对象包装在jQuery对象中。 如果存在跨浏览器的方法来访问可靠的对象属性值，请使用该方法。 例如，文本输入HTMLElement的value属性

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

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

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