新型SEO思维就是从一个全新的层次上提升seo优化的水平,达到网络信息最佳化的展示效果!
马海祥博客 > 网站制作 > html代码教程 > 如何实现shtml页面的局部缓存

如何实现shtml页面的局部缓存

时间:2014-02-22   文章来源:马海祥博客   访问次数:

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

<!–#include virtual=”shtmlCache/header.shtml” –>

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

如何实现shtml页面的局部缓存-马海祥博客

1、shtml页面的常规布局

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

如何实现shtml页面的局部缓存-马海祥博客

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

如何实现shtml页面的局部缓存-马海祥博客

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

在此,我们需要先判断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对应的内容。

其主要流程图如下:

如何实现shtml页面的局部缓存-马海祥博客

3、示例分析

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

如何实现shtml页面的局部缓存-马海祥博客

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

如何实现shtml页面的局部缓存-马海祥博客

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

如何实现shtml页面的局部缓存-马海祥博客

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

cookie信息:

如何实现shtml页面的局部缓存-马海祥博客
(点击查看高清大图)

localStorage信息:

如何实现shtml页面的局部缓存-马海祥博客
(点击查看高清大图)

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

如何实现shtml页面的局部缓存-马海祥博客

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

4、版本控制

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

<!–#if expr=”${HTTP_COOKIE} = /(;)?html_aside=01(;)?/”–>

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

<!–#if expr=”${HTTP_COOKIE} = /(;)?html_aside=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,注明出处;否则,禁止转载;谢谢配合!

相关热词搜索: shtml页面 局部缓存

上一篇:解析HTML5页面元素的嵌套规则及引起的错误问题
下一篇:如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题

今日话题更多>

SEO研究院 更多 >>