www.qjdy.com-奇迹赌场 > www.qjdy.com > 由于静态内容的特性非常适合做缓存来加速页面

原标题:由于静态内容的特性非常适合做缓存来加速页面

浏览次数:84 时间:2019-10-20

使用Service worker完成加快/离线访谈静态blog网址

2017/02/19 · JavaScript · Service Worker

初藳出处: Yang Bo   

这两天极红基于Github page和markdown的静态blog,特别符合技巧的图谋和习于旧贯,针对不相同的言语都有部分优异的静态blog系统出现,如Jekyll/Ruby,Pelican/Python,Hexo/NodeJs,由于静态内容的个性特别切合做缓存来加速页面包车型地铁探问,就动用Service worker来贯彻加速,结果是除了PageSpeed,CDN那个科学普及的服务器和互联网加速之外,通过客商端达成了更好的拜谒体验。

加紧/离线访谈只需三步

  • 首页增多注册代码

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都援引了如何第三方财富,每一种加到忽视列表里。

图片 1

在根目录下增多offline.html,在未有网络且缓存中也远非时使用,效果如下:

图片 2

在根目录下增加offline.svg,在无互联网时图片能源须要再次来到该文件。

加紧效果

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

图片 3

基于webpagetest

查看测验结果

加紧/离线原理搜求

什么是 Service worker

图片 4

如上图,Service worker 是如火如荼种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当三个页面注册了二个 Service worker,它就能够登记风流洒脱多元事件管理器来响应如网络诉求和新闻推送那么些事件。Service worker 能够被用来治本缓存,当响应多少个互联网伏乞时能够布置为回到缓存还是从互连网获取。由于Service worker 是基于事件的,所以它只在管理那么些事件的时候被调入内部存款和储蓄器,不用操心常驻内部存款和储蓄器占用财富导致系统变慢。

Service worker生命周期

图片 5

Service worker 为网页增加多个近乎于APP的生命周期,它只会响应系统事件,固然浏览器关闭时操作系统也得以提示Service worker,这一点万分重要,让web app与native app的本事变得近乎了。

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

一旦Service worker高居activated状态,就足以完全调控应用的财富,对互连网央浼进行反省,修改网络伏乞,从互连网上获得并赶回内容大概重临由已安装的Service worker预先报告获取并缓存好的能源,以至还是能转换内容并赶回给网络语法。

具备的这几个都客商都以晶莹的,事实上,多少个统一谋算赏心悦目标Service worker就如多少个智能缓存系统,狠抓了互联网和缓存作用,选用最优办法来响应网络央求,让动用更加的安宁的运维,即使未有网络也没涉及,因为您可以完全调节互连网响应。

Service worker的操纵从第二遍页面访问开始

在第壹回加载页面时,全部能源都以从互连网载的,Service worker 在第贰遍加载时不会得到调节互连网响应,它只会在那起彼伏访谈页面时起功用。

图片 6

页面第一遍加载时成功install,并跻身idle状态。

图片 7

页面首回加载时,步入activated状态,盘算管理全数的风浪,同时 浏览器会向服务器发送贰个异步 央浼来检查Service worker自个儿是或不是有新的版本,构成了Service worker的立异机制。

图片 8

Service worker管理完全体的风浪后,步向idle状态,最后步向terminated状态能源被放出,当有新的风云产生时再度被调用。

特点

  • 浏览器

Google 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所处的条件是互相隔开的。

图片 9

  • 没有浏览页面时也得以运行

收起系统事件,后台运维

  • 事件驱动,须求时运转,无需时就终止

按需举办,只在须求时加载到内存

  • 可升级

试行时会异步获取最新的本子

落到实处加速/离线

Cache

网页缓存有成都百货上千,如HTTP缓存,localStorage,sessionStorage和cacheStorage都能够灵活搭配进行缓存,但操作太繁杂,直接行使更加尖端Service worker –本文的东家。

添加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);
    });

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);

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时将具备相符缓存战略的财富拓宽缓存。

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做为浏览器网络请求的代理,根据需要返回网络或缓存内容,如果获取了网络内容,返回网络请求时同时进行缓存操作。

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值来删除过期的缓存。

管理 Service worker

一定网址

  1. Google Chrome

Developer Tools->Application->Service Workers

图片 10

在这还也有八个极度管用的复选框:

  • Offline

依傍断网状态

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

唯有在Settings里有叁个能够在HTTP景况中应用Service worker的选项,适应于调节和测量检验,未有单独网址下的Service worker管理。

图片 11

  1. Opera及别的双核浏览器同谷歌(Google) Chrome
    万风度翩翩见到八个一样范围内的三个Service worker,说明Service woker更新后,而原有Service worker还从未被terminated。

浏览器全局

看看您的浏览器里都有如何瑟维斯 worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够见见曾经有25个Serviceworker了,在此边能够手动Start让它专门的工作,也可以Unregister卸载掉。

图片 12

  1. Firefox

有三种办法步入Service worker治本界面来手动Start或unregister。

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

JavaScript

about:debugging#workers

1
about:debugging#workers

图片 13

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

更多

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 收藏 评论

图片 14

本文由www.qjdy.com-奇迹赌场发布于www.qjdy.com,转载请注明出处:由于静态内容的特性非常适合做缓存来加速页面

关键词: AG游戏网站 JavaScript

上一篇:原文出处

下一篇:没有了