966,690 十二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
前端工程精粹（一）：静态资源版本更新与缓存
前端工程精粹（一）：静态资源版本更新与缓存
欲知区块链、VR、TensorFlow等潮流技术和框架，请锁定
相关厂商内容
相关赞助商
QCon北京-18日，北京&国家会议中心，
本文从一个全新的视角来思考web性能优化与前端工程之间的关系，通过解读百度前端集成解决方案小组（F.I.S）在打造高性能前端架构并统一百度40多条前端产品线的过程中所经历的技术尝试，揭示前端性能优化在前端架构及开发工具设计层面的实现思路。
性能优化原则及分类
笔者先假设本文的读者是有前端开发经验的工程师，并对企业级web应用开发及性能优化有一定的思考，因此我不会重复介绍雅虎14条性能优化原则。如果您没有这些前续知识，请移步来学习。
首先，我们把雅虎14条优化原则，《高性能网站建设指南》以及《高性能网站建设进阶指南》中提到的优化点做一次梳理，按照优化方向分类，可以得到这样一张表格：
合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
开启GZip，精简JavaScript，移除重复脚本，图像优化
使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
避免CSS表达式，避免重定向
表格1 性能优化原则分类
目前大多数前端团队可以利用或者等压缩工具很容易做到&精简Javascript&这条原则；同样的，也可以使用图片压缩工具对图像进行压缩，实现&图像优化&原则。这两条原则是对单个资源的处理，因此不会引起任何工程方面的问题。很多团队也通过引入代码校验流程来确保实现&避免css表达式&和&避免重定向&原则。目前绝大多数互联网公司也已经开启了服务端的Gzip压缩，并使用CDN实现静态资源的缓存和快速访问；一些技术实力雄厚的前端团队甚至研发出了自动CSS Sprites工具，解决了CSS Sprites在工程维护方面的难题。使用&查找-替换&思路，我们似乎也可以很好的实现&划分主域&原则。
我们把以上这些已经成熟应用到实际生产中的优化手段去除掉，留下那些还没有很好实现的优化原则。再来回顾一下之前的性能优化分类：
合并脚本和样式表，拆分初始化负载
移除重复脚本
添加Expires头，配置ETag，使Ajax可缓存
将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
表格2 较难实现的优化原则
现在有很多顶尖的前端团队可以将上述还剩下的优化原则也都一一解决，但业界大多数团队都还没能很好的解决这些问题。因此，本文将就这些原则的解决方案做进一步的分析与讲解，从而为那些还没有进入前端工业化开发的团队提供一些基础技术建设意见，也借此机会与业界顶尖的前端团队在工业化工程化方向上交流一下彼此的心得。
静态资源版本更新与缓存
如表格2所示，&缓存利用&分类中保留了&添加Expires头&和&配置ETag&两项。或许有些人会质疑，明明这两项只要配置了服务器的相关选项就可以实现，为什么说它们难以解决呢？确实，开启这两项很容易，但开启了缓存后，我们的项目就开始面临另一个挑战：如何更新这些缓存。
相信大多数团队也找到了类似的答案，它和《高性能网站建设指南》关于&添加Expires头&所说的原则一样&&修订文件名。即：
最有效的解决方案是修改其所有链接，这样，全新的请求将从原始服务器下载最新的内容。
思路没错，但要怎么改变链接呢？变成什么样的链接才能有效更新缓存，又能最大限度避免那些没有修改过的文件缓存不失效呢？
先来看看现在一般前端团队的做法：
大家会采用添加query的形式修改链接。这样做是比较直观的解决方案，但在访问量较大的网站，这么做可能将面临一些新的问题。
通常一个大型的web应用几乎每天都会有迭代和更新，发布新版本也就是发布新的静态资源和页面的过程。以上述代码为例，假设现在线上运行着index.html文件，并且使用了线上的a.js资源。index.html的内容为：
这次我们更新了页面中的一些内容，得到一个index.html文件，并开发了新的与之匹配的a.js资源来完成页面交互，新的index.html文件的内容因此而变成了：
好了，现在要开始将两份新的文件发布到线上去。可以看到，index.html和a.js的资源实际上是要覆盖线上的同名文件的。不管怎样，在发布的过程中，index.html和a.js总有一个先后的顺序，从而中间出现一段或大或小的时间间隔。对于一个大型互联网应用来说即使在一个很小的时间间隔内，都有可能出现新用户访问。在这个时间间隔中，访问了网站的用户会发生什么情况呢？
如果先覆盖index.html，后覆盖a.js，用户在这个时间间隙访问，会得到新的index.html配合旧的a.js的情况，从而出现错误的页面。
如果先覆盖a.js，后覆盖index.html，用户在这个间隙访问，会得到旧的index.html配合新的a.js的情况，从而也出现了错误的页面。
这就是为什么大型web应用在版本上线的过程中经常会较集中的出现前端报错日志的原因，也是一些互联网公司选择加班到半夜等待访问低峰期再上线的原因之一。此外，由于静态资源文件版本更新是&覆盖式&的，而页面需要通过修改query来更新，对于使用CDN缓存的web产品来说，还可能面临CDN缓存攻击的问题。我们再来观察一下前面说的版本更新手段：
我们不难预测，a.js的下一个版本是&1.0.1&，那么就可以刻意构造一串这样的请求&a.js?v=1.0.1&、&a.js?v=1.0.2&、&&让CDN将当前的资源缓存为&未来的版本&。这样当这个页面所用的资源有更新时，即使更改了链接地址，也会因为CDN的原因返回给用户旧版本的静态资源，从而造成页面错误。即便不是刻意制造的攻击，在上线间隙出现访问也可能导致区域性的CDN缓存错误。
此外，当版本有更新时，修改所有引用链接也是一件与工程管理相悖的事，至少我们需要一个可以&查找-替换&的工具来自动化的解决版本号修改的问题。
对付这个问题，目前来说最优方案就是基于文件内容的hash版本冗余机制了。也就是说，我们希望工程师源码是这么写的：
但是线上代码是这样的：
其中&_82244e91&这串字符是根据a.js的文件内容进行hash运算得到的，只有文件内容发生变化了才会有更改。由于版本序列是与文件名写在一起的，而不是同名文件覆盖，因此不会出现上述说的那些问题。同时，这么做还有其他的好处：
线上的a.js不是同名文件覆盖，而是文件名+hash的冗余，所以可以先上线静态资源，再上线html页面，不存在间隙问题；
遇到问题回滚版本的时候，无需回滚a.js，只须回滚页面即可；
由于静态资源版本号是文件内容的hash，因此所有静态资源可以开启永久强缓存，只有更新了内容的文件才会缓存失效，缓存利用率大增；
修改静态资源后会在线上产生新的文件，一个文件对应一个版本，因此不会受到构造CDN缓存形式的攻击
虽然这种方案是相比之下最完美的解决方案，但它无法通过手工的形式来维护，因为要依靠手工的形式来计算和替换hash值，并生成相应的文件。这将是一项非常繁琐且容易出错的工作，因此我们需要借助工具。我们下面来了解一下fis是如何完成这项工作的。
首先，之所以有这种工具需求，完全是由web应用运行的根本机制决定的：web应用所需的资源是以字面的形式通知浏览器下载而聚合在一起运行的。这种资源加载策略使得web应用从本质上区别于传统桌面应用的版本更新方式。为了实现资源定位的字面量替换操作，前端构建工具理论上需要识别所有资源定位的标记，其中包括：
css中的@import url(path)、background:url(path)、backgournd-image:url(path)、filter中的src
js中的自定义资源定位函数，在fis中我们将其规定为__uri(path)。
html中的&script src=&path&&、&link href=&path&&、&imgsrc=&path&&、已经embed、audio、video、object等具有资源加载功能的标签。
为了工程上的维护方便，我们希望工程师在源码中写的是相对路径，而工具可以将其替换为线上的绝对路径，从而避免相对路径定位错误的问题（比如js中需要定位图片路径时不能使用相对路径的情况）。
fis的资源定位设计思想
fis有一个非常棒的资源定位系统，它是根据用户自己的配置来指定资源发布后的地址，然后由fis的资源定位系统识别文件中的定位标记，计算内容hash，并根据配置替换为上线后的绝对url路径。
要想实现具备hash版本生成功能的构建工具不是&查找-替换&这么简单的。我们考虑这样一种情况：
资源引用关系
由于我们的资源版本号是通过对文件内容进行hash运算得到，如上图所示，index.html中引用的a.css文件的内容其实也包含了a.png的hash运算结果，因此我们在修改index.html中a.css的引用时，不能直接计算a.css的内容hash，而是要先计算出a.png的内容hash，替换a.css中的引用，得到了a.css的最终内容，再做hash运算，最后替换index.html中的引用。
这意味着构建工具需要具备&递归编译&的能力，这也是为什么fis团队不得不放弃gruntjs等task-based系统的根本原因。针对前端项目的构建工具必须是具备递归处理能力的。此外，由于文件之间的交叉引用等原因，fis构建工具还实现了构建缓存等机制，以提升构建速度。
在解决了基于内容hash的版本更新问题之后，我们可以将所有前端静态资源开启永久强缓存，每次版本发布都可以首先让静态资源全量上线，再进一步上线模板或者页面文件，再也不用担心各种缓存和时间间隙的问题了！
在本系列的下一部分，我们将介绍静态资源管理与模板框架的思路和用法。
作者简介：张云龙，百度公司Web前端研发部前端集成解决方案小组技术负责人，目前负责F.I.S项目，读者可以关注他的微博：。
感谢对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家通过新浪微博（）或者腾讯微博（）关注我们，并与我们的编辑和其他读者朋友交流。
Author Contacted
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
Re: 那日后维护的时候，怎么知道哪个资源文件还在用，哪个没在用？
a_8244a91.js vs a_1.0.1.js
Re: a_8244a91.js vs a_1.0.1.js
Re: a_8244a91.js vs a_1.0.1.js
Re: 8位hash?
我们的实践是用GIT commit hash
Re: 我们的实践是用GIT commit hash
Re: 8位hash?
资源多处引用问题
lai zhiqiang
Re: 资源多处引用问题
对于脚本中动态加入的静态资源有做处理么？
Re: 对于脚本中动态加入的静态资源有做处理么？
fis可以使用在所有Web站点吗？
Sun Xiaoliang
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。CDN独立控制面板
CDN 缓存刷新
为什么要刷新缓存：
　　由于 CDN 本身的机制，要达到比较好的浏览速度，一般都会将一些静态的内容，比如 图片、css、js、flash、音频、视频等内容缓存在CDN节点上面，当有用户访问这些内容时，CDN节点直接将它本地缓存的内容返回到浏览者，而不从原服务器上下载，这样客户访问您的网站的时候，速度就会快一些。
　　正因为 CDN 本身的这种缓存机制，会导致您上传更新了网站的某些文件（比如图片等），但这时客户访问您的网站的时候，看到的还是旧的图片，这是就需要刷新 CDN 缓存，以便客户可以及时看到最新的内容。
　　我司的 CDN 缓存每隔几个小时会自动刷新一次，即使不刷新缓存，过一段时间后，缓存也会自动更新，但这样会不够及时，基于这个原因，我司开发了功能非常强大的刷新系统，让用户可以自己随便刷新缓存。
如何刷新缓存：
　　要刷新缓存，您只需要用浏览器访问您做过更新的网址，然后按 Ctrl+ F5 刷新一下就可以了，使用非常方便。刷新DNS命令 如何刷新DNS缓存
首先进入命令提示符下（开始&&运行&&cmd）:
先运行:ipconfig /displaydns这个命令,查看一下本机已经缓存了那些的dns信息的,然后输入下面的命令
ipconfig /flushdns
这时本机的dns缓存信息已经清空了,我们可以再次输入第一次输入的命令来看一下,
ipconfig /displaydns
本文来源:新客网整理
如果您喜欢本文请分享给您的好友，谢谢！如想浏览更多更好的内容，请登录：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）今日鲜活特别推荐：
凡是本站原创文章，均可随意引用/转载/修改，且无需注明出处！
&#160;&#160;
&#160;&#160
&#160;&#160;&#160;
&#160;&#160;&#160;&#160;
&#160;&#160;&#160;