加载jquery - 阻止CDN服务器往返

时间:2016-03-22 01:45:00

标签: javascript jquery html html5 cdn

我的页面从https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

加载jQuery

在重复加载时,查看chrome dev工具网络选项卡,我看到jquery.min.js返回状态为' 304 Not Modified'时间/延迟有时高达一秒。

我还可以在devtools中看到jquery的响应标题是' Expires:Thu,20年12月31日23:55:55 GMT' ,它仍然返回304

对于我的网站的其他文件,例如cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js,我看到返回状态为' 200 OK'和'(来自缓存)'大小不足,他们有超短的时间/时间(我猜这意味着100%缓存结果没有远程往返)

如何告诉浏览器缓存中是否存在jquery url以使用而没有任何远程流量?我的网站需要尽可能快的加载时间。

THX!

2 个答案:

答案 0 :(得分:1)

当Chrome将文件(例如您的jquery.min.js文件)放入缓存时,它会跟踪服务器上次修改的时间。每当它再次看到该文件时,它会询问服务器是否已更改,并且您看到的304响应表明服务器已确认没有更改,Chrome应使用缓存版本。

如果没有这样的检查,您的页面就无法知道您提供的网址上的文件是否已更改。另请参阅答案:How “304 Not Modified” works?

但是,浏览器并不总是必须进行此项检查。正在提供的文件也具有Expires值,告诉浏览器在检查是否有更改之前需要等待多长时间。如果之前提取的文件没有“过期”,浏览器将直接使用其缓存中的文件。

当您看到200 OK以及(from cache)指示符时,表示该文件直接来自缓存。

请参阅:

What is the difference between HTTP status code 200 (cache) vs status code 304?

Yahoo's performance best practices

答案 1 :(得分:1)

使用F5刷新将始终向Web服务器请求所有资源 - 即使其中大部分资源将以304返回。

这是设计并且是一件好事 - 用户通常不应该手动刷新页面,如果他们这样做,那么你应该给他们机会获取更新的资源。

我建议通过打开Fiddler进行测试(只是为了避免在Chrome开发工具中查看缓存响应的噪音),并像普通用户一样行动,并查看在正常用户会话期间实际发生了多少HTTP流量,看看是否有任何你真正可以调整的东西。

相关问题