如何做html单页缓存图,如何实现shtml页面的局部缓存

平时在web开发中，对于shtml页面，用得最多的SSI指令是include。语法规则如下：

这样可提高代码重用性以及可维护性，因此，一般都把公共文件，如头部、尾部、侧边栏、公共的JS等做成一个单独的文件，然后通过include指令包含进来，这样整个站点的头部、尾部、侧边栏、公共JS等，都可以被引入到shtml页面中。后面需求更改，比如产品需要更改站点头部，也只需要更改头部文件，就可以实现全站头部更新。可见通过include指令包含公共文件，可以使shtml页面的维护性和重用性大大增强。

1、shtml页面的常规布局

一般来说，对于shtml页面，一个站点，每个页面都会有相同的公共文件，比如页面的头部、尾部、侧边栏目、公共JS等。访问站点下的每一个页面，相同的公共文件，都需要重复从服务器下载。从性能和带宽角度看，重复下载相同内容对性能不利，同时也会占用带宽。因此include进来的公共文件，是否有办法缓存这些文件呢？这就是这里需要重点讨论的内容。假设有这样一个站点，包含有页面头部、侧边栏、页面尾部、公共JS。布局如下图：

从上面的网页布局结构可看出，页头、侧边栏、页尾都是属于公共的内容，HTML代码桩如下：

2、实现shtml页面缓存的原理

在此，我们需要先判断include的文件是否缓存过，如果缓存过，则不会通过include来包含对应的内容。ssi有判断的指令，语法如下：

< !–#elif expr=”test_condition” –>

< !–#else –>

< !–#endif –>

我们可通过SSI指令来判断是否缓存过。同时可利用html5的localStorage来对代码进行保存。

可localStorage只能够通过JS访问，那如何实现localStorage和服务器的ssi指令通信呢？这里利用到一个小技巧，借助cookie作为桥梁，不管是JS还是SSI都是可以访问，因此可利用它来实现SSI和JS之间的通信。换言之，用JS写一个cookie来标识是否已经缓存过相应的内容，然后利用SSI的if语句结合cookie来判断是否需要include对应的内容。

其主要流程图如下：

3、示例分析

来看一个简单的demo。以前面页面框架为例，假设header里面有内容是通过JS来输出，侧边栏是全部的HTML，现在要缓存header中的JS和侧边栏的HTML。先来看核心的HTML代码(SSI部分)：

再看JS写入缓存核心代码：

localData.loadfromCache是实现从localStorage读取缓存并渲染出来，这个比较简单，这里就不再单独介绍，大家可以从马海祥博客下载示例代码来查看，或者放在支持ssi的服务器下运行。第一次访问后，将会把对应的公共文件进行缓存，先查看解析后的HTML源代码：

从上图可以看出，第一次访问时，因没有缓存过，都是通过include进行直接解析。同时通过cookie和localStorage可查看到相应的值。

cookie信息：

(点击查看高清大图)

localStorage信息：

(点击查看高清大图)

第二次访问时，再查看解析后的HTML源代码：

从上面的2个图对比可以看出，当公共文件没有被缓存时，是通过解析include指令得到相应的代码；当有缓存时，直接通过JS代码从缓存中读取；从而实现shtml文件局部缓存。

4、版本控制

上述示例演示了shtml的局部缓存，那么缓存的版本如何控制呢？可通过cookie来保存版本号，当有缓存的公共文件需要更新时，需要更新ssi if语句中的的版本号，也就是更新下面这行代码中的版本号：

假设上一个版本号是01，现在版本号是02，此时需要把上述代码更改为：

当从SSI中读取到的cookie值和新的版本号不一致时，就不会从缓存中读取了。同理在检测写入缓存时，也需要检测当前cookie的值和当前的版本号是否一致即可，如果不一致，则需要重新写入缓存。

5、安全控制

这里把JS和HTML等代码都缓存到localStorage中去，如果网站中存在XSS漏洞，则攻击者可利用XSS漏洞篡改localStorage保存的数据，这样会扩大网站的危害性，因此马海祥觉得首先要从源头上控制好XSS漏洞，同时也需要对从localStorage中读取出来的数据进行合法性校验，以便降低安全风险。大家可以自行设计一个算法来检测数据的合法性。

马海祥博客点评：

在上面的示例中只是对简单的header中的JS和侧边栏的HTML进行缓存，在实际项目中，需要缓存的JS和HTML代码量要比示例中大得多，因此性能优化的实际效果也会更加明显。因此在实际项目中，可根据公共文件的大小来决定是否需要使用shtml缓存。另外，关于缓存时间，只需要把cookie的有效期设置为N天，则缓存的周期就变成N天了，非常灵活！

本文发布于马海祥博客文章，如想转载，请注明原文网址摘自于http://www.mahaixiang.cn/html/412.html，注明出处；否则，禁止转载；谢谢配合！