金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > WEB请求过程,在前端性能优化中应用HTTP缓存的三

WEB请求过程,在前端性能优化中应用HTTP缓存的三

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-21 10:12

在前端性能优化中应用HTTP缓存的三部曲

2017/02/24 · 基础技术 · HTTP, 前端

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

Spike先生是Best Experience公司的IT运营部门主管,他的团队成功地利用Http Cache优化了前端工程。

Spike将通过三个Scenario来展示他的团队是如何做到这一点的:

  • 通过配置Http Cache Expire来消减访问压力,提高用户体验
  • 通过版本化来强制失效本地的过期缓存
  • 通过内容摘要命名文件来更精确的控制缓存以及实现非覆盖式的发布

文/王岩

一、一个例子

当用户在浏览器中输入www.xxx.com这个URL时,
首先,DNS会把这个域名解析成IP地址,
然后根据这个IP找到对应的服务器,并发起一个get请求,
对于服务器端而言,
可能会有负载均衡设备来平均分配用户请求,
而请求的数据可能在分布式缓存里,静态文件中,或是数据库中,
当数据返回给浏览器时,浏览器解析数据发现还有些静态文件(CSS、JS、图片...),又会发起另外的HTTP请求,而这些请求,很可能落在CDN上。

例子.png

不过网络架构如何变化,始终有一些固定不变的原则需要遵守:

  • 互联网上所有资源都要用一个URL来表示。
  • 必须基于HTTP与服务端

Yahoo金沙棋牌官方平台,!曾经针对网站速度体验提出了34条宝贵的准则《Best Practices for Speeding Up Your Web Site》,而Yslow正是按照这些准则,评测一个网站在速度体验上的优化程度的Firefox插件,将34条精简为更加直观的13条,并针对每一条给出从F~A的评分以及最终的总分。

第一个故事:我不想要那么多服务器和带宽

Spike先生是Best Experience公司的IT运营部门主管,他的团队成功地利用Http Cache优化了前端工程。

二、发起Http请求

发起一个Http请求和建立一个Socket连接区别不大,只不过outputStream.write写的二进制字节数据格式要符合HTTP。浏览器在建立Socket连接之前,必须根据地址栏输入的URL的域名DNS解析出IP地址,在根据这个IP地址和默认的80端口与远程服务器建立Socket连接,然后浏览器根据这个URL组装成一个get类型的HTTP请求头,通过outputStream.write发送到目标服务器,服务器等待inputStream.read返回数据,最后断开这个连接。

模拟浏览器发送Http请求:
httpClient
curl

当然从评测得到的只能是一个分数以及建议,如何改进还是要靠自己,这里要谈的就是实实在在的如何针对每一条进行优化:

Best Experience面临的资源访问压力和用户体验方面的问题

随着Best Experience提供的前端应用越来越强大,Spike的压力也越来越大:

  • IT部门为了应对来自静态资源的访问压力,不断购置服务器和带宽。
  • 糟糕的用户体验使得用户转投到竞争对手的网站。

工程师们刚刚通过应用Minify、AMD、打包、Gzip等手段优化了前端页面的体验, 最终得到如下图所示的一个资源引用关系:

金沙棋牌官方平台 1

“还是很多东西要下载啊,该拿什么来拯救该死的延迟呢?”——Spike看着图想到。

他突然想起来:在早年间,Yahoo曾发布了关于优化前端体验的35条建议和指导,其中第三条是:“Add an Expires or a Cache-Control Header”。

Yahoo是这样描述这条建议的:

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster.

“这个正是我寻找的银弹”——Spike得意的笑了。

于是,Spike写下了第一个Technology Story。

作为IT 部门的老大:

我希望通过应用HTTP缓存技术,重用已经下载过的资源,

用于消减用户在浏览页面时产生的不必要的Http Request。

以此,来提升用户在浏览页面时候的体验,

以及降低对于公司服务器资源的访问压力。

并找来了工程师Tom。

Spike将通过三个Scenario来展示他的团队是如何做到这一点的:

三、Http解析

要理解Http,最重要的就是熟悉Http中的Http Header,Http Header控制着互联网上成千上万的用户的数据的传输。最关键的是,它控制着用户浏览器的渲染行为和服务器的执行逻辑。

** 浏览器缓存机制:**
在我们浏览一个页面发现有异常时,通常考虑是不是浏览器做了缓存,一般做法Ctrl+F5(mac chrome为command+shift+R)重新请求一次这个页面,该页面肯定是最新的页面。

原因:

  1. 浏览器直接向目标Url发送请求,不用浏览器缓存。
  2. 即使应用服务器前端部署缓存服务器,也能看到最新的数据,因为通过Http请求头来控制,具体如下。

请求头新增两个请求项:

  • Pragma:no-cache
  • Cache-Control:no-cache
  1. Cache-Control/Pragma
    这个Http Head字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令

Http Head 字段可选值

  1. Expires
    Expires通常的使用格式是Expires:Sat, 25 Feb 2012 12:22:17 GMT, 后面跟着一个日期和时间,超过这个时间后,缓存的内容将失效,也就是浏览器在发请求之前接着页面的这个字段,看页面是否过期,过期就重新向服务器发送请求。

  2. Last-Modified/Etag
    Last-Modified字段用于表示一个服务器上的资源的最后修改时间,一般服务端在响应头中返回该字段,浏览器再次请求shi时在请求头中增加一个If-Modified-since字段,询问当前缓存页面是否最新,若是,返回304状态码,告诉浏览器是最新,服务器也不会传输新的数据。

Etag与上述字段相似,让服务端给每个页面分配一个唯一的编号,通过编号来区分这个页面是否最新。

1. Make fewer HTTP requests / 减少Http请求数

一个网页不可避免的要引入大量的外部文件:Javascript、css、背景图片……由于Http协议的无状态性,用户的每一次访问,都会重新向服务器请求所有文件,而大量Http请求的累加,正是影响网站速度的最主要原因。

所以这里的解决方法只有一个:合并。最理想的情况莫过于一个网页只包含一个css,一个js,一张背景图。

合并Js和Css文件很好理解,背景图片要怎么合并?这里采用的主要方法是CSS Sprites,简单说就是把所有的图片拼接成一张大图,在不同的Css里指定背景图坐标来显示不同图片。具体可以参考Dave Shea的Image Slicing’s Kiss of Death一文,还有网站提供了在线的CSS Sprites服务,只需要上传小图片,就可以获得拼接后的大图以及相应坐标。

不过在当前越来越多动辄包含10余个文件的开发框架面前,减少Http请求数也变得越来越难。一直都认为所谓框架,给出的应该是一整套完善的开发思 想,从服务器配置到数据库设计甚至是到UI体验乃至SEO,但现在很多Framework总是各自为战,后台与前端脱节,只在自己的一片领域里提供一定程 度上的方便,没有考虑到最终产品的统合,甚至连基本的代码侵入性问题没有处理好(这里点名批评dojo,恨不得在所有的html标签上印上dojo的章 子),不能不说是一种遗憾。

所以如果网站中采用框架的话,在框架的选择面前,建议多采用轻量级,侵入性低的框架,也是为了日后产品的优化维护着想。

Expire带来的美好生活

Tom刚刚参与了前一轮的优化工作,虽然成果显著,但是他并不满足。

当Tom看到Jim写下的Story时眼前一亮:“这个方法太赞了!我甚至可以在登录页面底部放置对其他页面资源的引用。提升用户在整个网站的浏览体验。”——Tom的小宇宙瞬间爆发,很快就完成了新的优化方案。

Best-Experience的用户在接下来的时间里浏览页面,会这样下载资源,以图片bgimage.png为例:

  • 用户第一次获取图片的时候,Http Request 如图:

金沙棋牌官方平台 2

  • 之后用户再次获取图片的时候,则完全可以从浏览器的缓存中读取数据了。

金沙棋牌官方平台 3

因为采用了Http缓存方案,

  • 用户的feedback越来越好,访问量提高了;
  • IT部门也不用那么多服务器和带宽了。

财务总监邀请Spike共进晚餐,并谈起了自己在希腊的度假。

“我想我也应该去圣托里尼度个假,犒劳下自己”——Spike美滋滋的想到。

  • 通过配置Http Cache Expire来消减访问压力,提高用户体验
  • 通过版本化来强制失效本地的过期缓存
  • 通过内容摘要命名文件来更精确的控制缓存以及实现非覆盖式的发布
四、DNS域名解析
  1. 解析过程

DNS域名解析

当用户在浏览器中输入域名按下回车:
(1)浏览器先查缓存,若缓存中有域名对应IP地址,则解析结束。(存活时间TTL)
(2)若浏览器缓存中没有,浏览器会查询操作系统中缓存缓存是否有这个域名对应的DNS解析结果。(hosts 文件)
(3)如果在本机中仍然无法完成域名的解析,则会真正请求域名服务器来解析这个域名了。操作系统会把域名发送给设置的LDNS(cat /etc/resolv.conf)。
(4)若LDNS没有命中,就直接到Root Server域名服务器请求解析。
(5)根域名服务器返回本地域名服务器一个所查询域的主域名服务器(gTLD Server)地址。GTLD是国际顶级域名服务器,如.com、.cn、.org等,全球只有13台左右。
(6)本地域名服务器(Local DNS Server)再向上一步返回的GTLD服务器发送请求。
(7)接受请求的GTLD服务器查找并返回此域名对应的Name Server域名服务器,这个Name Server通常就是你注册的域名服务器,例如你在某个域名服务提供商申请的域名,那么这个域名解析任务就有这个域名提供商的服务器来完成。
(8)Name Server返回IP记录和TTL(缓存时间)。
(9)LDNS缓存该记录,缓存时间有TTL控制。
(10)解析结果返回给用户,用户根据TTL值缓存在本地系统缓存中,域名解析过程结束。

在实际的DNS解析过程中,可能不止这10步,如Name Server可能有多级,或者有一个GTM来负载均衡控制等。

可通过nslookup、dig 命令来跟踪域名解析过程。

2. Use a CDN / 使用CDN

CDN(Content delivery network)内容分发网络,能够智能根据网络节点情况选择服务节点,大型网站部署时尤为重要。不过这属于硬件级别的解决方案,我们没有条件配置CDN的时候,可以自行设置忽略这一项评测。

在Firefox地址栏键入about:config,然后新建一个字符串,名称为 extensions.firebug.yslow.cdnHostnames,值为所要评测网站的域名,多个设置用逗号分隔。例如我的设置就是 allo.ave7.net,localhost

第二个故事:失效缓存是个技术活

第一个故事:我不想要那么多服务器和带宽

五、CDN工作机制

CDN即内容分发网络(Content Delivery Network),目的是通过现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络边缘,使用户可以就近取得所需内容,提高用户访问网站响应速度。

CDN = 镜像(Mirror)+ 缓存(Cache)+ 整体负载均衡(GSLB)

目前CDN都已缓存网站中静态数据为主。

**CDN 架构: **

CDN架构

** CDN动态加速 **

CDN的动态加速技术也是当前比较流行的一种优化技术,是在CDN的DNS解析中通过动态的链路探测来寻找回源最好的一条路径,然后通过DNS的调度将所有请求调度到选定的这条路径上回源,从而加速用户的访问。

CDN动态加速

3. Add an Expires header / 为文件头指定Expires

Expires是浏览器Cache机制的一部分,浏览器的缓存取决于Header中的四个值: Cache-Control, Expires, Last-Modified, ETag。这个项目的考评主要针对Cache-Control和Expires。

具体的Cache原理不是本文所涉及的,有兴趣的同学可以看看Caching Tutorial一文。为了优化这个选项,我们所要做的是对站内所有的文件有针对性的设置Cache-Control和Expires,这里基于Apache主机举例:

首先开启mod_header模块,在httpd.conf中取消

LoadModule headers_module modules/mod_headers.so 

一行的注释。然后对于图片,文件等不会经常更新的文件设置一个比较长的过期时间

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT" </FilesMatch> 

对于Cache-Control可以设置的更加细致一些,这里我对图片,文件设置了1周,对XML,TXT设置了5小时,对html和php文件只设置了1小时。

<FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch>  <FilesMatch ".(xml|txt)$"> Header set Cache-Control "max-age=18000, public, must-revalidate" </FilesMatch>  <FilesMatch ".(html|htm|php)$"> Header set Cache-Control "max-age=3600, must-revalidate" </FilesMatch> 

另外Expires也可以通过开启mod_expires来实现,这里不再举例。

这个BUG我们明明修了啊!

一天,QA Tyke发现最近一轮发布的前端应用中没有包含很多新的feature。Jerry承诺说已经跟着这个月的release上线了,还测试过了。经过一番折腾,Jerry发现浏览器一直在使用旧的缓存,而不是最新的版本。Spike找来了Jerry 和Tom,三个人一起手动对引用的资源做了重命名、做了紧急修复。

“真是没有银弹啊,我的圣托里尼啊!”——Spike头疼的想到。

Spike、Jerry、Tom和Tyke坐在了一起,得出了新的结论:

  • 缓存前端工程中的资源时,需要考虑缓存有效期的问题
  • 虽然35条建议和指导中建议“Configure ETags”,但是很难确定静态资源缓存的有效期
  • 虽然Http缓存可以支持No-Cache或者max-age =0的方式,保证浏览器每次都向服务器验证缓存有效性,但是这样会大大增加服务器的压力
  • 可以通过在资源引用上增加形如:<…. src=”###.js?v=$version$”>的版本化方式,来强制浏览器更新缓存。

Spike写下了新的Technology Story

作为IT部门的老大:

我希望在前端系统中,对引用的静态资源进行版本化管理。

使之既可以通过Http缓存来提升用户体验,降低服务器压力;

也可以方便用户即时获得更新后的资源。

“这都10月了,看来是去不成圣托里尼了,总觉得这个方案哪里有问题”——Spike忐忑不安。

Best Experience面临的资源访问压力和用户体验方面的问题

随着Best Experience提供的前端应用越来越强大,Spike的压力也越来越大:

  • IT部门为了应对来自静态资源的访问压力,不断购置服务器和带宽。
  • 糟糕的用户体验使得用户转投到竞争对手的网站。

工程师们刚刚通过应用Minify、AMD、打包、Gzip等手段优化了前端页面的体验, 最终得到如下图所示的一个资源引用关系:

金沙棋牌官方平台 4

“还是很多东西要下载啊,该拿什么来拯救该死的延迟呢?”——Spike看着图想到。

他突然想起来:在早年间,Yahoo曾发布了关于优化前端体验的35条建议和指导,其中第三条是:“Add an Expires or a Cache-Control Header”。

Yahoo是这样描述这条建议的:

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster.

“这个正是我寻找的银弹”——Spike得意的笑了。

于是,Spike写下了第一个Technology Story。

作为IT 部门的老大:

我希望通过应用HTTP缓存技术,重用已经下载过的资源,

用于消减用户在浏览页面时产生的不必要的Http Request。

以此,来提升用户在浏览页面时候的体验,

以及降低对于公司服务器资源的访问压力。

并找来了工程师Tom。

4. Gzip components / 启用Gzip压缩

HTTP/1.1支持接收服务器端经过Gzip压缩的数据,在Apache2中,可以开启mod_deflate实现。

同样去掉注释

LoadModule deflate_module modules/mod_deflate.so 

然后对所有文本类文件添加Gzip处理

DeflateCompressionLevel 3 <FilesMatch ".(php|htm|html|js|css)$"> SetOutputFilter DEFLATE </FilesMatch> 

用版本机制来保证浏览器更新资源

Jerry和Tom(很难想象他们两怎么配合的)终于在前端工程中实现了自动化的资源版本化管理:用户在最初访问页面的时候,会得到这样一个资源引用:

金沙棋牌官方平台 5

而当新的版本上线后,用户会得到这样一个资源引用:

金沙棋牌官方平台 6

Expire带来的美好生活

Tom刚刚参与了前一轮的优化工作,虽然成果显著,但是他并不满足。

当Tom看到Jim写下的Story时眼前一亮:“这个方法太赞了!我甚至可以在登录页面底部放置对其他页面资源的引用。提升用户在整个网站的浏览体验。”——Tom的小宇宙瞬间爆发,很快就完成了新的优化方案。

Best-Experience的用户在接下来的时间里浏览页面,会这样下载资源,以图片bgimage.png为例:

  • 用户第一次获取图片的时候,Http Request 如图:

金沙棋牌官方平台 7

  • 之后用户再次获取图片的时候,则完全可以从浏览器的缓存中读取数据了。

金沙棋牌官方平台 8

因为采用了Http缓存方案,

  • 用户的feedback越来越好,访问量提高了;
  • IT部门也不用那么多服务器和带宽了。

财务总监邀请Spike共进晚餐,并谈起了自己在希腊的度假。

“我想我也应该去圣托里尼度个假,犒劳下自己”——Spike美滋滋的想到。

5. Put CSS at the top / 将Css文件放在头部

很好理解的一条,主要是为了避免最后加载Css引起的浏览器白屏,改善用户体验。

第三个故事:更精确的缓存管理和平滑升级

(这个案例来自于知乎的大公司里怎样开发和部署前端代码? 张云龙的回答,前一个 story的内容有涉及)

第二个故事:失效缓存是个技术活

6. Put JS at the bottom / 将Js文件放在底部

同样很容易理解,为了让DOM先行加载。

每次更新后的尖峰时刻

11月的Release后,运维人员Nibbles找到Spike,“这次上线以后,服务器压力突然剧增,从GA上看到用户花了很多时间在资源下载上”,Spike找来了Tom、Jerry、Tyke和Nibbles,几个人坐在一起分析原因:

“这是因为11月的部署完成后,前端应用引用的资源版本升级,所有缓存失效导致的”——Tom 想了想说

“所有的资源引用?我还以为我们能精确到每一个文件的更新呢”——Nibbles惊讶道

“如果单独标明每一个资源的版本,那么按照我们的实际情况来看,每次上线后访问压力就没那么大了”——Tyke

“我之前看WebPack做到了”——Jerry兴致勃勃的谈了起来。

“他们采用的是文件摘要的方式,就是用MD5对文件求值,如果两个文件是相同的,那么就求得同一个hash值;如果文件是不同的,就求得不同的hash值”——Jerry

“我们可以用这些文件的hash值作为版本号,就像这样”——Jerry

金沙棋牌官方平台 9

“能不能通过文件名做版本管理,我希望知道哪些文件是这次部署要移除的,哪些是新增的”——Nibbles

“这有什么问题么?”——Spike很疑惑

“明年不是要做CDN么?静态资源和页面文件会放置到不同的服务器上,很难做到页面文件和静态资源同批次更新,而且CDN的资源生效是有延迟的”——Nibbles

(关于 CDN 和非覆盖部署式部署,请参考张云龙的大公司里怎样开发和部署前端代码?和前端工程之CDN部署)

“恩,那么就这样吧,我回去写Story。”——Spike 一锤定音。

“还好,我们之前用了WebPack,这就简单了”——Jerry

Spike写下了第三个story

作为IT 部门的老大:

我希望能用文件hash来命名静态资源文件,

使之可以按照文件来控制缓存和部署

“我觉得这回是最后一个Story了”——Spike越来越乐观。

这个BUG我们明明修了啊!

一天,QA Tyke发现最近一轮发布的前端应用中没有包含很多新的feature。Jerry承诺说已经跟着这个月的release上线了,还测试过了。经过一番折腾,Jerry发现浏览器一直在使用旧的缓存,而不是最新的版本。Spike找来了Jerry 和Tom,三个人一起手动对引用的资源做了重命名、做了紧急修复。

“真是没有银弹啊,我的圣托里尼啊!”——Spike头疼的想到。

Spike、Jerry、Tom和Tyke坐在了一起,得出了新的结论:

  • 缓存前端工程中的资源时,需要考虑缓存有效期的问题
  • 虽然35条建议和指导中建议“Configure ETags”,但是很难确定静态资源缓存的有效期
  • 虽然Http缓存可以支持No-Cache或者max-age =0的方式,保证浏览器每次都向服务器验证缓存有效性,但是这样会大大增加服务器的压力
  • 可以通过在资源引用上增加形如:<.... src="###.js?v=$version$">的版本化方式,来强制浏览器更新缓存。

Spike写下了新的Technology Story

作为IT部门的老大:

我希望在前端系统中,对引用的静态资源进行版本化管理。

使之既可以通过Http缓存来提升用户体验,降低服务器压力;

也可以方便用户即时获得更新后的资源。

“这都10月了,看来是去不成圣托里尼了,总觉得这个方案哪里有问题”——Spike忐忑不安。

7. Avoid CSS expressions / 避免CSS expressions

CSS expressions可以轻易的引起浏览器假死,也不在W3C规范内,不只是避免,最好完全不要用。

过渡到非覆盖式部署——大圆满?

如何应用WebPack的具体过程不再概述。

金沙棋牌官方平台 10

图片来源大公司里怎样开发和部署前端代码?

这样,Nibbles就可以很愉快的通过文件名比对,来分析每次部署变更的内容;而Best Experience未来上线的流程也会变为:

  • 先将新增的静态资源文件发布到静态资源服务器上
  • 验证新的静态资源是否正确发布
  • 服务器暂时离线,替换 html 文件等
  • 删除无用的静态资源文件

“终于可以踏踏实实过圣诞节了”——Spike看着日历。

用版本机制来保证浏览器更新资源

Jerry和Tom(很难想象他们两怎么配合的)终于在前端工程中实现了自动化的资源版本化管理:用户在最初访问页面的时候,会得到这样一个资源引用:

金沙棋牌官方平台 11

而当新的版本上线后,用户会得到这样一个资源引用:

金沙棋牌官方平台 12

8. Make JS and CSS external / 将Js和Css文件独立

将Js和Css文件单独做成外部文件加载,一则可以功能复用,二则可以生成缓存,当然这一条和第一条要互相参照找出最好的解决方案才是。

总结

第三个故事:更精确的缓存管理和平滑升级

(这个案例来自于知乎的大公司里怎样开发和部署前端代码? 张云龙的回答,前一个 story的内容有涉及)

9. Reduce DNS lookups / 减少DNS查询

外部文件分散于多个服务器,连接每台服务器都会做一次DNS查询,这一条是针对多服务器的部署。

Spike的总结

年底了,Spike在年终总结中写到:

以后在实施前端工程中,我们可以通过:

  • 配置永不过期的本地缓存——节约带宽,提升用户体验
  • 采用文件摘要作为缓存依据——更精确的缓存控制
  • 采用CDN——降低用户请求资源时解析DNS的延迟
  • 利用文件摘要作为文件名——实现非覆盖式的部署,降低down time

每次更新后的尖峰时刻

11月的Release后,运维人员Nibbles找到Spike,“这次上线以后,服务器压力突然剧增,从GA上看到用户花了很多时间在资源下载上”,Spike找来了Tom、Jerry、Tyke和Nibbles,几个人坐在一起分析原因:

“这是因为11月的部署完成后,前端应用引用的资源版本升级,所有缓存失效导致的”——Tom 想了想说

“所有的资源引用?我还以为我们能精确到每一个文件的更新呢”——Nibbles惊讶道

“如果单独标明每一个资源的版本,那么按照我们的实际情况来看,每次上线后访问压力就没那么大了”——Tyke

“我之前看WebPack做到了”——Jerry兴致勃勃的谈了起来。

“他们采用的是文件摘要的方式,就是用MD5对文件求值,如果两个文件是相同的,那么就求得同一个hash值;如果文件是不同的,就求得不同的hash值”——Jerry

“我们可以用这些文件的hash值作为版本号,就像这样”——Jerry

金沙棋牌官方平台 13

“能不能通过文件名做版本管理,我希望知道哪些文件是这次部署要移除的,哪些是新增的”——Nibbles

“这有什么问题么?”——Spike很疑惑

“明年不是要做CDN么?静态资源和页面文件会放置到不同的服务器上,很难做到页面文件和静态资源同批次更新,而且CDN的资源生效是有延迟的”——Nibbles

(关于 CDN 和非覆盖部署式部署,请参考张云龙的大公司里怎样开发和部署前端代码?和前端工程之CDN部署)

"恩,那么就这样吧,我回去写Story。"——Spike 一锤定音。

"还好,我们之前用了WebPack,这就简单了"——Jerry

Spike写下了第三个story

作为IT 部门的老大:

我希望能用文件hash来命名静态资源文件,

使之可以按照文件来控制缓存和部署

"我觉得这回是最后一个Story了"——Spike越来越乐观。

10. Minify JS / 压缩Js文件

压缩Js文件,Yahoo!官方推荐的工具是JSMin和YUI Compressor。

我的总结

我引用前端工程之CDN部署一文中对非覆盖式、缓存设计、CDN这些解决方案间的前因后果做的总结:

金沙棋牌官方平台 14

如果考虑到项目开发阶段,那么这将是更为复杂的软件工程问题。在这个问题域中,还需要囊括文件压缩、合并、打包、重命名、目录设置等问题。还好Gulp、Webpack、FIS、AMD、RequireJS这些工具及对应的插件能帮助到我们。WebPack提供了Hash、ChunkHash、ContentHash,与此同时,社区提供了MD5-Hash。

当然这些都是关于工具的话题了,这次我们主要谈的是工程。浅谈前端集成解决方案里提到了前端领域的8个技术元素与分类,挺有意思的。

过渡到非覆盖式部署——大圆满?

如何应用WebPack的具体过程不再概述。

金沙棋牌官方平台 15

图片来源大公司里怎样开发和部署前端代码?

这样,Nibbles就可以很愉快的通过文件名比对,来分析每次部署变更的内容;而Best Experience未来上线的流程也会变为:

  • 先将新增的静态资源文件发布到静态资源服务器上
  • 验证新的静态资源是否正确发布
  • 服务器暂时离线,替换 html 文件等
  • 删除无用的静态资源文件

“终于可以踏踏实实过圣诞节了”——Spike看着日历。

11. Avoid redirects / 避免重定向

每一次的重定向都会重新发送Header请求。所以在Apache下,无比强大的mod_rewrite是必须要学的。

再终——没有银弹

我们的Spike先生来到了2月的北京旅游,放个带色的图:

金沙棋牌官方平台 16

我们自强不吸

在机场,Spike还是接到了Tyke的电话,“老爹啊,WebPack那个文件摘要不准啊……..”

“您好,因为天气原因,去往####的飞机延误,请您耐心等候……..”

“…….”

1 赞 3 收藏 评论

总结

12. Remove duplicate scripts / 移除重复的脚本

开发中没有规划好,会出现页面中重复引用一个文件的情况,IE中即便是重复引用也会重新向服务器发送一次请求。

关于作者:ThoughtWorks

金沙棋牌官方平台 17

ThoughtWorks是一家全球IT咨询公司,追求卓越软件质量,致力于科技驱动商业变革。擅长构建定制化软件产品,帮助客户快速将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、组织转型等咨询服务。 个人主页 · 我的文章 · 84 ·   

金沙棋牌官方平台 18

Spike的总结

年底了,Spike在年终总结中写到:

以后在实施前端工程中,我们可以通过:

  • 配置永不过期的本地缓存——节约带宽,提升用户体验
  • 采用文件摘要作为缓存依据——更精确的缓存控制
  • 采用CDN——降低用户请求资源时解析DNS的延迟
  • 利用文件摘要作为文件名——实现非覆盖式的部署,降低down time

13. Configure ETags / 配置ETags

在第三条中已经对浏览器缓存机制中的Cache-Control和Expires进行了配置,这一条评测的是另外两个:Last-Modified和ETag

简单的说,即使设置了文件的期限,浏览器在访问资源时往往会因为Last-Modified和ETag而重新下载整个资源,所以简单的做法是关闭Last-Modified和ETag

在Apache中做如下配置

FileETag None  <FilesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css)$"> Header unset Last-Modified </FilesMatch> 

最后看看优化后的成果

我的总结

我引用前端工程之CDN部署一文中对非覆盖式、缓存设计、CDN这些解决方案间的前因后果做的总结:

金沙棋牌官方平台 19

如果考虑到项目开发阶段,那么这将是更为复杂的软件工程问题。在这个问题域中,还需要囊括文件压缩、合并、打包、重命名、目录设置等问题。还好Gulp、Webpack、FIS、AMD、RequireJS这些工具及对应的插件能帮助到我们。WebPack提供了Hash、ChunkHash、ContentHash,与此同时,社区提供了MD5-Hash。

当然这些都是关于工具的话题了,这次我们主要谈的是工程。浅谈前端集成解决方案里提到了前端领域的8个技术元素与分类,挺有意思的。

再终——没有银弹

我们的Spike先生来到了2月的北京旅游,放个带色的图:

金沙棋牌官方平台 20

我们自强不吸

在机场,Spike还是接到了Tyke的电话,“老爹啊,WebPack那个文件摘要不准啊........”

“您好,因为天气原因,去往####的飞机延误,请您耐心等候........”

“.......”

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:WEB请求过程,在前端性能优化中应用HTTP缓存的三

关键词: