前端性能优化（Application Cache篇）

时间 2019-11-07

原文原文链接

正巧看到在送书，因而乎找了找本身博客上记录过的一些东西来及其无耻的蹭书了~~~javascript

小广告：更多内容能够看个人博客css

以前在segmentfault上刷问题看到一个关于manifest的问题，很好奇就研究了一下application cache。Application Cache是HTML5的新特性，容许浏览器在本地存储页面所须要的资源，使得页面离线也能够访问。以前研究的目的是为了在博客中使用，将一些不须要改动的CSS、JavaScript、图片文件离线缓存，这样加载速度必然飞起，但愿能用在博客上，可是失败了，但仍是记录一下学到的知识html

Application Cache的配置文件

首先须要在服务器上创建一个文件，里面的内容肯定了哪些文件须要缓存，哪些文件不须要，若是资源没法访问会使用什么页面等java

这个文件通常为.appcache类型，称为缓存清单(cache manifest)文件，一个完整的缓存清单文件以下：chrome

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

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

FALLBACK:
/ 404.html

能够看到，文件的头部信息CACHE MANIFEST用来标注这个文件是缓存清单文件，其后通常状况下（最好是）跟着一行标明版本的注释，这行注释很是重要，将在后面文件加载部分详细介绍这行注释的重要性segmentfault

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文档移动到永久离线缓存中

满满的都是坑

一些小坑

须要注意的是manifest文件放在服务器上，MIME类型必须是text/cache-manifest，若是使用 Apache，须要修改.htaccess文件。IE下默认application/octet-stream，须要在服务器指定
每一个须要缓存的页面的html都须要加入manifest属性
不要将manifest文件自己加入缓存，若是加入，浏览器将不会检测到服务器上manifest的更新，页面版本将万年不变
不要觉得一个资源文件加载失败，其余文件就会被缓存，缘由参见缓存和加载机制的最后一段

一些大坑

在manifest文件中定义的资源所有被成功加载后，这些资源文件连同引用manifest文件的HTML文档一并被移动到永久离线缓存中。因此若是想只缓存js、css、图片等文件，而不但愿缓存HTML文档以保持得到最新内容的状况来讲，这就是个大坑
根据Application Cache的加载机制，若是仅仅修改资源文件的内容（没有修改资源文件的路径或名称），浏览器将直接从本地离线缓存中获取资源文件。因此在每次修改资源文件的同时，须要修改manifest文件，以触发资源文件的从新加载和缓存。这其中，最有效的方式是修改manifest文件内部的版本注释（因此说那句注释至关重要）
若是资源没有被缓存，在而没有设置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 就是个坑