Javascript执行时间非常慢 - Chrome

Question

我创建的网页在单个文件中包含JavaScript但尺寸非常高。当我运行该页面时，Chrome的加载时间非常长。 仅供参考：由excel工具创建的脚本文件，其中包含许多隐藏字段和脚本，但需要使应用程序工作所需的一切。

你有没有人经历过同样的事情，我们可以为此做出什么样的解决方案？ 在此先感谢。

Answer 1

你可以做几件事：
- 缩小脚本（例如使用Google封闭编译器）
- 合并您的脚本（减少请求数量）
- 打开gzip压缩
- 在身体标签的末尾加载脚本
- 使用CDN，防止从同一位置加载脚本（大多数浏览器只能从同一位置同时加载2个文件）

看一下YSlow插件和Google PageSpeed，它们在提高性能方面都非常有用。

Answer 2

通过一个结合并缩小它的脚本运行它。现在大多数构建系统都有插件可以做到这一点。这就是我们在构建过程中将大约1.5mb的JavaScript压缩到大约500kb的方式。

Answer 3

将脚本组合成尽可能少的文件，然后缩小它们。还要在页面末尾加载脚本。

Answer 4

铬中缓慢加载没有“通用”问题。这一切都取决于个别脚本。

您需要确定1）哪个脚本通过消除过程导致缓慢加载，然后2）脚本的哪个部分加载缓慢，然后您可以采取补救措施。

这可能包括缩小或代码重构。

fiddler2等工具可以帮助您跟踪此时间，因为您可以查看单个页面项目的加载时间。

Answer 5

Chome的审计工具可以告诉你很多为什么会发生这种情况，你应该包括更多的信息：

1. 连接服务器需要多长时间？
2. 转移内容需要多长时间？
3. 您同时在该页面上加载了多少其他内容？

无论如何，即使没有这一切，这里还有一个提高你性能的清单：

1. 确保您的javascript被视为静态内容，例如通过nginx / apache /无论是直接还是cdn，都没有达到您的应用程序框架
2. 调查您是否可以使用CDN来提供javascript，有时甚至将不同的域名指向您的服务器会产生积极的影响，例如：而不是http://example.com/blah.js - ＆gt; http://cdn2.example.com/blah.js
3. 确保您的js提供了正确的过期标头，每次客户端刷新页面时都不要重新下载
4. 开启js内容的gzipping
5. 使用不同的工具缩小你的js
6. 将您的脚本标记放在</body>
之前
7. 调查并清理/优化您的onload和document.ready hooks

Answer 6

你应该确定花时间。 FF和Chrome都具有显示网络流量的功能。看看yslow，他们对Firebug有很好的补充。