jQuery/Javascript 框架效率

Question

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

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

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

我注意到 jQuery 中的“每个”命令之类的东西需要相当多的处理时间。

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