首页

当前位置:永利皇宫463登录 > 首页 > 创建一个非常简单的离线页面,4的网站静态加速

创建一个非常简单的离线页面,4的网站静态加速

来源:http://www.makebuLuo.com 作者:永利皇宫463登录 时间:2019-11-15 01:32

使用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 翻译,艾凌风 校稿。未经许可,禁止转发!
斯拉维尼亚语出处:Dean Hume。招待插足翻译组。

让大家想像以下情状:大家那儿在生龙活虎辆通往村庄的列车的里面,用移动设备看着后生可畏篇很棒的稿子。与此同不平日间,当您点击“查看越来越多”的链接时,火车猝然步入了隧道,招致移动道具失去了互联网,而 web 页面会显示出相似以下的内容:

图片 1

那是极度令人消极的心得!幸运的是,web 开辟者们能经过一些新性情来修改那类的顾客体验。小编近年来直接在折腾 ServiceWorkers,它给 web 带给的数不胜数大概性总能给自己惊奇。Service Workers 的优异特质之一是同意你检查评定网络央求的气象,并令你作出相应的响应。

在此篇小说里,笔者筹算用此特性检查客商的当前互联网连接境况,假若没连接则赶回二个一级级轻巧的离线页面。就算那是贰个万分功底的案例,但它能给你带给启发,让您明白运营并运转该天性是多么的简要!假设您没领悟过 Service Worker,笔者提出您看看此 Github repo,精通更加的多相关的消息。

在这里案例伊始前,让我们先轻巧地寻访它的劳作流程:

  1. 在顾客第二遍访谈我们的页面时,大家会安装 ServiceWorker,并向浏览器的缓存增多大家的离线 HTML 页面
  2. 接下来,若是客户思索导航到另三个 web 页面(同八个网址下卡塔尔国,但此刻已断网,那么我们将回到已被缓存的离线 HTML 页面
  3. 而是,若是客商策动导航到此外二个 web 页面,而当时网络已两次三番,则能照常浏览页面

Varnish 的一些表征:

加快/离线访谈只需三步

  • 首页增添注册代码

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>

随之,让我们在页面里登记 Service 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奥迪Q7L。假设您的缓存有例外版本,那么你只需改正版本号就能够简单地杀绝缓存。在差非常的少在第 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 访谈互联网卡塔 尔(英语:State of Qatar)

图片 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 案例 – 在那之中风度翩翩部分运用案例也在这里!

不过,假诺您想跳过上述代码,只是想大致地因而叁个库来处理有关操作,那么自身推荐你看看 UpUp。那是三个轻量的台本,能令你更轻易地利用离线成效。

打赏协助本身翻译更加多好文章,感激!

打赏译者

(2)、利用设想内部存款和储蓄器情势,I/O 性能好;

加快/离线原理索求

打赏协助作者翻译越来越多好散文,感谢!

任选生机勃勃种支付方式

图片 7 图片 8

1 赞 3 收藏 1 评论

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

什么是 Service worker

图片 9

如上图,Service worker 是风姿罗曼蒂克种由Javascript编写的浏览器端代理脚本,位于你的浏览器和服务器之间。当三个页面注册了三个 Service worker,它就足以注册一文山会海事件微处理器来响应如互连网央求和音讯推送那几个事件。Service worker 可以被用来保管缓存,当响应二个网络恳求时得以配备为回去缓存依旧从网络得到。由于Service worker 是基于事件的,所以它只在管理那个事件的时候被调入内存,不用操心常驻内存占用能源招致系统变慢。

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

图片 10

前端,在路上... 个人主页 · 作者的篇章 · 19 ·     

图片 11

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

Service worker生命周期

图片 12

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

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

一旦Service worker处在activated状态,就能够完全调控应用的能源,对网络央浼进行检讨,改善网络央求,从互连网上获取并回到内容大概重临由已设置的Service worker预示获取并缓存好的财富,以至还足以扭转内容并赶回给网络语法。

抱有的那些都客户都以晶莹的,事实上,多个统筹赏心悦目标Service worker就好像多个智能缓存系统,压实了互连网和缓存作用,选择最优办法来响应互联网伏乞,让使用越发安宁的运营,就算未有互联网也没提到,因为您能够完全调控网络响应。

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

Service worker的决定从第一遍页面访谈早前

在第二回加载页面时,全数财富都以从网络载的,Service worker 在第1回加载时不会拿到调控互连网响应,它只会在持续访问页面时起效果。

图片 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/

能够观察已经有贰14个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 运维或有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

本文由永利皇宫463登录发布于首页,转载请注明出处:创建一个非常简单的离线页面,4的网站静态加速

关键词:

上一篇:没有了

下一篇:没有了