JavaScript-使用缓存文件或一个或多个HTTP请求？

在所有“加快网站访问速度”的网站和书籍上,他们总是告诉我们不惜一切代价将HTTP请求最小化.很好,但是如果那意味着由于用户缓存为空,您必须一次又一次地重新加载120kb,该怎么办？

如果我在网站的每一页上使用5个js文件,最好将它们放在一个文件中并在每一页上加载此文件,而不是将它们与所有其他变量文件一起放在一个大文件中并保存一个HTTP请求.从哪个角度或文件大小可以“缓存”文件并有另一个HTTP请求？

我仅以一个HTTP请求为每页一个小型JS文件使用3个页面的示例：

> jquery,jquery ui,thickbox,lavalamp菜单=>压缩成一个文件= 300kb
> jquery,jquery ui,循环插件=>一起缩小到一个文件=> 200kb
> jquery,jquery ui,Galleria插件=>一起缩小到一个文件=> 250kb

现在,总有2个HTTP请求的另一种可能性：一个文件由jquery和jquery ui =>组成. 150kb,现在将其称为“ jui.js”

> jui.js,thickbox,lavalamp =开头又是300kb,但现在jui.js会为其他2页缓存
>(jui.js现在已缓存,因此未加载),仅循环插件=>仅加载50kb,但由于我分别加载jui.js和cycle插件,因此又有一个HTTP请求.
>(jui.js已被缓存),仅加载Galleria插件=>只需再加载100kb,但再加载2个HTTP请求,其中一个请求已被缓存

那么什么时候可以在正常的“响应式” Web服务器上发出另一个HTTP请求呢？

是否有人有最佳实践,还是“不惜一切代价最小化HTTP请求！”？

(我希望我明确表示自己：)一旦我有观点,我就会投票赞成！)

编辑：

基本上,这是一个简单的问题：
缓存的js文件的额外HTTP往返需要多长时间？如果http请求的速度比我需要在每页上下载多余的非缓存部分的时间慢,那么我会将所有内容放在每页1个大文件中(每页1个不同的大文件).

如果对缓存的js文件的HTTP请求几乎没有,那么我会将每个页面所需的部分拆分到一个额外的js文件中(当然也要尽量减少),并将每个页面的动态部分都包含在differentend(再次最小化)的js文件中.

因此,如果在大多数页面上我需要额外的100kb(动态部分),该如何测试缓存的HTTP请求的时间？有没有数字,有人已经测试过类似的东西吗？

感谢您的出色回答！

解决方法:

这是一个复杂的大课题.他们就这个主题写了整本书；)

对于资源(javascript,css等),有时最好单独下载.浏览器将并行下载它们.如果页面a需要资源x y z但页面b只需要x和z,则将它们分开是一件好事.有时,最好一次下载每个页面上所需的资源.这取决于.

但是使用javascript时,浏览器会在呈现页面之前先下载JS(如果script标签在头部),因此,如果添加defer属性或在页面底部添加并触发,您会看到更好的性能您的JavaScript,其中body = onl oad.

还要记住,您可以在资源上设置缓存头,以便浏览器将其缓存在内存或磁盘中.在许多情况下,这会带来巨大的不同.

确实没有硬性规定,只有一些准则.最好的选择是测试！通过拨号更有效的方法在宽带上不起作用.

Fiddler是一个不错的程序,例如,如果您在调制解调器上,它将向您显示加载时间.

标签：caching,request,http,minify,javascript
来源： https://codeday.me/bug/20191107/2002772.html