云顶娱乐棋牌-云顶娱乐每天送6元
做最好的网站

云顶娱乐棋牌:缓存机制浅析,创设高质量WEB之

浏览器 HTTP 缓存原理深入分析

2015/10/27 · HTML5 · 1 评论 · HTTP

初稿出处: 黄肉桃夭夭   

在此以前项目中相见了点不清浏览器缓存相关的主题素材,也在互连网查过资料,搞过服务器的布局,来确认保证客商端加载服务器能源的进程和财富有效。这两天留意看了下http左券大壮缓存相关的一部分本性,总计一下。

营造高品质WEB之HTTP首部优化

2015/10/03 · HTML5, JavaScript · HTTP

正文小编: 伯乐在线 - 十三号线上的蝼蚁 。未经小编许可,禁绝转发!
接待参加伯乐在线 专栏撰稿人。

H5 缓存机制浅析,移动端 Web 加载质量优化

2015/12/14 · HTML5 · IndexedDB, 性能, 移步前端

正文作者: 伯乐在线 - 腾讯bugly 。未经小编许可,禁绝转发!
款待参预伯乐在线 专栏撰稿人。

WebGL本事储备指南

2015/12/22 · HTML5 · 1 评论 · WebGL

初稿出处: 天猫前端团队(FED)- 叶斋   

云顶娱乐每天送6元 1

WebGL 是 HTML 5 草案的一局地,能够使得 Canvas 渲染三个维度场景。WebGL 即使还未有分布应用,但极具潜在的力量和想象空间。本文是小编就学 WebGL 时梳理知识系统的产物,花点时间整理出来与咱们享用。

连不上网?英帝国卫报的天性离线页面是这么做的

2015/11/20 · HTML5 · Service Worker, 离线页面

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,制止转发!
拉脱维亚语出处:Oliver Ash。款待插手翻译组。

咱俩是哪些利用 service worker 来为 theguardian.com 塑造四个自定义的离线页面。

云顶娱乐每天送6元 2

theguardian.com 的离线页面。插图:奥利弗 Ash

您正在朝着公司途中的地铁里,在手提式有线电话机上打开了 Guardian 应用。大巴被隧道包围着,然则那个应用能够正常运转,尽管未有互联网连接,你也能博得完全的效果与利益,除了显示的开始和结果可能有一点点旧。假使您品尝在网址上也这么干,可惜它完全无法加载:

云顶娱乐每天送6元 3

安卓版 Chrome 的离线页面

Chrome 中的那一个彩蛋,很三人都不知晓》

Chrome 在离线页面上有个暗藏的嬉戏(桌面版上按空格键,手提式有线话机版上点击那只恐龙),那有个别能缓慢解决一点你的沉闷。然而我们得以做得越来越好。

Service workers 允许网址小编拦截自身站点的持有网络乞求,那也就表示大家可以提供完善的离线体验,就如原生应用一样。在 Guardian 网址,大家前段时间上线了二个自定义的离线体验效果。当客商离线的时候,他们会看见多少个含有 Guardian 标记的页面,上面带有二个简短的离线提醒,还应该有七个填字游戏,他们得以在伺机互联网连接的时候玩玩那几个找点乐子。那篇博客解释了大家是如何创设它的,然而在早先从前,你能够先自个儿探索看。

浏览器缓存原理

0×00 前言

在钻探浏览器优化此前,首先大家先深入分析下从客商端发起二个HTTP央浼到客户接受到响应时期,都发出了什么?知己知彼,手艺当者披靡。那也是作为三个WEB开荒者,为啥一定要深深学习TCP/IP等互联网文化

1 H5 缓存机制介绍

H5,即 HTML5,是新一代的 HTML 规范,参加过多新的性格。离线存款和储蓄(也可称之为缓存机制)是在这之中多少个老大主要的风味。H5 引进的离线存款和储蓄,那表示 web 应用可举行缓存,并可在尚未因特网连接时开展走访。

H5 应用程序缓存为利用带来四个优势:

  • 离线浏览 客户可在行使离线时选用它们
  • 进程 已缓存财富加载得越来越快
  • 压缩服务器负载 浏览器将只从服务器下载更新过或转移过的财富。

基于专门的学问,到目前截止,H5 一共有6种缓存机制,有个别是事先已有,有个别是 H5 才新参加的。

  1. 浏览器缓存机制
  2. Dom Storgage(Web Storage)存款和储蓄机制
  3. Web SQL Database 存储机制
  4. Application Cache(AppCache)机制
  5. Indexed Database (IndexedDB)
  6. File System API

上边大家先是深入分析各类缓存机制的原理、用法及特点;然后针对 Anroid 移动端 Web 品质加载优化的须求,看若是应用妥帖缓存机制来拉长 Web 的加载品质。


示例

WebGL 很酷,有以下 demos 为证:

查找奥兹国
赛车游戏
泛舟的男孩(Goo Engine Demo)

试试看

您需求一个帮助 Service Worker 和 fetch API 的浏览器。结束到本文编写时独有Chrome(手提式有线话机版和桌面版)同不经常间帮衬那二种 API(译者注:Opera 近些日子也帮衬那多头),不过 Firefox 相当慢就要支持了(在每日更新的本子中已经支持了),除了 Safari 之外的装有浏览器也都在推行。其它,service worker 只好登记在行使了 HTTPS 的网址上,theguardian.com 已经起来逐步搬迁到 HTTPS,所以大家不得不在网址的 HTTPS 部分提供离线体验。就当下来讲,大家选择了 开采者博客 作为我们用来测量检验的地点。所以如若你是在我们网站的 开垦者博客 部分阅读那篇文章的话,很幸运。

当您利用匡助的浏览器访问大家的 开拓者博客 中的页面包车型大巴时候,一切就打算稳妥了。断开你的互联网连接,然后刷新一下页面。就算你本身没条件尝试的话,能够看一下这段 示范录制(译者注:需梯子)。

文字版描述

①浏览器第一遍访问服务器财富 /index.html

在浏览器中尚无缓存文件,直接向服务器发送诉求。

服务器重回  200 OK,实体中回到 index.html文件内容,并设置多个缓存过期时间,一个文件修改时间,七个基于index.html内容总结出来的实业标志Entity Tag,简称Etag。

浏览器将/index.html路线的央浼缓存到地面。

②浏览器第2回访谈服务器财富 /index.html

是因为地面曾经有了此路线下的缓存文件,所以那三遍就不直接向服务器发送须要了。

首先进展缓存过期判断。浏览器依照①中设置缓存过期时间判别缓存文件是还是不是过期。

情景一:若没有过期,则不向服务器发送央浼,直接行使缓存中的结果,此时我们在浏览器调控桃园得以看看  200 OK(from cache) ,此时的状态便是截然使用缓存,浏览器和服务器并未有别的交互的。

地方二:若已过期,则向服务器发送哀告,此时央求中会带上①中设置的文件修改时间,和Etag

然后进展能源立异判定。服务器根据浏览器传过来的公文修改时间,剖断自浏览器上一遍呼吁之后,文件是或不是从未有过被修改过;依照Etag,剖断文件内容自上三回呼吁之后,有未有爆发变化

景况一:若二种推断的下结论都以文本并没有被修改过,则服务器就不给浏览器发index.html的内容了,直接告知它,文件并未有被更动过,你用你那边的缓存吧—— 304 Not Modified,此时浏览器就能从地面缓存中拿走index.html的剧情。此时的状态叫左券缓存,浏览器和服务器之间有三回呼吁交互。

地方二:若修改时间和文件内容推断有私下一个平素不经过,则服务器会受理此番央求,之后的操作同

①自己的文字表明本事也可以有数,为了尽量把那个流程描述清楚一些,下边

0×01 到底发生什么了?

当客商发起三个HTTP央浼时,首先顾客端将与服务端之间建立TCP连接,成功组建连接后,服务端将对恳求举行拍卖,并对客商端做出响应,响应内容相似满含响应核心。
(此处大家仅轻巧表达,但忠实的一回呼吁当中产生的思想政治工作是极度复杂的,这里贴条连接,讲得比较详细)。
从输入 ULX570L 到页面加载成功的长河中都发生了哪些事情?

2 H5 缓存机制原理剖判

正文的目的

云顶娱乐每天送6元,正文的料想读者是:素不相识图形学,熟知前端,希望精晓或种类学习 WebGL 的同学。

本文不是 WebGL 的概述性文章,亦非总体详细的 WebGL 教程。本文只期望成为一篇供 WebGL 初学者使用的纲领。

云顶娱乐棋牌,做事原理

经过一段轻巧的 JavaScript,大家得以提醒浏览器在顾客访谈页面的时候马上登记我们谐和的 service worker。近些日子支撑 service worker 的浏览器少之甚少,所认为了幸免不当,大家供给运用性子检查测量检验。

JavaScript

if (navigator.serviceWorker) { navigator.serviceWorker.register('/service-worker.js'); }

1
2
3
if (navigator.serviceWorker) {
    navigator.serviceWorker.register('/service-worker.js');
}

Service worker 安装事件的一有的,我们得以应用 新的缓存 API 来缓存大家网站中的种种内容,比方 HTML、CSS 和 JavaScript:

JavaScript

var staticCacheName = 'static'; var version = 1; function updateCache() { return caches.open(staticCacheName + version) .then(function (cache) { return cache.addAll([ '/offline-page.html', '/assets/css/main.css', '/assets/js/main.js' ]); }); }; self.addEventListener('install', function (event) { event.waitUntil(updateCache()); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var staticCacheName = 'static';
var version = 1;
 
function updateCache() {
    return caches.open(staticCacheName + version)
        .then(function (cache) {
            return cache.addAll([
                '/offline-page.html',
                '/assets/css/main.css',
                '/assets/js/main.js'
            ]);
        });
};
 
self.addEventListener('install', function (event) {
    event.waitUntil(updateCache());
});

当安装到位后,service worker 可以监听和决定 fetch 事件,让大家能够完全调控之后网址中生出的兼具互连网央求。

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith(fetch(event.request)); });

1
2
3
self.addEventListener('fetch', function (event) {
    event.respondWith(fetch(event.request));
});

在此地我们有很利索的上空能够宣布,比如上面这些标准,能够经过代码来生成大家友好的诉求响应:

JavaScript

self.addEventListener('fetch', function (event) { var response = new Response('<h1>Hello, World!</h1>', { headers: { 'Content-Type': 'text/html' } }); event.respondWith(response); });

1
2
3
4
5
self.addEventListener('fetch', function (event) {
    var response = new Response('&lt;h1&gt;Hello, World!&lt;/h1&gt;',
        { headers: { 'Content-Type': 'text/html' } });
    event.respondWith(response);
});

再有那些,假诺在缓存中找到了伏乞相应的缓存,我们得以一向从缓存中回到它,如若没找到的话,再通过互连网获得响应内容:

JavaScript

self.addEventListener('fetch', function (event) { event.respondWith( caches.match(event.request) .then(function (response) { return response || fetch(event.request); }) ); });

1
2
3
4
5
6
7
8
self.addEventListener('fetch', function (event) {
    event.respondWith(
        caches.match(event.request)
            .then(function (response) {
                return response || fetch(event.request);
            })
    );
});

那正是说大家怎么样使用那个效应来提供离线体验吧?

首先,在 service worker 安装进程中,我们需求把离线页面要求的 HTML 和能源文件通过 service worker 缓存下来。在缓存中,大家加载了温馨费用的 填字游戏 的 React应用 页面。之后,我们会阻拦全部访谈theguardian.com 互连网央求,包蕴网页、以及页面中的资源文件。管理那些央浼的逻辑差十分的少如下:

  1. 当我们检验到传播央浼是指向大家的 HTML 页面时,我们连年会想要提供新型的内容,所以大家会尝试把那些乞求通过网络发送给服务器。
    1. 当大家从服务器获得了响应,就足以间接重回那一个响应。
    2. 若是网络央浼抛出了特别(比如因为客商掉线了),我们捕获那一个极其,然后使用缓存的离线 HTML 页面作为响应内容。
  2. 不然,当大家检查测量试验到乞求的不是 HTML 的话,大家会从缓存中查找响应的央求内容。
    1. 倘使找到了缓存内容,大家得以一向回到缓存的剧情。
    2. 不然,我们会尝试把这几个央浼通过互连网发送给服务器。

在代码中,大家选拔了 新的缓存 API(它是 Service Worker API 的一有的)以及 fetch 成效(用于转移互联网须求),如下所示:

JavaScript

var doesRequestAcceptHtml = function (request) { return request.headers.get('Accept') .split(',') .some(function (type) { return type === 'text/html'; }); }; self.addEventListener('fetch', function (event) { var request = event.request; if (doesRequestAcceptHtml(request)) { // HTML pages fallback to offline page event.respondWith( fetch(request) .catch(function () { return caches.match('/offline-page.html'); }) ); } else { // Default fetch behaviour // Cache first for all other requests event.respondWith( caches.match(request) .then(function (response) { return response || fetch(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
25
26
27
var doesRequestAcceptHtml = function (request) {
    return request.headers.get('Accept')
        .split(',')
        .some(function (type) { return type === 'text/html'; });
};
 
self.addEventListener('fetch', function (event) {
    var request = event.request;
    if (doesRequestAcceptHtml(request)) {
        // HTML pages fallback to offline page
        event.respondWith(
            fetch(request)
                .catch(function () {
                    return caches.match('/offline-page.html');
                })
        );
    } else {
        // Default fetch behaviour
        // Cache first for all other requests
        event.respondWith(
            caches.match(request)
                .then(function (response) {
                    return response || fetch(request);
                })
        );
    }
});

就只要求这么多!theguardian.com 上的 持有代码都以在 GitHub 上开源 的,所以你能够去那儿查看大家的 service worker 的完整版本,恐怕直接从生育环境上访谈 。

我们有丰饶的说辞为那些新的浏览器技术欢呼喝彩,因为它能够用来让您的网址像明日的原生应用同样,具有完善的离线体验。将来当 theguardian.com 完全迁移到 HTTPS 之后,离线页面包车型地铁根本性会明显增加,大家能够提供进一步完善的离线体验。设想一下您在上下班路上互连网非常差的时候访谈theguardian.com,你会见到特地为您订制的本性化内容,它们是在你在此之前访谈网址时由浏览器缓存下来的。它在装置进度中也不会生出任何不便,你所供给的只是寻访那些网址而已,不像原生应用,还索要顾客有二个应用店铺的账号技能设置。Serviceworker 同样能够帮忙我们进步网址的加载速度,因为网址的框架能够被有限协助地缓存下来,就像原生应用同样。

万一您对 service worker 很感兴趣,想要明白更加多内容的话,开荒者 马特Gaunt(Chrome的忠实扶助者)写了一篇越发详实地 介绍 Service Worker的文章。

打赏支持小编翻译越多好作品,感谢!

打赏译者

一图以蔽之

云顶娱乐每天送6元 4

云顶娱乐每天送6元 5

建立TCP连接

为了扩充保证的数目传输,TCP在进展发送数据从前,会进行TCP一遍握手,以此分明接收方能够得逞接到传输的多少,而创设连接的历程,必然是要消耗系统能源,以及时光能源的。

2.1 浏览器缓存机制

浏览器缓存机制是指通过 HTTP 左券头里的 Cache-Control(或 Expires)和 Last-Modified(或 Etag)等字段来决定文件缓存的编写制定。这应该是 WEB 中最先的缓存机制了,是在 HTTP 公约中实现的,有一点点差别于 Dom Storage、AppCache 等缓存机制,但实质上是一致的。能够了然为,一个是说道层达成的,贰个是应用层完成的。

Cache-Control 用于调整文件在地头缓存有效时间长度。最广大的,举个例子服务器回包:Cache-Control:max-age=600 表示文件在本土应该缓存,且实用时间长度是600秒(从发出诉求算起)。在接下去600秒内,假设有央浼那一个财富,浏览器不会产生HTTP 恳求,而是直接使用本地缓存的文本。

Last-Modified 是标记文件在服务器上的最新更新时间。后一次恳请时,要是文件缓存过期,浏览器通过 If-Modified-Since 字段带上那个小时,发送给服务器,由服务器比较时间戳来决断文件是不是有改换。若无改换,服务器重返304报告浏览器继续应用缓存;假如有修改,则赶回200,同有的时候候再次来到最新的公文。

Cache-Control 日常与 Last-Modified 一同行使。一个用以调节缓存有效时间,一个在缓存失效后,向服务查询是还是不是有立异。

Cache-Control 还应该有贰个同作用的字段:Expires。Expires 的值二个万万的时间点,如:Expires: Thu, 10 Nov 2014 08:45:11 维生霉素T,表示在那么些时间点此前,缓存都以平价的。

Expires 是 HTTP1.0 标准中的字段,Cache-Control 是 HTTP1.1 标准中新加的字段,作用雷同,都是调控缓存的管事时间。当那八个字段同一时候出现时,Cache-Control 是高优化级的。

Etag 也是和 Last-Modified 同样,对文件实行标记的字段。分歧的是,Etag 的取值是贰个对文件实行标记的性状字串。在向服务器询问文件是或不是有革新时,浏览器通过 If-None-Match 字段把特色字串发送给服务器,由服务器和文件最新特征字串实行匹配,来判别文件是还是不是有更新。未有更新回包304,有更新回包200。Etag 和 Last-Modified 可依附须要使用三个或五个同一时间使用。七个同期利用时,只要满意基中七个规格,就认为文件未有更新。

除此以外有二种特有的境况:

  • 手动刷新页面(F5),浏览器会一贯认为缓存已经晚点(恐怕缓存还尚未过期),在伸手中丰硕字段:Cache-Control:max-age=0,签发承包合约向服务器询问是或不是有文件是或不是有更新。
  • 强制刷新页面(Ctrl+F5),浏览器会一向忽略本地的缓存(有缓存也会感到本地未有缓存),在伸手中丰盛字段:Cache-Control:no-cache(或 Pragma:no-cache),发包向劳动重新拉取文件。

下边是因而 Google Chrome 浏览器(用任何浏览器+抓包工具也能够)自带的开荒者工具,对二个能源文件区别意况央求与回包的截图。

第三次呼吁:200

云顶娱乐每天送6元 6

缓存保藏期内伏乞:200(from cache)

云顶娱乐每天送6元 7

缓存过期后呼吁:304(Not Modified)

云顶娱乐每天送6元 8

相似浏览器会将缓存记录及缓存文件存在本地 Cache 文件夹中。Android 下 App 要是利用 Webview,缓存的文本记录及文件内容会设有当前 app 的 data 目录中。

浅析:Cache-Control 和 Last-Modified 平时用在 Web 的静态能源文件上,如 JS、CSS 和一部分图像文件。通过安装财富文件缓存属性,对加强财富文件加载速度,节省流量很有意义,特别是活动网络碰到。但难题是:缓存有效时间长度该怎样设置?假若设置太短,就起不到缓存的应用;要是设置的太长,在能源文件有更新时,浏览器假如有缓存,则不可能立时取到最新的公文。

Last-Modified 必要向服务器发起查询央求,本领知道财富文件有未有革新。尽管服务器只怕回到304告知未有更新,但也还应该有八个伸手的进程。对于活动互联网,那个央浼恐怕是相比耗费时间的。有一种说法叫“消灭304”,指的正是优化掉304的呼吁。

抓包开掘,带 if-Modified-Since 字段的伸手,假使服务器回包304,回包带有 Cache-Control:max-age 或 Expires 字段,文件的缓存有效时间会更新,就是文本的缓存会重新有效。304回包后就算再诉求,则又一贯使用缓存文件了,不再向服务器询问文件是还是不是更新了,除非新的缓存时间另行过期。

另外,Cache-Control 与 Last-Modified 是浏览器内核的建制,日常都以正经的兑现,无法更动或安装。以 QQ 浏览器的 X5为例,Cache-Control 与 Last-Modified 缓存不能禁止使用。缓存容积是12MB,不分HOST,过期的缓存会最初被免除。假如都没过期,应该事先清最先的缓存或最快到期的或文件大小最大的;过期缓存也可能有十分的大可能率依旧有效的,清除缓存会导致财富文件的再度拉取。

还可能有,浏览器,如 X5,在选取缓存文件时,是从未对缓存文件内容张开校验的,那样缓存文件内容被修改的只怕。

解析开采,浏览器的缓存机制还不是可怜健全的缓存机制。完美的缓存机制应该是那般的:

  1. 缓存文件没更新,尽可能使用缓存,不用和服务器交互;
  2. 云顶娱乐棋牌:缓存机制浅析,创设高质量WEB之HTTP首部优化。缓存文件有立异时,第不常间能应用到新的文本;
  3. 缓存的文书要维持完整性,不应用被涂改过的缓存文件;
  4. 缓存的体积大小要能设置或调控,缓存文件不可能因为存款和储蓄空间限制或过期被拔除。
    以X5为例,第1、2条不能够况且知足,第3、4条都不可能满足。

在实际上利用中,为了化解 Cache-Control 缓存时间长度倒霉设置的主题素材,以及为了”消灭304“,Web前端应用的艺术是:

  1. 在要缓存的财富文件名中加上版本号或文件 MD5值字串,如 common.d5d02a02.js,common.v1.js,同一时候安装 Cache-Control:max-age=3153五千,约等于一年。在一年时光内,财富文件如若地点有缓存,就能够利用缓存;也就不会有304的回包。
  2. 假定财富文件有改动,则更新文件内容,同期修改能源文件名,如 common.v2.js,html页面也会援用新的财富文件名。

透过这种艺术,达成了:缓存文件并未立异,则使用缓存;缓存文件有更新,则第一时间使用新型文件的目的。即上面说的第1、2条。第3、4条由于浏览器内部机制,近期还不恐怕满意。

Canvas

熟习 Canvas 的同学都清楚,Canvas 绘图先要获取绘图上下文:

JavaScript

var context = canvas.getContext('2d');

1
var context = canvas.getContext('2d');

context上调用种种函数绘制图形,比方:

JavaScript

// 绘制左上角为(0,0),右下角为(50, 50)的矩形 context.fillRect(0, 0, 50, 50);

1
2
// 绘制左上角为(0,0),右下角为(50, 50)的矩形
context.fillRect(0, 0, 50, 50);

WebGL 同样必要获得绘图上下文:

JavaScript

var gl = canvas.getContext('webgl'); // 或 experimental-webgl

1
var gl = canvas.getContext('webgl'); // 或 experimental-webgl

只是接下去,假使想画贰个矩形的话,就没那样轻巧了。实际上,Canvas 是浏览器封装好的三个制图情状,在骨子里开展绘图操作时,浏览器依旧须求调用 OpenGL API。而 WebGL API 差比很少就是 OpenGL API 未经封装,直接套了一层壳。

Canvas 的越多学问,能够参照:

  • JS 权威指南的 21.4 节或 JS 高档程序设计中的 15 章
  • W3CSchool
  • 阮一峰的 Canvas 教程

打赏辅助自身翻译越多好文章,多谢!

云顶娱乐每天送6元 9

1 赞 收藏 评论

本文由云顶娱乐棋牌发布于云顶娱乐棋牌,转载请注明出处:云顶娱乐棋牌:缓存机制浅析,创设高质量WEB之

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。