之前实现了手机站小说封面页动静分离的改造，稍微简单啰嗦几句，后面有机会详细的再写下。

封面页以书为key，缓存起来封面页的静态的通用的，很少改变的主要部分内容，利用异步加载的方法，修改页面上个别按钮和个人信息的内容部分。主页面内容部分由原来的300-500ms的响应时间可降低至50ms左右，因为内容都是直接根据url里的书号产生的key来从存储中获得的。另外通过异步加载动态获取的内容可以控制在60-100ms之内，基本实现了页面的动静分离和提速。

现在的问题是这样的，因为某些原因页面上布置了至少4、5个广告，当用户处于2g，甚至GPRS网络的情况下，因为网速的限制以及其他的一些原因，原本用的jquery的ajax加载非常的滞后执行，导致页面显示出来后目录部分原本文字需要等待4、5秒才能看到动态加载获取到目录内容替换掉静态内容中的目录部分。

这样就会给用户及其不好的加载延后的体验，后来经过摸索实验。将目录部分的内容放在iframe中，随页面dom结构加载，并在iframe的内的页面末端加上js，将iframe内的目录部分的内容替换主页面的目录部分的内容。

修改后的效果如下几张图，图中模拟的是GPRS（50kb/s 500ms RTT）网络情况下的时间效果

首先2.17秒的时候浏览器开始渲染绘制主页面，可以看到主页面内容，在2.63秒的时候首屏内容渲染完成，基本内容如下图。

iframe异步加载实现web页动静分离

iframe异步加载实现web页动静分离

在3.80秒，原来页面的目录部分被iframe中的代码替换掉变成动态的目录内容

iframe异步加载实现web页动静分离

iframe异步加载实现web页动静分离

iframe异步加载实现web页动静分离

iframe异步加载实现web页动静分离

推荐阅读http://www.cnblogs.com/beiyuu/archive/2011/07/18/iframe-tech-performance.html