xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 浅谈前端工程化,CSS布局奇技淫巧

浅谈前端工程化,CSS布局奇技淫巧

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-10-29 00:09

前面多个优化带来的想想,浅谈前端工程化

2015/10/26 · 前面三个职场 · 2 评论 · 工程化

初稿出处: 叶小钗(@欲苍穹)浅谈前端工程化,CSS布局奇技淫巧。   

Service Worker入门

2015/03/26 · JavaScript · Service Worker

原作出处: Matt Gaunt   译文出处:[w3ctech

  • 十年踪迹]()   

原生App具备Web应用普通所不辜负有的富离线体验,按时的敦默寡言更新,音信通告推送等效果。而新的Serviceworkers标准让在Web App上具有那几个作用成为只怕。

CSS布局奇伎淫巧:宽度自适应

2016/11/03 · CSS · 自适应

原稿出处: 无双   

css那个东西,说难简单,说轻松也不易于。小编感到最要害的依然经验的储存,正所谓的不积硅步,无以致千里。那生龙活虎密密层层随笔叙述三种css特殊布局的兑现,也当做为团结做个备忘吧。

第生机勃勃讲的是三列布局,左右两列宽度固定,中间一列宽度自适应

其后生可畏很好贯彻,左右两列分别左浮动和右浮动并给多少个稳住宽度,中间不转换,也不设定宽度。那样基本就足以了。但为了包容IE还必得做些专门的工作。

看下代码结构:

图片 1

效果为:

图片 2

此中列要不要设置margin-left和margin-right ?

只顾,中间那列要求把左右四个异乡距分别设为左右两列的宽度,不然会微微难点。如下:

在Google、火狐等规范浏览器下是如此的(包含IE8 ):

图片 3

而在IE6、IE7中是如此的(图是在IE6下截的)

图片 4

浅谈前端工程化,CSS布局奇技淫巧。小编们得以阅览中间那列子成分的margin-left或margin-right的起源是分歧等的,在IE6、IE7中,就算不给中间列设定margin-left和margin-right,它的子成分的左右异乡距的源点照旧是在左右两列宽的的基本功上的,犹如有margin-left和margin-right相符。所以为了各浏览器保持黄金年代致,中间那列依然设三个margin-left和margin-right为好。

IE6中的3px间隙bug

在上海教室的ie6截图中,大家看出各列之间有一条3px的间隔,那是唯有IE6才有的标题。

只要中间这列的margin-left和margin-right都为0的话,则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。

浅谈前端工程化,CSS布局奇技淫巧。但若是把高级中学级列的margin-left和margin-right分别为左右两列的大幅时(上面已经说了,那也是必得这么做的),就算把左列的margin-right设为-3px,右列的margin-left设为-3px也依然不曾效劳。此时还得把高中级列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行。如下:

图片 5

浅谈前端工程化,CSS布局奇技淫巧。末尾的代码

XHTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> body, div { margin:0; padding:0; } div { height:200px; color:#F00; } .left { float:left; width:100px; background:#00f; _margin-right:-3px; } .right { float:right; width:100px; background:#0f0; _margin-left:-3px; } .center { background:#333; margin:0 100px; _margin:0 97px; } </style> </head> <body> <div class="left">我是left</div> <div class="right">我是right</div> <div class="center">我是center</div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>宽度自适应布局</title>
<style>
    body, div {
        margin:0;
        padding:0;
    }
    div {
        height:200px;
        color:#F00;
    }
    .left {
        float:left;
        width:100px;
        background:#00f;
        _margin-right:-3px;
    }
    .right {
        float:right;
        width:100px;
        background:#0f0;
        _margin-left:-3px;
    }
    .center {
        background:#333;
        margin:0 100px;
        _margin:0 97px;
    }
</style>
</head>
<body>
<div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>
</body>
</html>

两列布局,一列宽度固定,另一列自适应布局也是这些道理的。

1 赞 3 收藏 评论

图片 6

重新优化的构思

这段时日对品种做了三次完整的优化,全站有了60%左右的升迁(本来载入速度已经1.2S左右了,优化度超低),算后生可畏算已经做了四轮的全站质量优化了,回看几遍的优化花招,基本上多少个字就可以说知道:

传输层面:减少央求数,减少伏乞量 推行层面:收缩重绘&回流

1
2
传输层面:减少请求数,降低请求量
执行层面:减少重绘&回流

传输层面包车型大巴常常有都以优化的宗旨点,而那一个范畴的优化要对浏览器有三个主干的认知,比方:

① 网页自上而下的剖释渲染,边分析边渲染,页面内CSS文件会堵塞渲染,异步CSS文件会造成回流

② 浏览器在document下载甘休会质量评定静态能源,新开线程下载(有并发上限),在带宽度约束的法则下,冬日并发会导致主财富速度下跌,进而影响首屏渲染

③ 浏览器缓存可用时会使用缓存能源,此时能够幸免央求体的传输,对质量有庞大加强

权衡质量的要害目标为首屏载入速度(指页面能够瞥见,不确定可交互),影响首屏的最大因素为倡议,所以恳请是页面真正的徘徊花,日常的话大家会做这么些优化:

Service Worker 是什么?

三个 service worker 是大器晚成段运维在浏览器后台进度里的本子,它独自于近期页面,提供了那些无需与web页面交互的意义在网页背后悄悄实行的本事。在以后,基于它能够兑现音讯推送,静默更新以致地理围栏等劳务,可是最近它首先要全数的功能是掣肘和处理网络央浼,满含可编制程序的响应缓存管理。

何以说这么些API是一个相当棒的API呢?因为它使得开采者能够支撑特别好的离线体验,它授予开辟者完全调控离线数据的本事。

在service worker建议在此之前,其余三个提供开辟者离线体验的API叫做App Cache。可是App Cache有些局限性,举个例子它可以超级轻松地消除单页应用的标题,不过在多页应用上会很麻烦,而Serviceworkers的面世正是为了缓慢解决App Cache的痛点。

上面详细说一下service worker有怎么着供给小心的地点:

  • 它是JavaScript Worker,所以它无法一向操作DOM。可是service worker能够经过postMessage与页面之间通讯,把消息文告给页面,假使须要的话,让页面本人去操作DOM。
  • Serviceworker是二个可编制程序的互联网代理,允许开辟者调整页面上管理的网络央浼。
  • 在不被利用的时候,它会自个儿终止,而当它再也被用到的时候,会被再一次激活,所以你不可能注重于service worker的onfecth和onmessage的管理函数中的全局状态。若是你想要保存一些长久化的音讯,你能够在service worker里使用IndexedDB API。
  • Serviceworker大批量使用promise,所以只要您不打听怎么是promise,那你必要先读书这篇文章。

压缩要求数

① 合併样式、脚本文件

② 合并背景图片

③ CSS3图标、Icon Font

Service Worker的生命周期

Service worker具备三个一心独立于Web页面包车型地铁生命周期。

要让二个service worker在你的网址上生效,你要求先在您的网页中注册它。注册多个service worker之后,浏览器会在后台默默运行贰个service worker的装置进程。

在安装过程中,浏览器会加载并缓存一些静态能源。借使具备的文本被缓存成功,service worker就设置成功了。固然有其余文件加载或缓存战败,那么安装进程就能够停业,service worker就不可能被激活(也即未能安装成功)。尽管产生这么的标题,别顾虑,它会在下一次再品尝安装。

当安装到位后,service worker的下一步是激活,在这里黄金时代阶段,你还足以荣升二个service worker的本子,具体内容大家会在背后讲到。

在激活之后,service worker将接管全体在友好管辖域范围内的页面,可是豆蔻年华旦二个页面是刚刚注册了service worker,那么它这一回不会被接管,到下叁次加载页面包车型客车时候,service worker才会生效。

当service worker接管了页面之后,它也许有三种境况:要么被结束以节省里部存款和储蓄器,要么会管理fetch和message事件,那五个事件分别发出于二个网络乞求现身依旧页面上发送了一个新闻。

下图是贰个简化了的service worker初次安装的生命周期:

图片 7

降落需要量

① 开启GZip

② 优化静态财富,jQuery->Zepto、阉割IScroll、去除冗余代码

③ 图片无损压缩

④ 图片延迟加载

⑤ 减少Cookie携带

洋洋时候,大家也会动用雷同“时间换空间、空间换时间”的做法,譬如:

① 缓存为王,对峙异较迟缓的能源&接口做缓存(浏览器缓存、localsorage、application cache这些坑多)

② 按需加载,先加载重要财富,其他资源延迟加载,对非首屏能源滚动加载

③ fake页能力,将页面最早必要出示Html&Css内联,在页面所需能源加载截止前最少可看,理想状态是index.html下载结束即呈现(2G 5S内)

④ CDN

……

从工程的角度来看,上述优化点过半是重复的,平常在发布时候就平昔选拔项目营造工具做掉了,还会有局地只是轻易的服务器配置,开辟时没有必要关注。

能够看来,大家所做的优化都是在调整和缩小需要数,减弱央求量,减小传输时的耗费时间,也许通过三个布署,优先加载首屏渲染所需能源,而后再加载交互所需能源(举例点击时候再加载UI组件),Hybrid APP那地点应当尽恐怕多的将国有静态财富位居native中,举例第三方库,框架,UI甚至城市列表这种常用业务数据。

在我们起先写码早先

从这个项目地址拿到chaches polyfill。

这个polyfill支持CacheStorate.match,Cache.add和Cache.addAll,而现在Chrome M40实现的Cache API还没帮忙那些主意。

将dist/serviceworker-cache-polyfill.js放到你的网址中,在service worker中经过importScripts加载进来。被service worker加载的剧本文件会被电动缓存。

JavaScript

importScripts('serviceworker-cache-polyfill.js');

1
importScripts('serviceworker-cache-polyfill.js');

需要HTTPS

在开辟阶段,你能够由此localhost使用service worker,可是假使上线,就必要您的server扶持HTTPS。

您能够因此service worker抑遏连接,假造和过滤响应,非常逆天。就算你能够限制本身不干坏事,也可能有人想干坏事。所感觉了防御外人使坏,你必须要在HTTPS的网页上登记service workers,那样大家才方可防范加载service worker的时候不被人渣点窜。(因为service worker权限十分的大,所以要有备无患它自个儿被歹徒窜改利用——译者注)

Github Pages无独有偶是HTTPS的,所以它是几个地道的自然实验田。

万大器晚成您想要让您的server协助HTTPS,你须要为您的server得到贰个TLS证书。区别的server安装方法分歧,阅读扶植文档并因而Mozilla’s SSL config generator打听最棒实行。

拦路虎

有一点网址开始时代不慢,不过随着量的储存,BUG更加的多,速度也更为慢,一些前端会采取上述优化花招做优化,可是收效甚微,八个比较标准的事例便是代码冗余:

① 早先的CSS全部坐落了贰个文书中,新大器晚成轮的UI样式优化,新老CSS难以拆分,CSS体积会追加,假若有事情公司利用了公共样式,景况更不堪设想;

② UI组件更新,不过假若有作业公司脱离接口操作了组件DOM,将产生新组件DOM更新受限,最差的情景下,客商会加载四个零部件的代码;

③ 胡乱使用第三方库、组件,导致页面加载大批量无用代码;

……

如上难点会分化等级次序的增加能源下载体量,如若任其自流会产生风流洒脱多级工程难点:

① 页面关系复杂,须要迭代轻易出BUG;

② 框架每回晋级都会形成额外的央浼量,常加载一些事情无需的代码;

③ 第三方库泛滥,且难以维护,有BUG也改不了;

④ 业务代码加载大批量异步模块能源,页面诉求数增添;

……

为求急速占有商场,业务支出时间再三迫切,使用框架级的HTML&CSS、绕过CSS Pepsi-Cola使用背景图片、引进第三方工具库或许UI,会平时发出。当蒙受质量瓶颈时,假使不从源头化解难题,用守旧的优化手腕做页面级其他优化,会并发高速页面又被玩坏的情事,三遍优化结束后本人也在图谋二个主题材料:

前面贰个每一遍品质优化的一手皆一模二样;代码的可维护性也基本是在细分职分; 既然每一趟优化的目标是雷同的,每便完毕的进程是相仿的,而每回重复开荒项目又基本是要每每的,那么工程化、自动化恐怕是那整个难点的末尾答案

1
2
前端每次性能优化的手段皆大同小异;代码的可维护性也基本是在细分职责;
既然每次优化的目的是相同的,每次实现的过程是相似的,而每次重新开发项目又基本是要重蹈覆辙的,那么工程化、自动化可能是这一切问题的最终答案

工程难题在类型积存到个别后大概会生出,日常的话会有多少个情景预示着工程难点应际而生了:

① 代码编写&调节和测验困难

② 业务代码不好维护

③ 网站质量广泛不佳

④ 品质难题再次现身,而且有不可修复之势

像上面所描述情况,就是贰个优秀的工程难点;定位难题、开掘标题、消弭难题是大家管理难题的花招;而什么防止肖似品种的主题素材再一次发生,正是工程化须要做的事情,轻巧说来,优化是解决难点,工程化是防止难题,明日我们就站在工程化的角度来消除后生可畏都部队分前端优化难题,幸免其卷土重来。

文中是自个儿个人的片段开支经历,希望对各位有用,也期待各位万般扶植商讨,提议文中不足以至建议您的片段建议

使用Service Worker

近些日子大家有了polyfill,何况化解了HTTPS,让大家看见到底怎么用service worker。

肃清冗余

我们这里做的第三个事情正是去掉优化路上第二个障碍:代码冗余(做代码精简),单从二个页面包车型客车加载来讲,他需求以下能源:

① 框架MVC骨架模块&框架等第CSS

② UI组件(header组件、日历、弹出层、消息框……)

③ 业务HTML骨架

④ 业务CSS

⑤ 业务Javascript代码

⑥ 服务接口服务

因为产品&视觉会平日折腾全站样式加之UI的八面玲珑,UI最轻巧生出冗余的模块。

哪些注册和设置service worker

要设置service worker,你供给在您的页面上登记它。这么些手续告诉浏览器你的service worker脚本在哪个地方。

JavaScript

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js').then(function(registration) { // Registration was successful console.log('ServiceWorker registration successful with scope: ', registration.scope); }).catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }

1
2
3
4
5
6
7
8
9
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(function(registration) {
    // Registration was successful
    console.log('ServiceWorker registration successful with scope: ',    registration.scope);
  }).catch(function(err) {
    // registration failed :(
    console.log('ServiceWorker registration failed: ', err);
  });
}

地点的代码检查service worker API是还是不是可用,假诺可用,service worker /sw.js 被注册。

借使这几个service worker已经被注册过,浏览器会自行忽视上边包车型大巴代码。

有二个索要极度表达的是service worker文件的门路,你势必注意到了在此个例子中,service worker文件被放在此个域的根目录下,那代表service worker和网址同源。换句话说,那一个service work将会吸收接纳那个域下的兼具fetch事件。若是自身将service worker文件注册为/example/sw.js,那么,service worker只能收到/example/路径下的fetch事件(例如: /example/page1/, /example/page2/)。

明天您能够到 chrome://inspect/#service-workers 检查service worker是否对你的网站启用了。

图片 8

当service worker第大器晚成版被达成的时候,你也得以在chrome://serviceworker-internals中查看,它很有用,通过它可以最直观地熟悉service worker的生命周期,不过这个功能很快就会被移到chrome://inspect/#service-workers中。

您会意识那个职能能够很有利地在二个模仿窗口中测量检验你的service worker,那样您可以关闭和重复展开它,而不会潜濡默化到您的新窗口。任何成立在模仿窗口中的注册服务和缓存在窗口被关门时都将未有。

UI组件

UI组件自己富含完整的HTML&CSS&Javascript,八个深根固柢的组件下载量能够达到规定的规范10K上述,就UI部分来讲轻松变成四个工程化难题:

① 进级发生代码冗余

② 对外接口变化变成事情进级须要格外支付

Service Worker的设置步骤

在页面上完结登记手续之后,让我们把注意力转到service worker的台本里来,在此其间,大家要瓜熟蒂落它的设置步骤。

在最核心的例证中,你要求为install事件定义一个callback,并调控如何文件你想要缓存。

JavaScript

// The files we want to cache var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; // Set the callback for the install step self.addEventListener('install', function(event) { // Perform install steps });

1
2
3
4
5
6
7
8
9
10
11
// The files we want to cache
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
// Set the callback for the install step
self.addEventListener('install', function(event) {
    // Perform install steps
});

在我们的install callback中,我们须求实践以下步骤:

  1. 展开叁个缓存
  2. 缓存大家的文书
  3. 垄断(monopoly)是或不是享有的能源是还是不是要被缓存

JavaScript

var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache = [ '/', '/styles/main.css', '/script/main.js' ]; self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open(CACHE_NAME) .then(function(cache) { console.log('Opened cache'); return cache.addAll(urlsToCache); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
  '/',
  '/styles/main.css',
  '/script/main.js'
];
 
self.addEventListener('install', function(event) {
  // Perform install steps
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Opened cache');
        return cache.addAll(urlsToCache);
      })
  );
});

地点的代码中,大家因而caches.open打开我们钦命的cache文件名,然后我们调用cache.addAll并传到大家的文书数组。那是经过层层promise(caches.open 和 cache.addAll)达成的。event.waitUntil获得三个promise并选拔它来收获安装成本的年月以至是还是不是安装成功。

假使具备的公文都被缓存成功了,那么service worker就安装成功了。假若其余贰个文本下载失败,那么安装步骤就能倒闭。这么些艺术允许你依据于您自个儿钦点的兼具财富,但是那意味着你必要丰硕谨慎小心地调整哪些文件要求在设置步骤中被缓存。钦点了太多的公文的话,就能大增设置战败率。

地点只是一个简短的例证,你能够在install事件中进行别的操作依然以致忽略install事件。

UI升级

最美妙的提高是维持对外的接口不改变以至保持DOM结构不改变,但好多气象的UI晋级其实是UI重做,最坏的情事是不做老接口宽容,当时工作同事便须求改过代码。为了防范事情抱怨,UI制笔者往往会保留多个零件(UI UI1),假如原先这几个UI是着力重视新整合件(比如是UIHeader组件),便会一向打包至基本框架包中,这个时候便应际而生了新老组件共存的规模,这种状态是必须防止的,UI晋级须求遵循四个规范化:

① 宗旨重视新整合件必需保持单纯,相近成效的中坚组件只可以有三个

② 组件进级必得做接口宽容,新的特点可以做加法,绝不允许对接口做减法

怎么缓存和再次来到Request

你已经安装了service worker,你今后得以回来您缓存的央求了。

当service worker棉被服装置成功还要客商浏览了另七个页面也许刷新了当前的页面,service worker将初始接到到fetch事件。上面是贰个例子:

JavaScript

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
 
        return fetch(event.request);
      }
    )
  );
});

地方的代码里大家定义了fetch事件,在event.respondWith里,大家传入了二个由caches.match发生的promise.caches.match 查找request中被service worker缓存命中的response。

要是大家有叁个命中的response,大家回到被缓存的值,不然大家再次回到一个实时从网络央浼fetch的结果。那是三个非常轻松的例证,使用全数在install步骤下被缓存的能源。

只要大家想要增量地缓存新的乞请,我们能够透过管理fetch央浼的response并且增进它们到缓存中来兑现,举例:

JavaScript

self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache hit - return response if (response) { return response; } // IMPORTANT: Clone the request. A request is a stream and // can only be consumed once. Since we are consuming this // once by cache and once by the browser for fetch, we need // to clone the response var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) { // Check if we received a valid response if(!response || response.status !== 200 || response.type !== 'basic') { return response; } // IMPORTANT: Clone the response. A response is a stream // and because we want the browser to consume the response // as well as the cache consuming the response, we need // to clone it so we have 2 stream. var responseToCache = response.clone(); caches.open(CACHE_NAME) .then(function(cache) { cache.put(event.request, responseToCache); }); return response; } ); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Cache hit - return response
        if (response) {
          return response;
        }
 
        // IMPORTANT: Clone the request. A request is a stream and
        // can only be consumed once. Since we are consuming this
        // once by cache and once by the browser for fetch, we need
        // to clone the response
        var fetchRequest = event.request.clone();
 
        return fetch(fetchRequest).then(
          function(response) {
            // Check if we received a valid response
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }
 
            // IMPORTANT: Clone the response. A response is a stream
            // and because we want the browser to consume the response
            // as well as the cache consuming the response, we need
            // to clone it so we have 2 stream.
            var responseToCache = response.clone();
 
            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });
 
            return response;
          }
        );
      })
    );
});

代码里我们所做政工包蕴:

  1. 丰富贰个callback到fetch央求的 .then 方法中
  2. 万风流倜傥我们获得了三个response,我们举行如下的反省:
    1. 确定保障response是平价的
    2. 反省response的情状是还是不是是200
    3. 确认保障response的体系是basic,这意味着乞请作者是同源的,非同源(即跨域)的央浼也不能够被缓存。
  3. 若是大家由此了自己商量,clone其生龙活虎伏乞。这么做的缘故是生机勃勃旦response是二个Stream,那么它的body只好被读取二遍,所以我们得将它克隆出来,后生可畏份发给浏览器,生机勃勃份发给缓存。

UI组成

品类之初,分层较好的组织会有二个公共的CSS文件(main.css),三个事务CSS文件,main.css包罗公共的CSS,并且会含有全部的UI的样式:

图片 9

八个月后工作频道增,UI组件供给后生可畏多便轻巧膨胀,缺欠即刻便暴表露来了,最早main.css大概仅有10K,然则不出七个月就能够膨胀至100K,而各样职业频道一齐首便必要加载那100K的体制文件页面,可是里面绝大比超多的UI样式是首屏加载用不到的。

据此相比较好的做法是,main.css只含有最中央的体裁,理想图景是何许业务样式功用皆不要提供,种种UI组件的体制打包至UI中按需加载:

图片 10

如此UI拆分后,main.css总是处在最基础的样式部分,而UI使用时按需加载,纵然现身三个风流罗曼蒂克律组件也不会促成多下载财富。

怎么着翻新三个Service Worker

你的service worker总有须求更新的那一天。当那一天惠临的时候,你须要遵从如下步骤来更新:

  1. 履新您的service worker的JavaScript文件
    1. 当顾客浏览你的网址,浏览器尝试在后台下载service worker的台本文件。只要服务器上的文本和当半夏件有贰个字节不相同,它们就被判定为须要更新。
  2. 更新后的service worker将开首运行,install event被再度触发。
  3. 在这里个小时节点上,当前页素不相识效的仍然是老版本的service worker,新的servicer worker将跻身”waiting”状态。
  4. 时下页面被关门之后,老的service worker进程被杀掉,新的servicer worker正式生效。
  5. 假如新的service worker生效,它的activate事件被触发。

代码更新后,经常需求在activate的callback中实施三个拘押cache的操作。因为您会要求清除掉此前旧的数目。咱们在activate并非install的时候实践那几个操作是因为大器晚成旦大家在install的时候立时施行它,那么依旧在运营的旧版本的多寡就坏了。

前面我们只行使了四个缓存,叫做my-site-cache-v1,其实我们也可以使用多个缓存的,例如一个给页面使用,一个给blog的内容提交使用。这意味着,在install步骤里,我们可以创建两个缓存,pages-cache-v1和blog-posts-cache-v1,在activite步骤里,我们可以删除旧的my-site-cache-v1。

下边包车型大巴代码能够循环全数的缓存,删除掉全部不在白名单中的缓存。

JavaScript

self.addEventListener('activate', function(event) { var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1']; event.waitUntil( caches.keys().then(function(cacheNames) { return Promise.all( cacheNames.map(function(cacheName) { if (cacheWhitelist.indexOf(cacheName) === -1) { return caches.delete(cacheName); } }) ); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
self.addEventListener('activate', function(event) {
 
  var cacheWhitelist = ['pages-cache-v1', 'blog-posts-cache-v1'];
 
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:浅谈前端工程化,CSS布局奇技淫巧

关键词: bbin娱乐平台

上一篇:没有了

下一篇:没有了