加载jQuery库内联是一种减少渲染时间的有效方法吗?

时间:2012-10-01 23:32:57

标签: http http-headers shared-libraries

This围绕gzip进行讨论,缩小并结合两者以获得最大压缩效果让我想知道是否可以通过将jQuery库直接放在我的HTML文件中来获得净效果?

我已经为icon sprite做了这个,我对base64进行编码,然后通过CSS数据源加载,以尽量减少HTTP请求的数量。

现在我问:你知道如果加载jQuery库的原始min + gzip形式,正如官方生产下载链接所提供的那样,与通过托管在其上的Google AJAX库加载它相比,效率更高CDN?

1 个答案:

答案 0 :(得分:1)

TL; DR:

您应该始终在外部文件中保留常用项目(如JS库),因为这样可以在服务器上,浏览器中以及沿途的许多节点上进行缓存。在查看页面的整体速度时,缓存时间大大超过压缩或请求时间。

更长版本:

这个问题需要考虑很多事情。以下是那些脱颖而出的。

  1. 缩小脚本和样式总是有利于提高速度。我认为这里没有太多讨论。

  2. 压缩(以及浏览器中的提取)会产生开销。启动gzip模块需要一些时间来发送请求,因此对于小文件或二进制文件(图像等),跳过gzip通常更好。然而,一些大的并且主要由ascii组成的东西(比如JS库)是压缩的好东西,所以检查出来。

  3. 减少HTTP请求通常是件好事。但请注意,自HTTP 1.1(所有主流浏览器都支持)以来,新的HTTP请求并不意味着新的套接字连接。使用keep-alive,相同的套接字连接可以一次性为网页和所有附属文件提供服务。请求的唯一额外开销是请求和响应标头,除非您有许多小图像/脚本,否则这些标头可以忽略不计。只需确保这些文件来自cookie-free domain

  4. 与第3点相关,在页面中嵌入内容确实有减少HTTP请求的好处,但它也有增加页面本身大小的缺点。对于像JS库这样大的东西,库的大小远远超过额外文件所需的HTTP开销的大小。

  5. 现在这里是踢球者:如果库嵌入页面中,它几乎不会被缓存。首先,大多数(所有?)主流浏览器默认不会缓存主HTML页面。如果需要,您可以向页眉添加CACHE-CONTROL元标记,但有时这不是一个选项。此外,即使该页面被缓存,其他页面(可能也使用该库)现在也需要缓存。突然间,您将整个站点缓存在用户的计算机上,包括许多JS库的副本,这可能不是您想要对用户做的。另一方面,如果您将JS库作为外部文件,它可以自己缓存一次,特别是(如@Barmar所述)如果库是从像谷歌这样的普通CDN加载的。

  6. 最后,缓存不仅发生在客户端的浏览器中。如果您正在运行企业级服务,则可能有多个具有共享和单个缓存的服务器池,具有快速速度的CDN缓存,到您的域的路上的代理缓存,甚至某些路由器和其他设备上的LAN缓存。所以现在我指引你回到TL;顶部的DR,说你可以通过缓存获得的加速(特别是在浏览器中)胜过你可能遇到的任何其他考虑因素。

  7. 希望有所帮助。