我在chrome中注意到，如果我将图像作为base64字符串加载，然后滚动浏览页面的那一部分，它将会变慢。
我还注意到，当我使用我的Javascript导航出一个标签，然后返回到该标签时，它会慢几秒钟，好像V8正在重新编译js。
我可以想到三种选择，但我不知道哪种选择最好：
尽可能快速，雄辩地加载js的最佳方法是什么？
答案 0 :(得分：14)
通常，加载更多文件会在HTTP中产生更多的开销，而不是将它们合并到更少的文件中。有各种方法可以组合各种内容的文件：
答案 1 :(得分：8)
有太多的maybes可以为此提供任何有保障的解决方案，但是你可以去：
1）在顶部加载CSS - 如果你正在做一个有多个页面的网站，那么将它加载到那里。 如果您正在构建一个单页应用程序（您在同一页面上运行画廊和Twitter提要和文章等，并且您可以打开和关闭不同的部分），那么您可以考虑加载特定于小部件的CSS，您加载小部件的时间（如果在启动时不需要）。
不在CSS中使用@import，如果你想快速加载（你这样做）。
2）将绝大多数JS加载到页面底部。
在DOM准备好之后，几乎没有什么不能延迟加载，或者至少不能在页面底部初始化，如果确实存在，请将它们作为单独的文件放在顶部。页面，并考虑如何重写以减少对它们的依赖。
3）小心定时器 - 尤其是setInterval ......你可以通过管理不善的定时器让你的页面性能陷入很大的麻烦。
4）在窗口滚动，调整大小，鼠标移动或按键等事件上更加小心处理事件处理程序。这些东西每秒都会激发很多次，所以如果你编写了依赖于它们的花哨程序，你需要重新思考如何激活程序（即：每次处理程序关闭时都不要运行它）。 / p>
5）提供JS文件是一种权衡：
编译JS需要一段时间。因此，如果您在一个文件中加载40,000行，那么您的浏览器将暂停一段时间，因为它会编译所有内容。
如果您提供18个单独的文件，那么您必须进行18次不同的服务器调用
这也不酷。
所以一个很好的平衡就是将你知道你需要的那些文件连接在一起，然后在页面上加载任何可选的东西（比如用于添加注释的小部件，或者灯箱小部件）等。） 并且在所有主要产品启动并运行后延迟加载它们，或者在最后一秒加载它们（例如当用户点击“添加注释”按钮时）。
如果您需要在应用中加载40,000行，一旦启动，然后点击，或决定您可以加载每个行的顺序，并提供“加载”指标（您应该在每个小部件的延迟加载，直到它准备就绪（一次加载一个小部件）。
这些是解决一般性能问题的指南 即使您将网站直接放在您面前，详细信息也很难回答。 使用Chrome开发者控制台分析信息和网络性能，以及渲染性能等等。
答案 2 :(得分：2)
有一个名为 concatenation 的非常受欢迎的概念。我们的想法是尽可能少地向您的服务器发送HTTP请求。因为每个请求都意味着发生DNS查找的新连接，然后协商握手，然后在几个基于协议的步骤之后，服务器将请求的文件作为响应发送。
您可以查看http-archive以获取效果最佳做法列表。
所以是的，你应该将所有JS文件合并为一个（有一些例外，比如js at head和js in footer）
这是你的问题标题和第2点和第2点的答案。 3.
至于其他部分，我不清楚你所说的情景。
答案 3 :(得分：1)
我最近遇到了同样的问题，然后我开发并发布了一个JS库（MIT许可证）来做到这一点。基本上，您可以将所有内容（js，images，css ...）放入标准tar存档（可以创建服务器端），并且库读取它并允许您轻松使用这些文件。
您可以在此处找到它：https://github.com/sebcap26/FileLoader.js
适用于所有最近的浏览器和IE＆gt; = 10。
答案 4 :(得分：0)
要加载的文件数会影响整个站点的加载速度。我建议将所有必需的功能打包到单个javascript文件中，以便网站正常显示。