基于Varnish 3.0.4的网站静态加速

运用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那一个大面积的服务器和网络加快之外,通过客商端达成了越来越好的访谈体验。

行使 Service worker 创立贰个极度轻便的离线页面

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

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,幸免转发!
匈牙利(Hungary)语出处:Dean
Hume。招待到场翻译组。

让大家想像以下场景:大家那时候在一辆通往村庄的列车里,用运动器材瞧着大器晚成篇很棒的作品。与此同时,当您点击“查看越来越多”的链接时,高铁蓦地步入了隧道,导致移动器材失去了网络,而
web 页面会显示出形似以下的剧情:

奥门威尼斯网址 1

那是卓殊令人伤心的体验!幸运的是,web
开荒者们能经过一些新特点来校勘那类的顾客体验。我这几天径直在折腾 ServiceWorkers,它给 web 带来的数不完大概性总能给本身高兴。Service Workers
的完美国特务职业人士人士质之一是同意你检验互连网诉求的情形,并让你作出相应的响应。

在这里篇小说里,笔者准备用此性情检查顾客的近期互联网连接景况,倘若没连接则赶回叁个特级不难的离线页面。纵然这是二个极度基础的案例,但它能给您带来启发,让您明白运转并运维该性情是何等的简便!即使您没理解过
瑟维斯 Worker,小编提议你看看此 Github
repo,明白越来越多相关的新闻。

在该案例初阶前,让大家先轻易地看看它的行事流程:

  1. 在客户第三遍访问大家的页面时,大家会安装 瑟维斯Worker,并向浏览器的缓存增加大家的离线 HTML 页面
  2. 然后,假若顾客筹划导航到另七个 web
    页面(同贰个网址下),但此刻已断网,那么我们将回来已被缓存的离线
    HTML 页面
  3. 不过,若是客户计划导航到其余三个 web
    页面,而那个时候互连网已连接,则能照常浏览页面

Varnish 的有些表征:

网址静态文件的增长速度[CDN法]

那是豆蔻梢头篇关于 <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
      ]);
    })
  );
});

在地点的代码中,大家在设置 Service Worker
时,向缓存增多了离线页面。假如大家将代码分为几小块,可以看看见前几行代码中,我为离线页面钦赐了缓存版本和U奇骏L。要是你的缓存有两样版本,那么您只需立异版本号就能够简单地扫除缓存。在大约在第
12
行代码,笔者向那个离线页面及其财富(如:图片)发出央求。在获取成功的响应后,咱们将离线页面和连锁财富丰裕到缓存。

当今,离线页面已存进缓存了,我们可在急需的时等候检查索它。在同贰个 ServiceWorker 中,我们供给对无网络时回来的离线页面加多相应的逻辑代码。

JavaScript

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

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

假定你刷新页面,你应当能收占卜应的离线页面!

奥门威尼斯网址 5

比方您只想大致地质衡量试该意义而不想写任何代码,那么你可以访谈笔者已开立好的
demo。其它,上述总体代码能够在
Github repo 找到。

自个儿晓得用在那案例中的页面很简单,但您的离线页面则在于你和睦!倘让你想长远该案例的开始和结果,你可以为离线页面增加缓存破坏(
cache busting),如:
此案例。

(1)、是依靠内部存款和储蓄器缓存,重启后数据将瓦解冰消;

本法没有须要转移程序,真的任何程序改换都未有。便是要花钱,呵呵,此法叫CDN,Content
Delivery Network。

以下为译文:

加紧效果

首页加快后,互连网诉求从16降为1,加载时间从2.296s降为0.654s,获得了大器晚成晃加载的结果。

奥门威尼斯网址 6

基于webpagetest

查看测验结果

实行阅读

除此以外,还应该有多少个很棒的离线功效案例。如:Guardian 创设了二个装有 crossword
puzzle(填字游戏)的离线
web 页面 –
因而,纵然等待网络重连时(即已在离线状态下),也能找到一点乐趣。笔者也引用看看
奥门威尼斯网址,Google Chrome Github
repo,它包括了不少例外的
Service Worker 案例 – 在那之中一些利用案例也在这里!

可是,倘让你想跳过上述代码,只是想差少之又少地经过一个库来管理相关操作,那么自个儿推荐你看看
UpUp。那是一个轻量的剧本,能令你更自在地应用离线效率。

打赏协理本人翻译越来越多好文章,多谢!

打赏译者

(2)、利用设想内存形式,I/O 质量好;

原理:客户能够通过cdn提供商提供的服务,把文件push到离最后浏览网址的客商最近的
服务器上,实现加速的成效。


加紧/离线原理探求

打赏辅助本人翻译更加多好作品,多谢!

任选黄金年代种支付办法

奥门威尼斯网址 7
奥门威尼斯网址 8

1 赞 3 收藏 1
评论

(3)、帮衬设置 0~60 秒内的正确缓存时间;

这个是baidu百科对cdn的解释:

增长速度网址访谈的顶级实行

规范的业绩团队曾经分明了豆蔻年华部分使网页飞快的最佳做法。该清单满含分为7个类别的32个一流做法。


什么是 Service worker

奥门威尼斯网址 9

如上图,Service
worker

是后生可畏种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当二个页面注册了一个
Service
worker
,它就能够挂号一文山会海事件处理器来响应如网络必要和音讯推送这个事件。Service
worker

可以被用来管理缓存,当响应贰个网络诉求时方可配备为回去缓存照旧从网络获取。由于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查找30分钟,由
    DnsCacheTimeout注册表设置钦赐。Firefox缓存DNS查找1分钟,由network.dnsCacheExpiration配置安装调控。(法斯特erfox将其转移为1时辰。)
    当客商端的DNS缓存为空(对于浏览器和操作系统)时,DNS查找的数量约等于网页中独步天下主机名的数目。那包含在页面包车型客车UEnclaveL,图像,脚本文件,样式表,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汉兰达L。重定向所需的享有新闻都在头文件中。响应的肉身平常是空的。就算她们的名字,在试行中也不会缓存301和302的响应,除非额外的标题,比如
Expires或者Cache-Control标记它应该是。元刷新标签和JavaScript是将客商指引到此外URubiconL的别的办法,但如果必得实施重定向,首要推荐才能是应用规范的3xx
HTTP状态代码,主假若为着有限帮助后退按键符合规律干活。

要铭记的是重定向会减速顾客体验。在顾客和HTML文书档案之间插入重定向会延迟页面中的全体内容,因为页面中的任何内容都无法被渲染,並且在HTML文档达到早前不会开端下载任何组件。

最浪费的重定向之一是累累产生的,Web开垦人士平常不会意识到这点。当UWranglerL中缺少尾部斜线(/)时,会发生这种气象,不然应当有一个。
例如,去
http://astrology.yahoo.com/astrology
得到二个暗含重定向到
http://astrology.yahoo.com/astrology/
(注意加多的尾巴斜杠)的301响应。借使您使用Apache处理程序,则使用Aliasormod_rewriteor
DirectorySlash一声令下在Apache中张开修补。

将旧网址三番五次到新的网址是重定向的另贰个宽广用途。其余包含连接网址的不等部分,并依附一些标准(浏览器类型,客商帐户类型等)辅导顾客。使用重定向连接多少个网址特别不难,只须求很少的叠合编码。固然在此些情形下使用重定向会下落开辟人士的纵横交错,但会下滑客户体验。这种应用重定向的代表方案包涵使用Aliasmod_rewrite假定多个代码路线托管在平等台服务器上。假设域名变化是利用重定向的原故,风度翩翩种代替情势是创办叁个CNAME与整合(即创建了二个从域名指向另二个外号DNS记录)Aliasmod_rewrite

  1. 使用 Ajax Cacheable
    Ajax的三个引人注意的实惠是它为客户提供及时陈述,因为它从后端Web服务器异步央求音信。可是,使用Ajax不可能担保客户不会等待他们等待异步JavaScript和XML响应重回的拇指。在重重施用中,客商是还是不是保持等待决计于Ajax的施用情势。比方,在依附Web的电子邮件客商端中,客户将持续等待Ajax乞请的结果来寻觅与其招来条件优异的具备电子邮件。首要的是要深深记住,“异步”并不表示“瞬时”。

为了提升质量,首要的是优化这个Ajax响应。升高Ajax品质的最首要的措施是使响应可缓存,如加上到期或缓存调控头。
部分别样法规也适用于Ajax:

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

作者们来看叁个事例。
Web 2.0电子邮件顾客端恐怕会选拔Ajax下载顾客的全自动实现地址簿。
要是客商上次使用电子邮件互连网应用程序后顾客并未有改变她的地址簿,假使Ajax响应得以动用现在的Expires或Cache-Control标头进行缓存,则足以从缓存读取早前的地址簿响应。必需通报浏览器何时使用在此之前缓存的地址簿响应,实际不是号召新的地址簿响应。那足以因而向地址簿Ajax
U翼虎L增添贰个小时戳来表示,比如,顾客最终三次订正她的地址簿&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,通晓如何诉求二个灵动图像的加载。
    其大器晚成Smart图片不须求在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!主页是三个不胜繁忙的页面,依旧低于700个成分(HTML标签)。

  1. 分割跨域的组件
    划分组件允许你最大程度地相互下载。由于DNS查询损失,请确定保障您使用的不超过2-4个域。举个例子,您可以承继你的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?”,那对客商体验十一分好,但也会浪费服务器能源(如数据库等)。特倒霉的是当链接到外界JavaScript是荒谬的,结果是404.第生机勃勃,这些下载将堵住并行下载。接下来,浏览器可能会尝试拆解解析404响应体,就疑似它是JavaScript代码,试图找到可用的东西。


瑟维斯 worker生命周期

奥门威尼斯网址 12

Service
worker

为网页增多二个像样于APP的生命周期,它只会响应系统事件,即使浏览器关闭时操作系统也能够唤起Service
worker
,那点非常重要,让web
app与native app的力量变得好像了。

Service
worker
在Register时会触发Install事件,在Install时能够用来预先获取和缓存应用所需的财富并安装每种文件的缓存攻略。

一旦Service
worker
处在activated状态,就足以完全调整应用的能源,对网络央求进行反省,修正网络哀求,从网络上收获并回到内容或然重临由已安装的Service
worker
预先报告获取并缓存好的财富,以致仍然是能够转移内容并赶回给互联网语法。

享有的那么些都客商都是晶莹剔透的,事实上,三个统筹美貌的Service
worker
就如三个智能缓存系统,抓实了互连网和缓存作用,选取最优办法来响应互连网要求,让动用越来越安宁的周转,固然未有网络也没涉及,因为你能够完全调节互联网响应。

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

万网平台CDN的操作方法:

Server

Service worker的垄断从第叁遍页面访问开头

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

在第二次加载时不会获得调节互连网响应,它只会在承接访问页面时起效果。

奥门威尼斯网址 13

页面第贰次加载时做到install,并踏入idle状态。

奥门威尼斯网址 14

页面第一遍加载时,步向activated状态,准备管理所有事件,同时
浏览器会向服务器发送贰个异步 央求来检查Service
worker
本人是或不是有新的本子,构成了Service
worker
的换代机制。

奥门威尼斯网址 15

Service
worker
拍卖完全数的风浪后,步入idle状态,最后走入terminated状态资源被保释,当有新的事件发生时再一次被调用。

(6)、具有强有力的管制效果,比方 top、stat、admin、list 等;

特点

  • 浏览器

谷歌(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所处的境况是相互隔绝的。

奥门威尼斯网址 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及任何双核浏览器同Google Chrome
    假定看见多少个同样范围内的八个Service
    worker
    ,说明Service
    woker
    更新后,而原有Service
    worker
    还向来不被terminated。

Mmap file 情势运行:

浏览器全局

拜见你的浏览器里都有怎样Service worker已经存在了

  1. Google Chrome

在地址栏里输入:

JavaScript

chrome://serviceworker-internals/

1
chrome://serviceworker-internals/

能够看出已经有二十四个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 收藏
评论

奥门威尼斯网址 11

Varnish 进度的干活格局:

Varnish 运营或有2个经过 master(management) 进度和 child(worker)
进度。master 读入存款和储蓄配置命令,进行开端化,然后 fork,监察和控制 child。child
则分配线程举行 cache 工作,child 还或者会做管理线程和转换超级多 worker 线程。

 

child
进度主线程初阶化进程中,将储存大文件整个加载到内存中,即使该文件超出系统的设想内部存储器,则会压缩原本配置
mmap
大小,然后继续加载,那个时候创造并起头化空闲存款和储蓄结构体,放在存款和储蓄管理的
struct 中,等待分配。

 

 

跟着 Varnish 有个别肩负选取新 http 连接的线程开首等待客户,假设有新的 http
连接,可是这些线程只担当接受,然后提示等待线程池中的 work
线程,实行倡议管理。

 

worker 线程读入 uri 后,将会招来本来就有的
object,命中央政府机关接再次回到,未有打中,则会从后端服务器中收取来,放到缓存中。假若缓存已满,会基于
LRU 算法,释放旧的 object。对于自由缓存,有三个超时线程会检查实验缓存中装有
object 的生命周期,借使缓存过期 (ttl),则删除,释放相应的存款和储蓄内部存款和储蓄器。


Varnish Cache 的架构笔记
http://www.linuxidc.com/Linux/2013-10/91016.htm

CentOS
5.8下Varnish-2.1.5的设置配置
http://www.linuxidc.com/Linux/2013-09/89916.htm

RedHat剧本改用CentOS源更新安装Nginx、PHP
5.3、Varnish
http://www.linuxidc.com/Linux/2012-07/65801.htm

应用Varnish营造Cache服务器笔记
http://www.linuxidc.com/Linux/2012-07/65234.htm

缓存服务Varnish安装配置
http://www.linuxidc.com/Linux/2012-07/65228.htm

Varnish 编写翻译安装所需希图
http://www.linuxidc.com/Linux/2012-07/65230.htm

Linux下Varnish缓存的布置优化
http://www.linuxidc.com/Linux/2012-03/56435.htm

Varnish基础概念详解
http://www.linuxidc.com/Linux/2014-07/104535.htm


Varnish 的优点:

(1)、Varnish 的安澜极高,两个在做到同样负荷的办事时,Squid
服务器产生故障的概率要超过 Varnish,因为使用Squid 要平常重启;

(2)、Varnish 访谈速度更加快,Varnish 选用了“Visual Page
Cache”本领,全体缓存数据都直接从内部存款和储蓄器读取,而 Squid 是从硬盘读取,因此Varnish 在访问速度方面会更快;

(3)、Varnish 能够援救越来越多的产出连接,因为 Varnish 的 TCP 连接释放要比
Squid 快。由此在高并发连接境况下能够帮助越来越多 TCP 连接;

(4)、Varnish 能够由此管住端口,使用正则表明式批量的消弭部分缓存,而
Squid 是做不到的;

(5)、Squid 属于是单进度使用单核 CPU,但 Varnish 是经过 fork
格局张开多进度来做拍卖,所以是在理的利用全部核来管理相应的倡议。

 

与守旧的 Squid 比较,Varnish 也会有短处:

1)、Varnish 进程风流倜傥旦 Hang、Crash
或然重启,缓存数据都会从内部存款和储蓄器中完全释放,那时候具备哀告都会发送到后端服务器,在高并发意况下,会给后端服务器变成非常的大压力;

2)、在 Varnish 使用中,即使单个 url 的央求通过
HA/F5(负载均衡)、每便央浼例外的 Varnish 服务器中,被号召Varnish
服务器都会被穿透到后端,何况同样的伸手会在多台服务器上缓存,也会招致
Varnish 的缓存的财富浪费,也会促成质量收缩。

 

削株掘根方案:

1)、要来说之在访谈量异常的大的图景下推荐应用 Varnish
的内部存款和储蓄器缓存格局运营,并且前边供给跟多台 Squid 服务器。主要为了防止万意气风发后边的
Varnish 服务被重启的情况下,中期明确会有不菲的穿透,那样 Squid
能够担当第二层 CACHE,并且也弥补了 Varnish
缓存在内部存款和储蓄器中重启都会释放的主题材料;

2)、这样的难题得以在负载均衡上做 url 哈希,让单个 url 诉求固定央浼到意气风发台
Varnish 服务器上,能够缓慢解决该难点。

 

注:以上内容是在借鉴定分别人总计的底子上,做了一些精简、改正,并投入了部分谈得来的总括。

 


系统处境:SUSE Linux
Enterprise Server 10 SP1 (x86_64)

硬件配备:8G内部存款和储蓄器、8核CPU

 

 

1、编写翻译安装

ftp://invisible-island.net/ncurses/ncurses-5.9.tar.gz

# tar xvzf ncurses-5.9.tar.gz

# ./configure –prefix=/usr/local

# make LAGS=-fPIC

# make LAGS=-fPIC install

 

# tar xvzf  pcre-8.32.tar.gz

# cd pcre-8.32

# ./configure –prefix=/usr/local

# make

# make install

 

ftp://ftp.gnu.org/gnu/readline/readline-6.2.tar.gz

# tar xvzf readline-6.2.tar.gz

# ./configure –prefix=/usr/local

# make

# make install

 

# tar xvzf varnish-3.0.4.tar.gz

# ./configure –prefix=/usr/local/varnish

# make

# make install

更加多详细情形见请继续阅读下后生可畏页的非凡内容
http://www.linuxidc.com/Linux/2014-07/104757p2.htm

奥门威尼斯网址 22

发表评论

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