无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-10-29 01:45 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

大型单页面应用的进阶挑战,浏览器缓存机制

重型单页面应用的晋级挑衅

2015/09/30 · HTML5, JavaScript · 单页应用

原著出处: 林子杰(@Zack__lin)   

开卷须知:此处的大型单页面应用(SPA Web App)是指页面和功力组件在二个某部量级以上,举个栗子,比方30 个页面100 个零部件,同一时候伴随着多量的数额交互操作和八个页面包车型地铁多少同步操作。何况这里提到的页面,均属于 hash 页面,而多页面概念的页面,是四个单独的 html 文书档案。基于这一个前提,大家再来商量,不然我怕大家 Get 不到同二个 G 点上去。

浏览器缓存机制

2015/12/01 · HTML5 · HTTP

最初的稿件出处: 吴秦   

浏览器缓存机制

浏览器缓存机制,其实重大正是**HTTP公约定义的缓存机制(如: Expires; Cache-control**等)。不过也许有非HTTP契约定义的缓存机制,如使用HTML Meta 标签,Web开荒者能够在HTML页面包车型客车<head>节点中踏向<meta>标签,代码如下:图片 1

上述代码的职能是告诉浏览器当前页面不被缓存,每趟访谈都急需去服务器拉取。使用上非常轻巧,但唯有风姿洒脱部分浏览器能够支撑,並且具备缓存代理服务器都不支持,因为代理不分析HTML内容自个儿。

上面笔者根本介绍HTTP公约定义的缓存机制。

连不上网?United Kingdom卫报的特性离线页面是如此做的

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

本文由 伯乐在线 - Erucy 翻译,weavewillg 校稿。未经许可,禁绝转发!
韩语出处:Oliver Ash。应接加入翻译组。

大家是什么行使 service worker 来为 theguardian.com 营造叁个自定义的离线页面。

图片 2

theguardian.com 的离线页面。插图:Oliver Ash

你正在朝着公司途中的地铁里,在手提式有线电话机上开发了 Guardian 应用。大巴被隧道包围着,但是那么些利用能够健康运营,纵然未有网络连接,你也能收获完整的效力,除了出示的开始和结果大概有一些旧。要是你品味在网址上也如此干,缺憾它完全没有办法加载:

图片 3

安卓版 Chrome 的离线页面

Chrome 中的这么些彩蛋,相当多个人都不驾驭》

Chrome 在离线页面上有个暗藏的游艺(桌面版上按空格键,手提式有线电话机版上点击那只恐龙),那多少能缓慢解决一点你的苦闷。可是我们得以做得更加好。

Service workers 允许网址作者拦截本人站点的具备互联网央求,那也就表示大家得以提供康健的离线体验,就疑似原生应用相似。在 Guardian 网址,大家多年来上线了四个自定义的离线体验效果。当客户离线的时候,他们会看出贰个含有 Guardian 标记的页面,上边带有多少个简易的离线提示,还会有二个填字游戏,他们能够在等候互联网连接的时候玩玩这几个找点乐子。那篇博客解释了我们是什么样营造它的,可是在开班以前,你能够先本身试试看。

挑衅风姿罗曼蒂克:前端组件化

基于大家所说的前提,第三个面前遭遇的挑战是组件化。这里依旧要重申的是组件化根本目标不是为了复用,相当多人一直没想了然那一点,总是感觉造的车轱辘别的事情能够用,说不定今后也得以用。

实质上前端发展迭代这么快,交互变化也快,各类适配更新不胜枚举。几天前造的车轱辘,过阵子外人造了个高档轮子,大家都会选越来越尖端的车轱辘,所现在后前端界有三个现象正是为着让别人用自身的车轮,本身努力不停地造。

在前面三个工业化生产趋势下,假使要增加生产作用,就亟须让组件标准化规范化,达到怎么着的水平吗?黄金时代辆车除了底盘和车身框架必要团结设计成立之外,其余标准零件都足以购买组装(专门的学问学得差,有何谬误请指正)。也正是说,除了 UI 和前端架构须要自个儿解决之外,其余的机件都以能够布满拿来主义的,倘诺希图让车子跑得更稳更安全,能够对组件举行打磨优化完备。

说了那般说,倒不比看看徐飞的稿子《2016前端组件化框架之路》 里面写的剧情都是经过一定推行得出的主张,所以大多数故事情节笔者是赞成並且深有体会的。

Expires策略

Expires是Web服务器响应新闻头字段,在响应http央求时报告浏览器在逾期时光前浏览器可以一贯从浏览器缓存取数据,而不需求重新恳请。

下边是宝贝PK项目中,浏览器拉取jquery.js web服务器的响应头:

图片 4

注:Date头域表示音讯发送的时光,时间的叙说格式由rfc822定义。比如,Date: Mon,31 Dec 二〇〇〇04:25:57核糖霉素T。

Web服务器告诉浏览器在二零一二-11-28 03:30:01那一个时间点以前,能够运用缓存文件。发送央浼的时日是二〇一二-11-28 03:25:01,即缓存5分钟。

但是Expires 是HTTP 1.0的事物,今后暗中认可浏览器均暗中同意使用HTTP 1.1,所以它的效用为主忽视。

试试看

你须求一个帮助 Service Worker 和 fetch API 的浏览器。结束到本文编写时唯有Chrome(手提式有线电话机版和桌面版)同偶尔间援救这两种 API(译者注:Opera 近来也帮助这两侧),可是 Firefox 异常快就要扶助了(在每天更新的版本中黄金时代度支撑了),除去 Safari 之外的具备浏览器也都在尝试。别的,service worker 只好登记在动用了 HTTPS 的网址上,theguardian.com 已经起来逐步搬迁到 HTTPS,所以大家只可以在网址的 HTTPS 部分提供离线体验。就现阶段的话,大家筛选了 开辟者博客 作为大家用来测量试验的地点。所以假使您是在大家网站的 开采者博客 部分阅读那篇文章的话,很幸运。

当您利用支持的浏览器访谈大家的 开辟者博客 中的页面包车型大巴时候,一切就盘算安妥了。断开你的互联网连接,然后刷新一下页面。借让你自己没条件尝试的话,能够看一下这段 示范录制(译者注:需梯子)。

挑衅二:路由去中央化

依靠大家所说的前提,核心化的路由维护起来很坑爹(假使做风流罗曼蒂克五个页面 DEMO 的就没必要出来现眼了)。MV* 架构正是存在此样个坑爹的主题材料,必要评释中央化 route(angular 和 react 等都亟待先申明页面路由组织),针对差异的路由加载哪些组件模块。生龙活虎旦页面多起来,以至假诺有人偷懒直接在有些路由写了有些作业耦合的逻辑,这些route 的可维护性就变得有一些不好了。并且客户访问的首先个页面,都急需加载 route,就算别的路由的代码跟当前页面无关。

我们再回过头来思索静态页面轻便的加载情势。大家假设把 nginx 搭起来,把 html 页面放在对应的静态财富目录下,运营 nginx 服务后,在浏览器地址栏输入 127.0.0.1:8888/index.html 就足以访谈到这几个页面。再复杂一点,大家把目录整成上边包车型大巴花样:

/post/201509151800.html /post/201509151905.html /post/201509152001.html /category/js_base_knowledge.html /category/css_junior_use.html /category/life_is_beautiful.html

1
2
3
4
5
6
/post/201509151800.html
/post/201509151905.html
/post/201509152001.html
/category/js_base_knowledge.html
/category/css_junior_use.html
/category/life_is_beautiful.html

这种目录结构很熟吧,对 SEO 很和谐吧,当然那是后话了,跟大家明天说的不是二遍事。这种目录结果,不用大家去给 Web Server 定义一批路由法则,页面存在即重临,不然重回404,完全不供给多余的宣示逻辑。

遵照这种目录结构,大家能够抽象成那规范:

/{page_type}/{page_name}.html

1
/{page_type}/{page_name}.html

实际还足以更简约:

/p/{name}.html

1
/p/{name}.html

从组件化的角度出发,还可以那样子:

/p/{name}/name.js /p/{name}/name.tpl /p/{name}/name.css

1
2
3
/p/{name}/name.js
/p/{name}/name.tpl
/p/{name}/name.css

为此,依照大家简化后的逻辑,我们只须要三个 page.js 那样两个路由加载器,依据大家约定的能源目录结构去加载相应的页面,大家就没有必要去干评释路由况兼中央化路由这种蠢事了。具体来看代码。咱也无意去深入分析了,里面有注释。

Cache-control计策(重视关怀)

Cache-Control与Expires的功用一样,都是指明当前能源的有效期,调整浏览器是还是不是直接从浏览器缓存取数据大概再一次发央求到服务器取数据。只但是Cache-Control的挑选更加的多,设置更留神,借使同期设置的话,其开始的一段时期级高于**Expires**。图片 5

恐怕地点拾贰分诉求,web服务器重临的Cache-Control头的值为max-age=300,即5分钟(和方面包车型客车Expires时间风流罗曼蒂克致,那么些不是必得的)。

图片 6

干活原理

经过生龙活虎段轻易的 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(它是 瑟维斯 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的文章。

打赏扶持自身翻译更加多好小说,多谢!

打赏译者

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:大型单页面应用的进阶挑战,浏览器缓存机制

关键词: