本港台最快开奖结果_本港台118kj开奖现场_明日大富翁开奖结果

[2019]本港台最快开奖结果是给大家带来了一个可以免费下载正版的机会,1本港台118kj开奖现场为玩家提供免费好玩的iPad游戏下载,点击明日大富翁开奖结果了解更多优惠信息,因为只有在注册之后下载下来的平台才是官方指定的。

关于Web静态资源缓存自动更新的思考与实践

来源:http://www.alloutofdebt.com 作者:新闻资讯 人气:104 发布时间:2019-11-26
摘要:至于Web静态财富缓存自动更新的思虑与执行 2016/04/06 · 幼功技巧 ·静态财富 正文小编: 伯乐在线 -Natumsol。未经小编许可,禁止转发! 款待参加伯乐在线 专栏审核人。 前言 对此前端工

至于Web静态财富缓存自动更新的思虑与执行

2016/04/06 · 幼功技巧 · 静态财富

正文小编: 伯乐在线 - Natumsol 。未经小编许可,禁止转发!
款待参加伯乐在线 专栏审核人。

前言

对此前端工程化来说,静态财富的缓存与更新平昔是一个十分大的主题材料,各大公司也推出了个其余消除方案,如百度的FIS工具集。若无缓和好那些主题素材,不仅仅会给客户形成不佳的用户体验,何况还恐怕会给开垦和调节和测验带了好多不须求的劳动。关于如何自动完毕缓存更新,以下是温馨的有些体会和认识。

静态财富揭橥的痛点

大家领会,缓存对于前端质量的优化是特别关键的,在标准宣布种类的时候,对于那多少个失常改动的静态能源例如各类JS工具库、CSS文件、背景图片等等我们会设置贰个超级大的缓存过期日子(max-age卡塔尔,当顾客再度访谈那个页面包车型地铁时候就足以一向运用缓存并非重复从服务器获取,那样不光能够缓慢解决服务端的压力,还足以节省互联网传输的流量,同有的时候候客商体验也更加好(顾客张开页面越来越快了卡塔 尔(英语:State of Qatar)。那样看起来很周密,你好本人好大家都好,but,理想是美好的,现实是凶恶的,假若存在这里样二个浏览器,强制缓存静态能源还不给您拨冗缓存的时机(Wechat,说的正是你!卡塔尔国,该如何做?就算你的服务端已履新,文件的Etag值已改动,但是微信便是不给您更新文件…请允许自个儿做三个悲怆的神色…

对于那么些难点,大家很自然的主张是在历次公布新本子的时候给全数静态财富的伏乞前面加上贰个本子参数或时刻戳,相像于/js/indx.js?ver=1.0.1,不过如此存在多个难题:

  1. Wechat对于加参数的静态财富如故事先使用缓存版本(实际测验的境况是这么的卡塔尔。
  2. 若是那样是低价的,那么对于还未有改动的静态财富也会再次从服务器获取而不是读取缓存,未有丰富利用缓存。

那正是说有未有意气风发种情势能够自动识别出哪位文件发出了变通并让客户端主动创新呢?答案是任天由命的。大家知晓二个文本的MD5能够唯黄金年代标志贰个文件。若文件发出了变动,文件的指纹值MD5也跟着变动。利用那本性格大家就足以标记出哪些静态能源爆发了变化,并让客商端主动立异。

什么样化解?

由以前文的牵线,大家掌握了能够运用文件的指印值来标记须要客商端主动改革的文书,可是怎么落到实处呢?经过和煦的思辨和调查商讨后,大概思路为:

  1. 在历次发表以前,利用Gulp对具有的静态财富开展预管理,重命名字为原文件名 + 文件MD5值 + 文件后缀名的形式。比如index.js重命名称叫index-c6c9492ce6.js
  2. 变化风姿浪漫份manifest,申明了预处理前后文件之间的附和关系.manifest文本的指南为:
JavaScript

{ "index.js": "index-c6c9492ce6.js", "lib/jQuery/jQuery.js":
"lib/jQuery/jQuery-683c73084c.js", "require.js":
"require-c8e8015f8d.js", "style.css": "style-125d3a3f82.css",
"tools.js": "tools-5666ee48e9.js" }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b6669294327058473-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b6669294327058473-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b6669294327058473-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f4b6669294327058473-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4b6669294327058473-1" class="crayon-line">
{
</div>
<div id="crayon-5b8f4b6669294327058473-2" class="crayon-line crayon-striped-line">
  &quot;index.js&quot;: &quot;index-c6c9492ce6.js&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-3" class="crayon-line">
  &quot;lib/jQuery/jQuery.js&quot;: &quot;lib/jQuery/jQuery-683c73084c.js&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-4" class="crayon-line crayon-striped-line">
  &quot;require.js&quot;: &quot;require-c8e8015f8d.js&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-5" class="crayon-line">
  &quot;style.css&quot;: &quot;style-125d3a3f82.css&quot;,
</div>
<div id="crayon-5b8f4b6669294327058473-6" class="crayon-line crayon-striped-line">
  &quot;tools.js&quot;: &quot;tools-5666ee48e9.js&quot;
</div>
<div id="crayon-5b8f4b6669294327058473-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在渲染视图模版的时候,依照manifest,将预处理前的静态资置换为预管理后的静态财富。
  2. 假如在浏览器端用到了模块加载器(这里以贯彻了速龙标准的requireJS为例卡塔尔,在历次发表的时候要求基于manifest对模块举办mapping,将配置文件以内联JS的样式写入到模版页面里面,肖似于:
JavaScript

&lt;script&gt; requirejs.config({ "baseUrl": "/js", "map": { "*": {
"index": "index-c6c9492ce6", "jquery":
"lib/jQuery/jQuery-683c73084c", "require": "require-c8e8015f8d",
"tools": "tools-5666ee48e9" } } }); &lt;/script&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f4b666929d715705975-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f4b666929d715705975-13">
13
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4b666929d715705975-1" class="crayon-line">
&lt;script&gt;
</div>
<div id="crayon-5b8f4b666929d715705975-2" class="crayon-line crayon-striped-line">
requirejs.config({
</div>
<div id="crayon-5b8f4b666929d715705975-3" class="crayon-line">
    &quot;baseUrl&quot;: &quot;/js&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-4" class="crayon-line crayon-striped-line">
    &quot;map&quot;: {
</div>
<div id="crayon-5b8f4b666929d715705975-5" class="crayon-line">
        &quot;*&quot;: {
</div>
<div id="crayon-5b8f4b666929d715705975-6" class="crayon-line crayon-striped-line">
            &quot;index&quot;: &quot;index-c6c9492ce6&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-7" class="crayon-line">
            &quot;jquery&quot;: &quot;lib/jQuery/jQuery-683c73084c&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-8" class="crayon-line crayon-striped-line">
            &quot;require&quot;: &quot;require-c8e8015f8d&quot;,
</div>
<div id="crayon-5b8f4b666929d715705975-9" class="crayon-line">
            &quot;tools&quot;: &quot;tools-5666ee48e9&quot;
</div>
<div id="crayon-5b8f4b666929d715705975-10" class="crayon-line crayon-striped-line">
        }
</div>
<div id="crayon-5b8f4b666929d715705975-11" class="crayon-line">
    }
</div>
<div id="crayon-5b8f4b666929d715705975-12" class="crayon-line crayon-striped-line">
});
</div>
<div id="crayon-5b8f4b666929d715705975-13" class="crayon-line">
&lt;/script&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

测试

为了印证可行性,自个儿做了个demo,代码托管在Github。经测验,能够全面包车型地铁化解之前提出的标题。

  1. 第三次载入页面
    图片 1
  2. 更改index.js, 刷新页面
    图片 2

我们发掘,唯有index.js在改换后被主动立异了,其他的静态能源均是直接行使的缓存!。

后记

有关前端品质优化,缓存一向是浓墨涂抹的单笔。若是利用好缓存调整,不仅能增高客商体验,减弱服务端流量压力,並且对于前端工程化的兴妖作怪也是很有帮带的。随着web系统的作业和成效的强盛,维护前端的职分将变得越来越费力,依据历史规律,当意气风发件事变得更为辛勤的时候,工程化是其唯风流罗曼蒂克的出路。今后的前端还很年轻,工程化的定义提出来不久,但自个儿相信,在各大互连网集团的前端们积极拉动下,前端工程化必定会将成为产业界标配。

打赏援救作者写出更加多好小说,多谢!

打赏作者

打赏援助本身写出越多好文章,多谢!

任选大器晚成种支付格局

图片 3 图片 4

1 赞 4 收藏 评论

至于小编:Natumsol

图片 5

Alibaba 前端程序猿 个人主页 · 小编的稿子 · 5 ·    

图片 6

本文由本港台最快开奖结果发布于新闻资讯,转载请注明出处:关于Web静态资源缓存自动更新的思考与实践

关键词:

上一篇:没有了

下一篇:Service Worker入门

最火资讯