加载许多小的JavaScript文件或一个大的JavaScript文件是否更好？ [英] Is it better to load many small JavaScript files or one large JavaScript file?

问题描述

我在Chrome中注意到，如果我将图像作为base64字符串加载，然后滚动浏览页面的那一部分，它将会变慢。

I have noticed in chrome that if I load an image as a base64 string and then scroll through that part of the page it will slow down.

我也有注意到当我用一个Javascript导航出一个标签，然后回到那个标签时，它会慢几秒钟，好像V8正在重新编译js。

I have also noticed that when I navigate out of a tab with my Javascript in it and then move back to that tab it will be slow for a few seconds as though V8 is recompiling the js.

我可以想到三个选项，但我不知道哪个是最好的：

There are three options I can think of but I don't know which is best:

1. 首先加载一个小的加载页面并处理雄辩地后续加载


2. 用一切加载一个巨大的js或css文件（jquery +我的代码+等）


3. 将某些代码聚集在一起（使用jquery cdn但是将我的代码组合在一起）

尽可能快速，雄辩地加载js的最佳方法是什么？

What is the best way to get your js loaded as quickly and eloquently as possible?

推荐答案

通常，加载更多文件会在HTTP中产生更多的开销，而不是将它们合并到更少的文件中。有各种方法可以组合各种内容的文件：

Generally, loading more files incurs more overhead in HTTP than combining them into fewer files. There are ways to combine files for all kinds of content:

• 对于图像，使用 CSS sprites 。


• 对于javascript，将客户端代码和库编译成一个文件，并缩小以减小大小。


• 对于CSS，您可以执行与上述类似的操作。例如，下摆编写手写笔到一个css文件中，这也可以在组织上有所帮助。


• 此外，当您连接Javascript和CSS时，您的网络服务器或反向代理可以发送它们以压缩形式，以加快页面加载速度。这对于较大的文件会更有效，因为压缩可以获得更多。

• For images, use CSS sprites.
• For javascript, compile your client-side code and libraries into one file, and minify to reduce size.
• For css, you can do something similar to the above. hem compiles stylus into one css file, for example, and this can help organizationally as well.
• Additionally, when you concatenate Javascript and CSS, your webserver or reverse proxy can send them in compressed form for faster page loads. This will be more efficient for larger files as there is more to gain from compression.

这篇关于加载许多小的JavaScript文件或一个大的JavaScript文件是否更好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！