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



围绕gzip、minimied和将两者结合以获得最大压缩效果的讨论让我怀疑是否可以通过将jQuery库直接放置在HTML文件中来获得净性能效果?

我已经为图标精灵做了这件事,我对其进行了base64编码,然后通过CSS数据源加载,以尽量减少HTTP请求的数量。

现在我想问:你知道吗,以官方生产下载链接上提供的原始min+gzip形式加载jQuery库,与通过CDN上托管的Google AJAX库加载相比,是否会更高效?

TL;博士:

您应该始终将常见项(如JS库)保存在外部文件中,因为这样可以在服务器、浏览器和许多节点上进行缓存。从页面的总体速度来看,缓存时间大大超过了压缩或请求时间。

较长版本:

对于这个问题,有许多事情需要考虑。这是我脑海中浮现的那些。

  1. 最小化脚本和样式总是有利于速度。我认为这里没有什么可讨论的。

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

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

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

  5. 现在关键是:如果库嵌入到页面中,它几乎永远不会被缓存。对于初学者来说,大多数(所有?)主流浏览器默认情况下不会缓存主HTML页面。如果需要,可以在页眉中添加CACHE-CONTROL元标记,但有时这不是一个选项。此外,即使该页面被缓存,您的其他页面(可能也在使用库)现在也需要被缓存。突然间,你的整个网站都缓存在用户的机器上,包括JS库的许多副本,这可能不是你想对用户做的。另一方面,如果你把JS库作为一个外部文件,它可以自己缓存一次,尤其是(正如@Barmar所说)如果库是从谷歌这样的通用CDN加载的。

  6. 最后,缓存不仅仅发生在客户端的浏览器中。如果您运行的是企业级服务,您可能有多个服务器池,其中包含共享和单独的缓存、速度快得令人眼花缭乱的CDN缓存、正在前往域的代理缓存,甚至一些路由器和其他设备上的LAN缓存。所以现在我指引你回到TL;DR在顶部,也就是说,通过缓存(尤其是在浏览器中)可以获得的加速超过了你可能遇到的任何其他考虑。

希望能有所帮助。

最新更新