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.尽量避免添加大型脚本文件，因为您只使用了一小部分功能。在页面加载时，可能会花费大量时间来解析和执行代码，而这些时间是你永远不会用到的！如果可能，只提取需要的相关代码。我意识到这可能很难，而且并不总是可能的，特别是当涉及到版本控制时，但仍然值得指出。