如何优化 javascript/jquery 代码以加快其性能？答案

【问题标题】：How to optimize javascript/jquery code to speed up it's performance?如何优化 javascript/jquery 代码以加快其性能？
【发布时间】：2012-10-22 22:10:37
【问题描述】：

在我的一个网络项目中，我使用了大量的 javascript/jQuery 代码，这在浏览器（Windows 7 x64）上非常慢，尤其是在 IE 上。

我只在主页上同时使用 3 个 Ajax 请求。

在搜索页面上，我还使用 ajax 请求，这些请求在滚动事件、任何“搜索标记”（简单的锚标记）单击事件等上触发，这通常会使数据加载非常缓慢。

我使用 jQuery 插件，例如，Anythingslider、jquery coockies 插件、Raty（评级插件）、Tipsuy、jQuery coreUISelect、jScrollPane、鼠标滚轮等。我在 jquery.plugins.js 中缩小并组合了所有这些 3rd 方插件文件，差不多 80KB。

我用 jQuery 选择了很多 DOM 元素。例如我使用以下代码：

$("#element")

代替：

document.getElementById('element');

我还有一个很大的 CSS 文件，超过 5000 行，因为我已经将所有 3rd 方 jQuery 插件的 css 文件合并到一个文件中，用于缓存和减少 HTTP 请求。

嗯，我想知道，我可以做些什么来优化我的代码以获得更好的性能和加快网页加载速度？
我可以使用哪些工具来调试我的 JS 代码？我忘了提到，当我在 Google Chrome 或 Firefox 中刷新页面并打开 firebug 或 Chrome 原生开发工具时，在这种情况下页面加载也很慢。有时 Firefox 甚至被压垮了。
使用原始 js 选择 DOM 元素会给我一种更好更快的方式来解析文档吗？还是我应该离开，jQuery 选择？谈论的是大约50个元素。
我是否应该分离并缩小外部插件，例如 Anythingslider？或者当我拥有“all in one” js 文件时会更好吗？
将 jQuery 插件的 css 代码与 main style.css 分开是否更好？因为即使悬停在元素上并影响 css 文件中的 :hover 状态，也非常慢。

伙计们，我真的指望你们了。

我整晚都在谷歌上搜索我的问题的答案，我真的希望在这里找到答案。

谢谢。

【问题讨论】：

查看 PageSpeed: developers.google.com/speed/pagespeed 并从建议中尽你所能
另外.. 将 js 和 css 脚本分别放在文件中的想法是浏览器将缓存这些文件并在第一次运行后加快加载速度.. 有多少文件并不重要你有..一个或多个..结果将是相同的

标签： javascript jquery performance

【解决方案1】：

1) 缩小它

2) 所有浏览器都自带调试工具

3) 通过将引用存储在变量中来减少对 dom 的访问，不要两次查找相同的元素

4) 分离并使用众所周知的 cdn

5) 分开只是因为它更容易管理

更多 jQuery 技巧在这里：jquery-performance-rules 和这里：improve-your-jquery-25-excellent-tips。

确保所有静态资源都已缓存，无需查找磁盘

This library 很酷

【讨论】：

【解决方案2】：

您可以在此处比较选择器性能：http://jsperf.com/

只需设置您的 HTML 代码，包含 jQuery 库并将您想要比较的每个选择器作为各种测试用例放置。

许多jquery-performance-rules 仍然适用，

也可以看这里jquery-proven-performance-tips-tricks

【讨论】：

【解决方案3】：

由于有很多方法可以改进代码，尤其是对于像您这样的大型网站，我认为只发布外部链接会更有用，因为这些是编写得非常好且简洁的教程和工具。以下是其中一些：

Yahoo's tutorial，我知道的最完整的教程之一
W3Schools' tutorial 关于使用图像精灵，当页面上有很多小图像时特别有用
Tips on efficient jQuery usage
Firebug，用于调试 javascript、html、css 的 Firefox 插件
HTML validator，对于快速查找标记中的错误非常有用
HTML compressor 用于缩小您的 HTML 代码（网络上有很多用于此目的的工具，只需找到最好的）
CSS compressor，与 HTML 相同

我还推荐使用 IDE 来构建名为 JetBrains' PHPStorm 的 Web 应用程序/网站。它是商业软件，但绝对物有所值，因为它在打字时提供了改进提示和技巧。

【讨论】：

phpstorm 专门用于 php，jetbrains 也做 webstorm，看起来更合适（还有很多其他的，我使用 intellij 并同意，他们做出了很棒的产品）
嗯，PHPStorm 拥有 WebStorm 的所有功能，以及对 PHP 的支持。这是 JetBrain 网站上的描述 - jetbrains.com/phpstorm。它比 WebStorm 贵几美元，但最终可能还需要对 PHP 的支持。
我把 CSS 文件放在顶部，JS 文件放在底部。我也使用图像精灵。 PHPStorm 是我使用的 IDE。另外，我已经用 jquery 缓存了 body 标签： var body = $('body'); body.on('click', 'selector', function(e) { MyFunction(); e.preventDefault(); });
@MikeJohnson 问题是关于 javascript 的。关于 php 的说法越少越好，恕我直言。

【解决方案4】：

原始性能可能不是您的问题。如果您发现页面加载性能不佳，请参阅我专门撰写的关于在页面初始化时最小化 javascript 执行的这篇文章。

http://blog.lavoie.sl/2013/12/optimizing-page-loads-by-reducing-javascript.html

【讨论】：