shtml页面局部缓存的实现
需求背景
平时在web开发中,对于shtml页面,用得最多的SSI指令是include。语法规则如下:
<!–#include virtual=”shtmlCache/header.shtml” –>
这样可提高代码重用性以及可维护性,因此,一般都把公共文件,如头部、尾部、侧边栏、公共的JS等做成一个单独的文件,然后通过include指令包含进来,这样整个站点的头部、尾部、侧边栏、公共JS等,都可以被引入到shtml页面中。后面需求更改,比如产品需要更改站点头部,也只需要更改头部文件,就可以实现全站头部更新。可见通过include指令包含公共文件,可以使shtml页面的维护性和重用性大大增强。

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

HTML 代码桩

实现原理:
需要判断include的文件是否缓存过,如果缓存过,则不会通过include来包含对应的内容。ssi有判断的指令,语法如下:
<!–#if expr=”test_condition” –>
< !–#elif expr=”test_condition” –>
< !–#else –>
< !–#endif –>

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

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

主要流程图如下:
流程图

示例分析:

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

shtml代码

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

JS写入缓存

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

第一次访问解析后的HTML源码

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

cookie信息

localStorage信息:
localStorage信息

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

从缓存中读取时的HTML源码

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

版本控制:
上述示例演示了shtml的局部缓存,那么缓存的版本如何控制呢?可通过cookie来保存版本号,当有缓存的公共文件需要更新时,需要更新ssi if语句中的的版本号,也就是更新下面这行代码中的版本号:
<!–#if expr=”${HTTP_COOKIE} = /(;)?html_aside=01(;)?/”–>
假设上一个版本号是01,现在版本号是02,此时需要把上述代码更改为:
<!–#if expr=”${HTTP_COOKIE} = /(;)?html_aside=02(;)?/”–>
当从SSI中读取到的cookie值和新的版本号不一致时,就不会从缓存中读取了。同理在检测写入缓存时,也需要检测当前cookie的值和当前的版本号是否一致即可,如果不一致,则需要重新写入缓存。

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

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