worker实现加速,4的网站静态加速

行使Service worker落成加速/离线访问静态blog网站

2017/02/19 · JavaScript
· Service Worker

初稿出处: Yang
Bo   

以往非常流行基于Github
page和markdown的静态blog,极度适合技术的思考和习惯,针对不一样的言语都有一部分好好的静态blog系统出现,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的性格12分适合做缓存来增长速度页面包车型地铁走访,就利用Service
worker
来促成加快,结果是除了PageSpeed,CDN这一个科学普及的服务器和互联网加快之外,通过客户端达成了更好的拜会体验。

利用 Service worker 创造一个分外简单的离线页面

2016/06/07 · JavaScript
· 1 评论 · Service
Worker

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:Dean
Hume。欢迎到场翻译组。

让大家想像以下场景:我们这儿在一辆通往农村的高铁上,用移动装备瞧着一篇很棒的文章。与此同时,当你点击“查看更加多”的链接时,高铁忽然进入了隧道,导致移动设备失去了网络,而
web 页面会呈现出类似以下的情节:

图片 1

那是一定令人寒心的感受!幸运的是,web
开发者们能通过一些新特点来改良那类的用户体验。小编近年径直在折腾 ServiceWorkers,它给 web 带来的无尽恐怕性总能给自身惊喜。Service Workers
的地道特质之一是同意你检测互联网请求的气象,并让你作出相应的响应。

在那篇小说里,小编打算用此天性检查用户的此时此刻网络连接情状,若是没连接则赶回三个顶级级简单的离线页面。就算那是贰个不胜基础的案例,但它能给你带来启发,让您驾驭启动并运行该天性是何等的不难!假使你没精通过
瑟维斯 Worker,我提出您看看此 Github
repo,明白越来越多相关的音信。

在本案例起先前,让大家先不难地探访它的行事流程:

  1. 在用户第三回访问大家的页面时,大家会设置 ServiceWorker,并向浏览器的缓存添加大家的离线 HTML 页面
  2. 下一场,若是用户打算导航到另一个 web
    页面(同二个网站下),但此时已断网,那么大家将赶回已被缓存的离线
    HTML 页面
  3. 可是,假使用户打算导航到其余1个 web
    页面,而此刻网络已接二连三,则能照常浏览页面

Varnish 的一对风味:

那是一篇有关 <u>怎样加速网站访问速度</u> 的译文,原作出自
雅虎开发者网站,原标题为
Best Practices for Speeding Up Your Web
Site。

加快/离线访问只需三步

  • 首页添加注册代码

JavaScript

<script> if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’); } </script>

1
2
3
4
5
<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’);
}
</script>
  • 复制代码

将封存到您的网站根目录下

  • 修改不缓存域名列表及离线状态页面

在你的sw.js中修改

JavaScript

const ignoreFetch = [ /https?:\/\/cdn.bootcss.com\//,
/https?:\/\/static.duoshuo.com\//,
/https?:\/\/www.google-analytics.com\//,
/https?:\/\/dn-lbstatics.qbox.me\//, ];

1
2
3
4
5
6
const ignoreFetch = [
  /https?:\/\/cdn.bootcss.com\//,
  /https?:\/\/static.duoshuo.com\//,
  /https?:\/\/www.google-analytics.com\//,
  /https?:\/\/dn-lbstatics.qbox.me\//,
];

打开Chrome Dev Tools->Source,看看本身的blog都引用了哪些第①方财富,每个加到忽略列表里。

图片 2

在根目录下添加offline.html,在没有互连网且缓存中也绝非时使用,效果如下:

图片 3

在根目录下添加offline.svg,在无网络时图片能源请求重返该文件。

让我们起首吧

假设你有以下 HTML 页面。那纵然十三分基础,但能给你完整思路。

XHTML

<!DOCTYPE html>

1
<!DOCTYPE html>

随即,让大家在页面里登记 瑟维斯 Worker,那里仅创制了该指标。向刚刚的
HTML 里添加以下代码。

JavaScript

<script> // Register the service worker // 注册 service worker if
(‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/service-worker.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); }); }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
// Register the service worker
// 注册 service worker
if (‘serviceWorker’ in navigator) {
    navigator.serviceWorker.register(‘/service-worker.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);
   });
}
</script>

接下来,大家要求创制 Service Worker 文件并将其命名为
‘service-worker.js‘。大家打算用那些 Service Worker
拦截任何互连网请求,以此检查互联网的连接性,并遵照检查结果向用户重回最契合的始末。

JavaScript

‘use strict’; var cacheVersion = 1; var currentCache = { offline:
‘offline-cache’ + cacheVersion }; const offlineUrl =
‘offline-page.html’; this.addEventListener(‘install’, event => {
event.waitUntil( caches.open(currentCache.offline).then(function(cache)
{ return cache.addAll([ ‘./img/offline.svg’, offlineUrl ]); }) ); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
‘use strict’;
 
var cacheVersion = 1;
var currentCache = {
  offline: ‘offline-cache’ + cacheVersion
};
const offlineUrl = ‘offline-page.html’;
 
this.addEventListener(‘install’, event => {
  event.waitUntil(
    caches.open(currentCache.offline).then(function(cache) {
      return cache.addAll([
          ‘./img/offline.svg’,
          offlineUrl
      ]);
    })
  );
});

在上头的代码中,大家在设置 瑟维斯 Worker
时,向缓存添加了离线页面。若是大家将代码分为几小块,可看到前几行代码中,笔者为离线页面钦定了缓存版本和UPRADOL。假若您的缓存有分化版本,那么你只需立异版本号即可不难地铲除缓存。在大概在第二2
行代码,作者向那一个离线页面及其能源(如:图片)发出请求。在收获成功的响应后,我们将离线页面和血脉相通能源丰硕到缓存。

现行反革命,离线页面已存进缓存了,大家可在要求的时等候检查索它。在同3个 ServiceWorker 中,我们须求对无网络时重回的离线页面添加相应的逻辑代码。

JavaScript

this.add伊芙ntListener(‘fetch’, event => { // request.mode = navigate
isn’t supported in all browsers // request.mode = naivgate
并从未拿走全部浏览器的扶助 // so include a check for Accept: text/html
header. // 由此对 header 的 Accept:text/html 实行核实 if
(event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ &&
event.request.headers.get(‘accept’).includes(‘text/html’))) {
event.respondWith( fetch(event.request.url).catch(error => { //
Return the offline page // 重临离线页面 return caches.match(offlineUrl);
}) ); } else{ // Respond with everything else if we can //
重临任何大家能回来的东西 event.respondWith(caches.match(event.request)
.then(function (response) { return response || fetch(event.request); })
); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
this.addEventListener(‘fetch’, event => {
  // request.mode = navigate isn’t supported in all browsers
  // request.mode = naivgate 并没有得到所有浏览器的支持
  // so include a check for Accept: text/html header.
  // 因此对 header 的 Accept:text/html 进行核实
  if (event.request.mode === ‘navigate’ || (event.request.method === ‘GET’ && event.request.headers.get(‘accept’).includes(‘text/html’))) {
        event.respondWith(
          fetch(event.request.url).catch(error => {
              // Return the offline page
              // 返回离线页面
              return caches.match(offlineUrl);
          })
    );
  }
  else{
        // Respond with everything else if we can
        // 返回任何我们能返回的东西
        event.respondWith(caches.match(event.request)
                        .then(function (response) {
                        return response || fetch(event.request);
                    })
            );
      }
});

为了测试该功能,你能够选择 Chrome
内置的开发者工具。首先,导航到你的页面,然后一旦设置上了 ServiceWorker,就开辟 Network 标签并将节流(throttling)改为
Offline。(译者注:若将节流设置为 Offline
没效果,则可通过关闭互联网或然经过360有惊无险警卫禁止 Chrome 访问互连网)

图片 4

worker实现加速,4的网站静态加速。假如你刷新页面,你应该能来占星应的离线页面!

图片 5

假若您只想大概地质衡量试该意义而不想写任何代码,那么你能够访问作者已开立好的
demo。其余,上述全体代码可以在
Github repo 找到。

自笔者清楚用在此案例中的页面很简短,但您的离线页面则取决于你自己!假使你想浓密该案例的内容,你能够为离线页面添加缓存破坏(
cache busting),如:
此案例。

(1)、是基于内部存款和储蓄器缓存,重启后数据将不复存在;

以下为译文:

加速效果

首页加快后,网络请求从16降为1,加载时间从2.296s降为0.654s,获得了一晃加载的结果。

图片 6

基于webpagetest

查看测试结果

进展阅读

其余,还有几个很棒的离线作用案例。如:Guardian 塑造了二个享有 crossword
puzzle(填字游戏)的离线
web 页面 –
由此,尽管等待互联网重连时(即已在离线状态下),也能找到一点乐趣。笔者也援引看看
Google Chrome Github
repo,它富含了广大不比的
Service Worker 案例 – 个中一些使用案例也在那!

可是,若是你想跳过上述代码,只是想大致地通过3个库来处理相关操作,那么自个儿推荐您看看
UpUp。这是2个轻量的脚本,能让您更自在地选择离线功用。

打赏支持自身翻译越多好文章,多谢!

打赏译者

(2)、利用虚拟内存格局,I/O 品质好;


加快/离线原理探索

打赏帮忙自个儿翻译越来越多好小说,谢谢!

任选一种支付情势

图片 7
图片 8

1 赞 3 收藏 1
评论

(3)、支持设置 0~60 秒内的标准缓存时间;

增长速度网站访问的一流实践

名列三甲的绩效团队曾经鲜明了部分使网页急忙的最佳做法。该清单蕴含分为多少个项目标三十三个最佳做法。


什么是 Service worker

图片 9

如上图,Service
worker

是一种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当3个页面注册了多少个
Service
worker
,它就足以注册一多重事件处理器来响应如网络请求和音信推送这几个事件。Service
worker

能够被用来保管缓存,当响应1个网络请求时得以安顿为回到缓存依旧从网络获取。由于Service
worker

是遵照事件的,所以它只在处理那几个事件的时候被调入内部存款和储蓄器,不用担心常驻内部存款和储蓄器占用财富导致系统变慢。

关于小编:刘健超-J.c

图片 10

前端,在路上…
个人主页 ·
小编的篇章 ·
19 ·
    

图片 11

(4)、VCL 配置管理相比较灵敏;

Content

  1. 最小化 HTTP 请求
    最后用户响应时间的80%用在此以前端。抢先二分之一日子都以下载页面中的全部组件:图像,样式表,脚本,Flash等。减弱组件数量又回落了呈现页面所需的HTTP请求数量。那是更快页面包车型地铁重大。

减去页面中组件数量的一种办法是简化页面包车型大巴设计。可是,有没有措施构建更拉长内容的页面,同时也能兑现高效的响应时间?以下是减掉HTTP请求数量的一些技艺,同时依旧支撑添加的页面设计。

重组文件
是通过将具备脚本组合到单个脚本中以及将持有CSS组合到单个样式表中的措施来压缩HTTP请求的数据。当脚本和样式表从页到页不一致时,组合文件更具挑衅性,但使这一部分本子进度能够革新响应时间。

CSS
Sprites
是压缩图像请求数量的首要选用办法。将您的背景图像合并为八个图像,并采取CSS
background-imagebackground-position 属性来展现所需的图像段。

图像影像将五个图像组合成单个图像。总体大小大约相同,但减去HTTP请求数量会加紧页面速度。假设图像在页面中是延续的,则图像投射只好工作,例如导航栏。定义图像投射的坐标大概很麻烦,容易失误。

行使导航空图像投射也不行访问,因而不引进应用。
内联图像
使用data:URL方案将图像数据嵌入到实在页面中。这足以追加HTML文书档案的大小。将内联图像组合到(缓存)样式表中是压缩HTTP请求并幸免增添页面大小的一种形式。全体主流浏览器都不帮忙内联图片。

收缩页面中HTTP请求的数量是始于的地点。那是增长第②遍访问者功效的最注重的指点方针。如Tenni
Theurer的博客文章中所述浏览器缓存使用 –
揭示!,您网站的每一天访问者中有40-60%的空域缓存。

使你的页面十分的快为那些率先次访问者是更好的用户体验的重要。

  1. 减少DNS查询
    域名系列(DNS)将主机名映射到IP地址,就像是话簿将人口姓名映射到他俩的电话号码一样。当你在浏览器中输入www.yahoo.com时,浏览器联系的DNS解析器会回到该服务器的IP地址。DNS有一个资金。DNS常常须求20-120阿秒来搜寻给定主机名的IP地址。在形成DNS查找此前,浏览器不可能从此主机名下载任何内容。
    缓存DNS查找以赢得更好的习性。这种缓存能够在由用户的ISP或局域网维护的异样缓存服务器上发生,可是也设有在个人用户的处理器上发出的缓存。DNS音讯保存在操作系统的DNS缓存(Microsoft
    Windows中的“DNS客户端服务”)中。超越二分之一浏览器都有投机的缓存,与操作系统的缓存分开。只要浏览器将DNS记录封存在投机的缓存中,就不会对操作系统造成记录请求的劳动。
    暗中同意处境下,Internet Explorer会缓存DNS查找三十多分钟,由
    DnsCacheTimeout注册表设置钦命。Firefox缓存DNS查找1分钟,由network.dnsCacheExpiration配置安装控制。(法斯特erfox将其转移为1小时。)
    当客户端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的多少约等于网页中绝无仅有主机名的多少。那包涵在页面包车型地铁U奥迪Q7L,图像,脚本文件,样式表,Flash对象等中采纳的主机名。减少唯一主机名的数量减小了DNS查找的数量。
    调整和裁减唯一主机名的数量有也许回落页面中生出的相互下载量。制止DNS查找收缩响应时间,但压缩并行下载或然会追加响应时间。作者的清规戒律是将这一个组件分成至少四个但不超越多个主机名。那造成裁减DNS查找并允许中度并行下载之间的大好折中。

  2. 制止重定向
    选取301和302情形代码实现重定向。以下是301响应中HTTP头的示范:

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

浏览器自动将用户带到该Location字段中钦定的U奥迪Q3L。重定向所需的拥有音信都在头文件中。响应的身体平常是空的。固然她们的名字,在实践中也不会缓存301和302的响应,除非额外的题目,例如
Expires或者Cache-Control标明它应有是。元刷新标签和JavaScript是将用户指引到别的UMuranoL的别样办法,但尽管必须执行重定向,首要选用技术是运用标准的3xx
HTTP状态代码,首如若为着保证后退按钮常常办事。

要铭记在心的是重定向会放慢用户体验。在用户和HTML文书档案之间插入重定向会延迟页面中的全数剧情,因为页面中的任何内容都不能够被渲染,并且在HTML文书档案到达以前不会开首下载任何组件。

最浪费的重定向之一是几度发生的,Web开发职员经常不会发现到那一点。当U卡宴L中缺少底部斜线(/)时,会发生这种景况,不然应当有叁个。
例如,去
http://astrology.yahoo.com/astrology
获得三个暗含重定向到
http://astrology.yahoo.com/astrology/
(注意添加的尾巴斜杠)的301响应。即使您使用Apache处理程序,则采纳Aliasormod_rewriteor
DirectorySlash指令在Apache中开展修补。

将旧网站一而再到新的网站是重定向的另2个大规模用途。其余包涵连日来网站的差别部分,并依据一些规则(浏览器类型,用户帐户类型等)辅导用户。使用重定向连接八个网站很不难,只须要很少的叠加编码。就算在这么些情形下利用重定向会下降开发人士的复杂性,但会减低用户体验。那种使用重定向的替代方案包蕴运用Aliasmod_rewrite设若四个代码路径托管在同样台服务器上。假诺域名变化是选择重定向的原由,一种替代形式是成立二个CNAME与组合(即建立了1个从域名指向另1个别称DNS记录)Aliasmod_rewrite

  1. 使用 Ajax Cacheable
    Ajax的3个引人注意的裨益是它为用户提供及时汇报,因为它从后端Web服务器异步请求信息。可是,使用Ajax不能保证用户不会等待他们等待异步JavaScript和XML响应再次来到的拇指。在俯拾就是运用中,用户是或不是维持等待取决于Ajax的利用方法。例如,在根据Web的电子邮件客户端中,用户将随地等待Ajax请求的结果来搜寻与其招来条件分外的有着电子邮件。首要的是要铭记在心,“异步”并不代表“弹指时”。

为了增强质量,首要的是优化那个Ajax响应。提升Ajax质量的最关键的情势是使响应可缓存,如增进到期或缓存控制头。
一部分任何规则也适用于Ajax:

  • Gzip组件
  • 减少DNS查找
  • 缩小JavaScript
  • 防止重定向
  • 配置ETag

咱俩来看2个例子。
Web 2.0电子邮件客户端或然会使用Ajax下载用户的机关完结地址簿。
设若用户上次选用电子邮件互联网应用程序后用户没有改动她的地址簿,若是Ajax响应得以行使以后的Expires或Cache-Control标头实行缓存,则能够从缓存读取此前的地址簿响应。必须通报浏览器曾几何时使用在此以前缓存的地址簿响应,而不是伸手新的地址簿响应。那足以经过向地址簿Ajax
UQX56L添加八个时间戳来表示,例如,用户最终一遍修改她的地点簿&t=1一九〇四41612。借使地址簿自上次下载以来没有被修改,则时间戳将是同样的,并且地址簿将从浏览器的缓存中读取,从而免去额外的HTTP往返。

就算你的Ajax响应是动态成立的,并且或者仅适用于单个用户,但仍可缓存它们。那样做会使你的Web
2.0应用程序更快。

  1. 后负载组件
    您能够仔细看看你的页面,问问本人:“为了最初渲染页面相对必要什么样?”
    其他的始末和组件能够等待。

JavaScript是在onload事件在此以前和事后拆分的优秀候选者。
譬如,尽管你有JavaScript代码和库开始展览拖放和卡通,那么能够等待,因为在起来呈现之后拖动页面上的成分。
其余寻找候选人举办中期加载的地点包含隐藏的剧情(用户操作前边世的始末)以及下方的图像。

支援你化解难点的工具:YUI Image
Loader允许你将图像延迟到折叠地点,YUI
Get实用程序是一个大致的主意,能够即时包含JS和CSS。举个例子,在野外看看
Yahoo!主页与Firebug的网络面板打开了。

当质量目的与其它Web开发最佳实践相平等时,那是很好的。
在那种场所下,渐进增强的想法告诉大家,当JavaScript被帮助时,能够改进用户体验,可是你必须保障页面包车型地铁劳作就是没有JavaScript。
就此在规定页面工作健康从此,您能够行使部分后加载脚本来增强它,从而为你提供越多铃声和口哨,如拖放和卡通片。

  1. 预加载组件
    预加载可能看起来与中期加载相反,但骨子里具有区别的指标。通过预加载组件,您能够使用浏览器空闲的时间,并乞请未来急需的零件(如图像,样式姚剧本)。那样当用户访问下一页时,您能够将多数零件放在缓存中,并且您的页面将为用户加载更快。

其实有三种档次的预加载:

  • 无条件预 加载 – 一旦加载运转,您就能够继承领取部分附加的零件。
    自作者批评google.com,精晓怎么请求1个灵活图像的加载。
    本条天使图片不必要在google.com主页上,但在接连的探寻结果页面上是亟需的。
  • 有标准的预加载 –
    基于用户操作,您做出有依据的推断,用户在哪儿下一步,并相应地预加载。在search.yahoo.com上,您可以看看在输入框中输入后,如何请求一些额外的零部件。
  • 推测预加载 – 在开发银行重新规划在此之前提前预加载。
    每每重复设计后,您会发现:“新网站很酷,但比原先更慢”。
    题材的一部分或然是用户正在利用完全缓存访问您的旧站点,但新的站点始终是空缓存体验。您可以在开行重新设计前边先行加载有个别零部件来减轻那种副成效。您的旧网站能够应用浏览器空闲的时光,并恳求新网站将运用的图像黄岩乱弹本
  1. 减弱DOM成分的数目
    复杂的页面意味着更加多的字节下载,也意味着JavaScript中的DOM访问速度较慢。要是您想要添加事件处理程序,例如,假若循环访问500或5000个页面上的DOM成分,那将大有作为。

大气的DOM成分大概是有的症状,应该采纳页面包车型大巴标记进行立异,而无需删除内容。您是或不是利用嵌套表展开布局?你是不是<div>只投入更多的事物来消除布局难题?或然有更好的和更语义上正确的章程来做你的标志。

对于布局来说,极大的声援是YUI
CSS实用程序:grids.css能够支持你全体布局,fonts.css和reset.css能够扶持您剥离浏览器的暗中认可格式。那是八个时机,伊始优良和思考你的符号,例如,<div>只有当它有意义的语义,而不是因为它表现三个新的行。

DOM成分的数额很简单测试,只需输入Firebug的控制台:

 document.getElementsByTagName('*').length

DOM成分有个别许?检查别的具备卓绝标记的近乎页面。例如,Yahoo!主页是2个特出繁忙的页面,照旧低于700个成分(HTML标签)。

  1. 划分跨域的零件
    分开组件允许你最大程度地相互下载。由于DNS查询损失,请确定保障您使用的不超过2-5个域。例如,您可以承接你的HTML和动态内容www.example.org时期不相同静电元件static1.example.org和static2.example.org

至于更加多音讯,请参阅Tenni Theurer和Patty
Chi的“最大化拼车车道中的并行下载
”。

  1. 最小化iframe的数量
    iframe允许在父文书档案中插入四个HTML文书档案。领悟iframe的干活规律,以便有效的行使非凡关键。
  • <iframe> 优点:
    扶持缓慢的第一方内容,如徽章和广告
    有惊无险沙箱
    互相下载脚本

  • <iframe> 缺点:
    花费高,即使空白
    堵住页面加载
    非语义

  1. 没有404s
    HTTP请求是昂贵的,所以发生HTTP请求并得到无用的响应(即404 Not
    Found)是完全不必要的,并且会减慢用户体验,没有别的好处。

局地网站有协助404s“你的情趣是X?”,那对用户体验10分好,但也会浪费服务器能源(如数据库等)。尤其倒霉的是当链接到外部JavaScript是荒唐的,结果是404.率先,那么些下载将堵住并行下载。接下来,浏览器或然会尝试解析404响应体,就如它是JavaScript代码,试图找到可用的事物。


Service worker生命周期

图片 12

Service
worker

为网页添加一个类似于APP的生命周期,它只会响应系统事件,固然浏览器关闭时操作系统也能够提醒Service
worker
,那点13分重要,让web
app与native app的力量变得就像了。

Service
worker
在Register时会触发Install事件,在Install时方可用来预先获取和缓存应用所需的能源并安装种种文件的缓存策略。

一旦Service
worker
高居activated状态,就足以完全控制应用的能源,对互联网请求举办检查,修改网络请求,从网络上获得并回到内容大概重回由已安装的Service
worker
预示获取并缓存好的财富,甚至还足以变动内容并赶回给互联网语法。

享有的那几个都用户都以晶莹剔透的,事实上,二个布署非凡的Service
worker
仿佛三个智能缓存系统,坚实了网络和缓存功用,采用最优办法来响应互联网请求,让使用尤其平静的运作,即使没有网络也没提到,因为您能够完全控制互联网响应。

(5)、30人机器上缓存文件大小为最大2G;

Server

Service worker的决定从第②次页面访问开首

在第①次加载页面时,全体财富都以从网络载的,Service
worker

在第②次加载时不会收获控制网络响应,它只会在此起彼伏访问页面时起效果。

图片 13

页面第一遍加载时做到install,并进入idle状态。

图片 14

页面第②遍加载时,进入activated状态,准备处理全部的事件,同时
浏览器会向服务器发送几个异步 请求来检查Service
worker
本人是否有新的版本,构成了Service
worker
的立异机制。

图片 15

Service
worker
处理完全数的轩然大波后,进入idle状态,最终进入terminated状态能源被假释,当有新的风浪时有爆发时再也被调用。

(6)、具有强大的管理效果,例如 top、stat、admin、list 等;

特点

  • 浏览器

谷歌 Chrome,Firefox,Opera以及国内的各样双核浏览器都帮忙,不过 safari
不支持,那么在不协理的浏览器里Service
worker
不工作。

  • https

网站必须启用https来保险使用Service
worker
页面包车型地铁安全性,开发时localhost暗中同意认为是安全的。

  • non-block

Service
worker

中的 Javascript 代码必须是非阻塞的,因为 localStorage
是阻塞性,所以不该在 Service Worker 代码中使用 localStorage。

  • 单身的实践环境

Service
worker
运转在本人的全局环境中,平时也运转在大团结单身的线程中。

  • 并未绑定到特定页面

service work能决定它所加载的万事范围内的财富。

  • 无法操作DOM

跟DOM所处的条件是并行隔断的。

图片 16

  • 并未浏览页面时也足以运维

收受系统事件,后台运维

  • 事件驱动,必要时运营,不必要时就止住

按需执行,只在急需时加载到内部存款和储蓄器

  • 可升级

实践时会异步获取最新的版本

(7)、状态机设计巧妙,结构清晰;

兑现加速/离线

(8)、利用二叉堆管理缓存文件,达到积极删除指标。

Cache

网页缓存有很多,如HTTP缓存,localStorage,sessionStorage和cacheStorage都足以灵活搭配进行缓存,但操作太繁琐,直接使用更高级Service
worker

–本文的主人公。

Varnish 的 Storage 情势可分为三种:

添加Service worker入口

在web app的首页添加以下代码

JavaScript

<script> if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’); } </script>

1
2
3
4
5
<script>
if (‘serviceWorker’ in navigator) {
navigator.serviceWorker.register(‘/sw.js’);
}
</script>

假定浏览器支持serviceWorker就登记它,不帮衬还是健康浏览,没有Service
worker
所提供的增高成效。

Service worker控制范围:
简单境况下,将sw.js置身网站的根目录下,那样Service
worker
能够操纵网站有着的页面,,同理,借使把sw.js放在/my-app/sw.js那就是说它不得不控制my-app目录下的页面。
sw.js放在/js/目录呢?更好的目录结构和界定控制呢?
在注册时钦定js地点并安装限制。

JavaScript

navigator.serviceWorker.register(‘/js/sw.js’, {scope:
‘/sw-test/’}).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
navigator.serviceWorker.register(‘/js/sw.js’, {scope: ‘/sw-test/’}).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)、Malloc 通过 malloc 获取内部存储器;

Service worker实现

监听多少个事件:

JavaScript

self.addEventListener(‘install’, onInstall);
self.addEventListener(‘fetch’, onFetch);
self.addEventListener(“activate”, onActivate);

1
2
3
self.addEventListener(‘install’, onInstall);
self.addEventListener(‘fetch’, onFetch);
self.addEventListener("activate", onActivate);

2)、Mmap file 创造大文件,通过二分法分段映射成 1G 以内的大块。

install

JavaScript

////////// // Install ////////// function onInstall(event) {
log(‘install event in progress.’); event.waitUntil(updateStaticCache());
} function updateStaticCache() { return caches
.open(cacheKey(‘offline’)) .then((cache) => { return
cache.addAll(offlineResources); }) .then(() => { log(‘installation
complete!’); }); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//////////
// Install
//////////
function onInstall(event) {
  log(‘install event in progress.’);
  event.waitUntil(updateStaticCache());
}
function updateStaticCache() {
  return caches
    .open(cacheKey(‘offline’))
    .then((cache) => {
      return cache.addAll(offlineResources);
    })
    .then(() => {
      log(‘installation complete!’);
    });
}

install时将富有符合缓存策略的能源实行缓存。

以 Mmap file 的缓存格局运转 I/O 也会形成瓶颈,原因根本是 Varnish
缓存的数量先会刷到磁盘上,然后在二回性读到内部存款和储蓄器中,那在访问量大的时候还要也会对
I/O 造成极大的下压力。Malloc 缓存格局即使对 I/O
没有压力,因全体缓存数据都写到内存中。

fetch

JavaScript

//////// // Fetch //////// function onFetch(event) { const request =
event.request; if (shouldAlwaysFetch(request)) {
event.respondWith(networkedOrOffline(request)); return; } if
(shouldFetchAndCache(request)) {
event.respondWith(networkedOrCached(request)); return; }
event.respondWith(cachedOrNetworked(request)); }
onFetch做为浏览器互连网请求的代办,依照必要回到网络或缓存内容,假使获得了网络内容,重返网络请求时还要拓展缓存操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
////////
// Fetch
////////
function onFetch(event) {
  const request = event.request;
  if (shouldAlwaysFetch(request)) {
    event.respondWith(networkedOrOffline(request));
    return;
  }
  if (shouldFetchAndCache(request)) {
    event.respondWith(networkedOrCached(request));
    return;
  }
  event.respondWith(cachedOrNetworked(request));
}
onFetch做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

Malloc 格局运营:

activate

JavaScript

/////////// // Activate /////////// function onActivate(event) {
log(‘activate event in progress.’); event.waitUntil(removeOldCache()); }
function removeOldCache() { return caches .keys() .then((keys) => {
return Promise.all( // We return a promise that settles when all
outdated caches are deleted. keys .filter((key) => { return
!key.startsWith(version); // Filter by keys that don’t start with the
latest version prefix. }) .map((key) => { return caches.delete(key);
// Return a promise that’s fulfilled when each outdated cache is
deleted. }) ); }) .then(() => { log(‘removeOldCache completed.’); });
}

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
///////////
// Activate
///////////
function onActivate(event) {
  log(‘activate event in progress.’);
  event.waitUntil(removeOldCache());
}
function removeOldCache() {
  return caches
    .keys()
    .then((keys) => {
      return Promise.all( // We return a promise that settles when all outdated caches are deleted.
        keys
         .filter((key) => {
           return !key.startsWith(version); // Filter by keys that don’t start with the latest version prefix.
         })
         .map((key) => {
           return caches.delete(key); // Return a promise that’s fulfilled when each outdated cache is deleted.
         })
      );
    })
    .then(() => {
      log(‘removeOldCache completed.’);
    });
}

在activate时依照version值来删除过期的缓存。

/usr/local/varnish/sbin/varnishd -u nobody -g nogroup -f
/usr/local/varnish/etc/varnish.vcl -s malloc,4G -w 50,51200,120 -a
192.168.10:80 -T 127.0.0.1:8080

管理 Service worker

 

一定网站

  1. Google Chrome

Developer Tools->Application->Service Workers

图片 17

在那边还有四个十三分实惠的复选框:

  • Offline

宪章断网状态

  • Update on reload
    加载时更新
  • Bypass for network
    连年利用网络内容
  1. Firefox

只有在Settings里有三个得以在HTTP环境中应用Service
worker
的选项,适应于调节和测试,没有单独网站下的Service
worker
管理。

图片 18

  1. Opera及任何双核浏览器同谷歌 Chrome
    假使见到八个一样范围内的多个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    还从未被terminated。

Mmap file 方式运行:

浏览器全局

探望你的浏览器里都有如何Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够见到已经有2多少个Serviceworker了,在那里能够手动Start让它工作,也得以Unregister卸载掉。

图片 19

  1. Firefox

有二种艺术进入Service
worker
治本界面来手动Start或unregister。

  • 菜单栏,Tool->Web Developer->Service workers
  • 地址栏中输入

JavaScript

about:debugging#workers

1
about:debugging#workers

图片 20

  1. Opera及任何双核浏览器同谷歌(Google) Chrome

/usr/local/varnish/sbin/varnishd -u nobody -g nogroup -f
/usr/local/varnish/etc/varnish.vcl -s
file,/data/varnish/varnish_storage.bin,4G -w 50,51200,120 -a
192.168.10:80 -T 127.0.0.1:8080

更多

TODO:

  • Service
    workers
    的立异需求手动编辑version,每一次发布新小说时必要编写制定。
  • 使用AMP让页面渲染速度达到最高。

Ref links

Service Worker Cookbook

Is service worker
ready?

Chrome service worker status
page

Firefox service worker status
page

MS Edge service worker status
page

WebKit service worker status
page

1 赞 2 收藏
评论

图片 21

Varnish 进程的干活情势:

Varnish 运维或有三个经过 master(management) 进度和 child(worker)
进度。master 读入存款和储蓄配置命令,进行先导化,然后 fork,监控 child。child
则分配线程进行 cache 工作,child 还会做管理线程和变化很多 worker 线程。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图