博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用CDNs和Expires改善网站性能(译文)
阅读量:5339 次
发布时间:2019-06-15

本文共 4223 字,大约阅读时间需要 14 分钟。

  已经有很多文章写过使用CDN(Content Delivery Network,内容交付网络)来实现静态内容(JQuery,images,CSS文件等)的优点了。(如果你还不熟悉CNDs,请看这篇博客,英文版,),但是CNDs最大的优势经常被忽视:

  • 许多主要的站点都是用CDN,所以很有可能你的客户浏览器缓存已经包含了来自CDN的JQuery。当另一个站点要从Microsoft CDN加载一个JQuery版本的时候,但是如果你的客户端缓存的JQuery版本满足这个请求,这样就不会再去Microsoft CDN重新下载。
  • 一旦内容从CDN中加载,如果内容是当前存在的,将来的请求不会引起与服务器的往返开销(即不会再向服务器发送请求),也就是说,客户端避免了HTTP 304。
  • 服务器集群不需要协调ETag缓存验证。

  下面将会用Fiddler工具和来说明使用CDN的优势。

  快速浏览浏览器缓存

  浏览器缓存有两种主要机制:

  • 在浏览器缓存中验证所请求的资源与服务器上是相同的。如果资源是相同的,服务器会返回一个HTTP 304响应,从而避免发送响应主体与内容的需要。许多人认为HTTP 304是一件好事,因为他们不需要发送一个完整的响应体。我将展示它们(HTTP 304响应)通常是对性能的拖累,因为这涉及到和服务器不必要的往返。
  • 保鲜(Freshness):如果缓存中的资源是新的(fresh),则直接从缓存中提取资源不需要校验服务器。

  浏览器使用一种新鲜的启发式(freshness heuristic)来确定是否应该用服务器验证资源还是从缓存中获取资源、如果你清楚浏览器缓存,然后点击我的电影示例,将会下载几个静态文件到客户端缓存(JavaScript,CSS和images)。用IE9,Chrome和Firefox,你可以在接下来的几天里点击电影网站,浏览器会从浏览器的特定缓存中换区这些文件作为服务,甚至不需要检查服务器。浏览器将缓存这些静态文件,而不需要对服务器进行验证,除非下面的几种情况有一条为true。

  • 不满足新鲜启发式(freshness heuristic)(也就是说,缓存中的文件不被认为是最新的)。
  • 你已经更改了过期头(expires header)或其他缓存头。
  • 你已经设置了浏览器禁用缓存(caching)。
  • 资源更改了或者URL不同了。例如,下面的URL都是指向相同的modernizr脚本,但是因为每个URL是不同的,所以必须下载每个资源。

  第一个和最后一个modernizer文件时由Cassini(默认的Visual Studio Web服务器)或是IIS Express服务器提供的,这就是为什么我们会看到端口号。中间的两个文件是由本机器IIS服务器提供的,但是使用了两个不同的主机名(localserver和实际名称q1)。你可以通过在General选项卡上选择浏览历史记录下的设置按钮,然后选择视图文件来检查IE9缓存。·

  ··

  每个浏览器都有自己的缓存,所以Firefox不会使用由Chrome或IE缓存的文件。

  下面的图片显示了一个浏览我的电影网站的Fiddler会话。因为我已经好几天没有浏览电影网站了,IE9被迫验证了modernizr和customerjQuery文件。

  

  在Fiddler中选择缓存选项卡,其中给出了为什么需要验证的详细信息,以及在不需要服务器验证的情况下,浏览器将在多长时间内可以直接只用这些文件。在下面的示例中,在接下来的2天19小时20分钟内,IE9将直接从缓存中提取资源,而无需让服务器检查(并保存HTTP 304的往返信息)。当响应到期时,Fiddler中的缓存检查器将根据响应的头显示。例如,这里是IIS 7.5的默认响应,它包含一个ETAG和最后修改的头,但是没用过期信息:

  

  没有提供显示的HTTP过期信息,这是一个很好的提示,说明你需要做什么,显示设置过期时间。最佳实践建议web开发人员应该为其内容指定一个明确的过期时间,以确保浏览器能够在不产生HTTP请求条件的情况下重用内容,以重新验证服务器的内容。如果资源更改,则更改资源的名称。下面的Web.config文件,添加了内容和脚本文件夹到浏览器缓存。

  这里把过期头设置为两年,在IE9使用F12开发者工具,清楚缓存,然后浏览电影网站。使用Fiddler,我们可以看到过期头,将允许IE9直接从缓存中获取文件,而不需要在接下来的两年里检查服务器。

  

   用Fiddler和IE9 F12开发者工具监视浏览器请求。

  1,打开IE9,点击F12打开发者工具,之后删除缓存

  

  2,打开Fiddler

  3,在IE9开发者工具中,选择Network选项卡,接着选择开始捕捉(Start capturing),在电影应用程序中选择Home或About。

  

  Fiddler明确的显示了IE没有对静态资源进行条件请求,也就是说,没有HTTP GET请求,也没有来自服务器的HTTP 304响应。为什么IE9显示了GET请求和服务器返回了304的请求?Eric Lawrence在他使用Fiddler进行了13分钟的调试的演示中解释了为什么。在安装F12网络监听器时,要确定给定的“来自缓存”的响应是否为“PreNetIO”(例如在本地缓存中是最新的)或“PostNetIO”(例如在本地缓存中,但使用条件HTTP请求用于验证新鲜(freshness)程度),这是很困难的。因此,有时F12将显示出误导的“(304)”当它意味着是(缓存)”时。

  Firebug实际上更糟,它显示了每个静态资源的HTTP 200结果。

  

  Chrome开发工具正确的显示了来自缓存的每个资源。

  

  在ASP.NET MVC项目中加载资源的简单助手

  下面的代码显示了我的修改后的MVC电影项目中的布局文件,它使用了LoadRes helper来加载静态资源和CDN资源。

    
@ViewBag.Title @LoadRes("Site.css") @LoadRes("http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/themes/redmond/jquery-ui.css") @LoadRes("modernizr-1.7.min.js") @LoadRes("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js") @LoadRes("http://ajax.aspnetcdn.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js") @LoadRes("http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js") @LoadRes("jquery-ui-1.8.11.custom.min.js")

MovieLT

No Login
@RenderBody()
@helper LoadRes(string sFile) { // Not CDN but JavaScript if (!sFile.Contains("http://") && sFile.EndsWith(".js")) { } // CDN and JavaScript else if (sFile.Contains("http://") && sFile.EndsWith(".js")) { } // CDN and CSS else if (sFile.Contains("http://") && sFile.EndsWith(".css")) {
// Not CDN but CSS } else if (sFile.EndsWith(".css")) {
} }

  我使用LoadRes帮助类来清理用于加载资源的标记。

  

   参考文献:

  https://blogs.msdn.microsoft.com/rickandy/2011/05/21/using-cdns-and-expires-to-improve-web-site-performance/

转载于:https://www.cnblogs.com/shangec/p/8781056.html

你可能感兴趣的文章
字母和数字键的键码值(keyCode)
查看>>
IE8调用window.open导出EXCEL文件题目
查看>>
Spring mvc初学
查看>>
有意思的代码片段
查看>>
C8051开发环境
查看>>
VTKMY 3.3 VS 2010 Configuration 配置
查看>>
01_1_准备ibatis环境
查看>>
windows中修改catalina.sh上传到linux执行报错This file is needed to run this program解决
查看>>
JavaScript中的BOM和DOM
查看>>
360浏览器兼容模式 不能$.post (不是a 连接 onclick的问题!!)
查看>>
spring注入Properties
查看>>
【BZOJ-2295】我爱你啊 暴力
查看>>
【BZOJ-1055】玩具取名 区间DP
查看>>
Bit Twiddling Hacks
查看>>
Windwos中的线程同步
查看>>
LeetCode : Reverse Vowels of a String
查看>>
时间戳与日期的相互转换
查看>>
jmeter(五)创建web测试计划
查看>>
python基本数据类型
查看>>
1305: [CQOI2009]dance跳舞 - BZOJ
查看>>