前端机能优化（Application Cache篇）

2019年8月26日 181次阅读 来源: 天镶

正巧看到在送书，于是乎找了找自身博客上纪录过的一些东西来及其无耻的蹭书了~~~

小广告：更多内容能够看我的博客

之前在segmentfault上刷题目看到一个关于manifest的题目，很猎奇就研讨了一下application cache。Application Cache是HTML5的新特征，许可阅读器在当地存储页面所须要的资本，使得页面离线也能够接见。之前研讨的目标是为了在博客中运用，将一些不须要修正的CSS、JavaScript、图片文件离线缓存，如许加载速率必定飞起，愿望能用在博客上，然则失利了，但照样纪录一下学到的学问

Application Cache的配置文件

起首须要在服务器上竖立一个文件，内里的内容肯定了哪些文件须要缓存，哪些文件不须要，假如资本没法接见会运用什么页面等

这个文件平常为.appcache范例，称为缓存清单(cache manifest)文件，一个完全的缓存清单文件以下：

CACHE MANIFEST
# version xx.xx.xx
CACHE:
needBeCached.png
needBeCached2.js

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

FALLBACK:
/ 404.html

能够看到，文件的头部信息CACHE MANIFEST用来标注这个文件是缓存清单文件，厥后平常状况下（最好是）随着一行标明版本的解释，这行解释非常重要，将在背面文件加载部份细致引见这行解释的重要性

CACHE部份

除了头部信息，这个缓存清单文件分为几部份，第一部份为CACHE部份:

CACHE:
needBeCached.png
needBeCached2.js

这一部份标注了哪些资本文件须要被缓存能够列出多个

假如有途径，如须要缓存blog下的blog.css文件，能够写成blog/blog.css。

别的CACHE:能够被省略，让须要缓存的资本文件直接跟在解释以后

NETWORK部份

第二部份为NETWORK部份：

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

这一部份定义了哪些文件不须要缓存，这些文件须要与服务器衔接

与CACHE一样，能够定义多个资本，而假如直接输入一个文件夹途径，也是正当的，比方/blog如许，blog文件夹下的一切文件都不会被缓存

能够运用通配符来，如除了上面CACHE中定义的资本，其他都必需与服务器衔接：

NETWORK:
*

须要注重一点是，载有这个manifest文件的HTML文档将一定会缓存，这个会在背面再次提到

FALLBACK部份

第三部份为FALLBACK部份：

FALLBACK:
/ 404.html

这一部份指定了一个后备页面，当资本没法接见时，阅读器会运用该页面

一样能够定义多条纪录，每条纪录列出两个URI，一个示意资本，一个示意后备页面。须要注重的是两个资本文件都须要运用相对途径切与manifest文件同源

一样能够运用通配符

保留和援用manifest文件

manifest文件能够保留在服务器上，保留为.appcache后缀，但必需与运用自身同源。在HTML文档中，能够指定清单文件的相对途径和相对URL。须要注重的是，manifest文件的MIME范例必需是text/cache-manifest

须要在HTML文档中引入manifest文件，能够运用相似以下代码：

<!doctype html>
<html manifest="manifest.appcache">
...
</html>

如许，HTML文档加载后，就会依据manifest.appcache的内容来缓存资本文件，在下次接见雷同页面的时刻，会直接运用缓存的资本文件来举行加快

缓存和加载机制

在第一次接见时，阅读器加载完HTML文档后，会检察其是不是有引入manifest文件。若引入，则加载manifest文件，然后依据manifest的文件内容举行资本的缓存，并缓存当前文档

以后接见，阅读器起首会检察manifest文件是不是被修正（不管是内容照样解释），假如被修正，将当作第一次接见，从新依据manifest文件内容举行缓存

假如运用缓存存在，且manifest没有被修正，阅读器直接从缓存中加载文档（注重：加载文档）和资本，不会接见收集（注重：不管联网与否，都不会接见收集）

在缓存多个资本文件时，阅读器下载资本文件会先放在一个暂时的缓存中，假如有任何一个资本文件下载失利，阅读器将住手其他缓存资本的下载，并消灭暂时缓存。假如一切资本文件都被胜利下载，阅读器将会把这些资本文件以及援用manifest文件的HTML文档移动到永远离线缓存中

满满的都是坑

一些小坑

  1. 须要注重的是manifest文件放在服务器上，MIME范例必需是text/cache-manifest，假如运用 Apache，须要修正.htaccess文件。IE下默许application/octet-stream，须要在服务器指定
  2. 每一个须要缓存的页面的html都须要到场manifest属性
  3. 不要将manifest文件自身到场缓存，假如到场，阅读器将不会检测到服务器上manifest的更新，页面版本将万年稳定
  4. 不要认为一个资本文件加载失利，其他文件就会被缓存，缘由拜见缓存和加载机制的末了一段

一些大坑

  1. 在manifest文件中定义的资本悉数被胜利加载后，这些资本文件连同援用manifest文件的HTML文档一并被移动到永远离线缓存中。所以假如想只缓存js、css、图片等文件，而不愿望缓存HTML文档以坚持取得最新内容的状况来讲，这就是个大坑
  2. 依据Application Cache的加载机制，假如仅仅修正资本文件的内容（没有修正资本文件的途径或称号），阅读器将直接从当地离线缓存中猎取资本文件。所以在每次修正资本文件的同时，须要修正manifest文件，以触发资本文件的从新加载和缓存。这个中，最有用的体式格局是修正manifest文件内部的版本解释（所以说那句解释相称重要）
  3. 假如资本没有被缓存，在而没有设置NETWORK的状况下，将会没法加载（阅读器不会去收集上举行加载），所以须要运用通配符来表明除了CACHE中肯定的资本之外，其他资本都须要去收集上加载

运用iframe来避开一号坑？

网上传言避开一号坑的要领是运用iframe来指定须要缓存的资本，而避开HTML文档的缓存。具体做法是在HTML中嵌入一个iframe，iframe中的页面的HTML标签包括manifest属性援用manifest文件，内里定义了须要缓存的文件。如许就会只缓存iframe中的HTML文档，而延续更新主页面：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/javascript.js"></script>
</head>
<body>
    <iframe src="cache.html"></iframe>
</body>
</html>

能够看到，主页面的html标签中，并没有引入manifest文件。只是在个中加载了一个iframe，而这个iframe所加载的页面文档以下：

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
    <meta charset=utf-8 />
    <title>缓存页面</title>
</head>
<body>
</body>
</html>

缓存页面中引入了manifest文件，如许阅读器就会缓存manifest文件中定义的资本列表，比方这里manifest文件的内容以下：

CACHE MANIFEST
# VERSION 1.0

CACHE:
css/someStyle.css
js/someJavaScript.js

NETWORK:
*

在chrome中运转，能够在命令行中看到以下效果：

Creating Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://localhost:8000/css/someStyle.css
Application Cache Progress event (1 of 2) http://localhost:8000/js/someJavaScript.js
Application Cache Progress event (2 of 2)
Application Cache Cached event

阅读器缓存了manifest文件中定义的资本文件，实在同时还缓存了iframe中的缓存页面的文档，但不会缓存主页面，修正一下主页面，并按F5革新

Document was loaded from Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache NoUpdate event

能够看到主页面被更新了，然则someStyle.css和someJavaScript.js文件照旧从收集上加载了，而没有从cache中加载。翻开chrome的chrome://appcache-internals/能够看到，内里cache.html、someStyle.css、someJavaScript.js确切被缓存了，去掉NETWORK段，效果也是一样

Flags       URL                                         Size (headers and data)
Master,     http://localhost:8000/cache.html            388 B
Explicit,   http://localhost:8000/css/someStyle.css     228 B
Explicit,   http://localhost:8000/js/someJavaScript.js  244 B
Manifest,   http://localhost:8000/manifest.appcache     316 B

在firefox、opera上测试也是一样，虽然被缓存了，但照旧会从收集上加载，而iframe的解答要领也是2011~2012年摆布提出的，后来就没有相干文章了，预计已完全失效了

总结

Application重要是为了构建离线缓存，使得页面在离线形式下也能阅读。这比较合适一些页面上的运用以及静态的不常常变动的页面。其会缓存载体页面也是因为其机制。假如上面iframe机制完成有毛病，或是有其他要领只缓存资本不缓存HTML文档，请联络我

参考资料

运用运用缓存

Application Cache 就是个坑

    原文作者：天镶
    原文地址: https://segmentfault.com/a/1190000000490331
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞