记一复杂页面的前端优化(1) - 不一样的延迟加载

页面介绍：

　　该页面是1个记账类的页面，页面如下：

　　页面主要有4部分组成：

1. 上部的输入部分(有5大不同的类型，每个类型都是1个单独的tab，对应内容也不一样)   

2. 左边的分类列表(默认显示一级分类，点击展开子类)

3. 右边时间选择区(按月，年，季，自定义时间过滤等等)

4. 右边下半部分的数据列表(默认只显示每条数据基本信息，点击展开详细信息) 

　　可能看到这里大家不觉的这个页面会很大，那就再细说下，该页面包含记账的所有的功能(添加、删除，修改，分拆，上传图片，显示数据，数据排序)，而且每种下拉列表前面都有个"加号"(见输入部分的下列列表)，点击"加号"都会弹出类似如下的窗口进行添加(总共有8个左右的弹出窗口)，所有的这些都是通过js来实现(js代码总共写了大概2000行，不含注释)：

　　

问题

　　该页面有一些用户反映比较慢，经过测试也发现，因为页面比较复杂，js也比较多，所以在IE下速度会比较慢(特别是IE6)，而chrome和firefox速度还是可以的，所以这次的优化主要针对IE，当然优化后的其他浏览器肯定也会受益。

优化1：弹出窗口的延迟加载

　　本来第1个优化不应该写这个，因为这个优化效果并不是最明显的。把它放在第一位，是因为个人觉得这种延迟加载的想法还不错，比较有新意(目前还没见过网上有人介绍过这种延迟加载)。

　　入正题，上面说到，该页面总共有8个弹出窗口，而且每个弹出窗口的都使用了不同的图片(不少是png)，监控发现这些弹出窗口用的png图片虽然设置了缓存头(也使用了document.execCommand("BackgroundImageCache", false, true);)，但是在IE6下每次都不直接使用缓存，而是发生1个请求，并得到304状态回应(原因我估计跟使用DD_belatedPNG来处理png图片有关，因为时间关系还没深入研究)，监控图如下：

　　从图中可以看出这几个图片很影响加载速度，其实一开始我们根本用不上这些弹出窗口的图片，因为默认都是隐藏的，而且这些弹出窗口，一般用户都用的比较少。理所当然，我们想到了延迟加载。

　　想到延迟加载，第一想到就是先不加载弹出窗口的html代码，这样就不会加载对应的图片了，当用户点击弹出按钮的时候，再去后台加载对应的html代码。但这样就有个问题，当用户点击"加号"按钮，用ajax去加载html代码，用户明显就会感觉到半天窗口还没弹出来，就会连续的点击，这种用户体验肯定是失败的。

　　我们想要的延迟加载是先加载html代码，但不加载html代码使用的图片。但用户点击"加号"的时候，直接弹出窗口并加载图片，这样用户一点击就可以看到窗口。那如何实现这种功能了，于是我想到了html的注释。我们先把所有弹出窗口的html代码放进注释中(这样就不会加载图片)，当用户点击"加号"时，用js读取注释中的html插入到body中(不需要ajax)，然后弹出窗口。

　　比如有2个弹出窗口，代码大概如下(并不是完整代码，不能直接运行)：

<code>&lt;</code><code>script</code><code>&gt;</code>

<code>    </code><code>var loaded = new Object();  // 记录哪些html已经append到body中</code>

<code>   </code><code>/**</code>

<code>    </code><code>* 加载html，该html已经以注释的方式嵌入的html中，eg:</code>

<code>    </code><code>* &lt;</code><code>div</code> <code>id="fast_model_lazy"&gt;</code>

<code>    </code><code>* </code><code>&lt;!--[lazy]&gt;</code>

<code>    </code><code>*  sass</code>

<code>    </code><code>*  &lt;![endlazy]--&gt;</code>

<code>    </code><code>* &lt;/</code><code>div</code><code>&gt;</code>

<code>    </code><code>*/</code>

<code>   </code><code>function loadHtml(id){</code>

<code>       </code><code>// 已经加载过，不再加载</code>

<code>       </code><code>if(loaded[id])</code>

<code>           </code><code>return false;</code>

<code>       </code> 

<code>       </code><code>var html = $.trim(document.getElementById(id).innerHTML);</code>

<code>       </code><code>// 去掉注释开头(11位)和结尾(14位)</code>

<code>       </code><code>html = html.substring(11,html.length-14);</code>

<code>       </code><code>$(document.body).append($(html));</code>

<code>       </code><code>loaded[id]=1;</code>

<code>       </code><code>return true;</code>

<code>   </code><code>}</code>

<code>   </code><code>function click1(){</code>

<code>       </code><code>loadHtml("fast_model_lazy");</code>

<code>       </code><code>// 弹出窗口</code>

<code>       </code><code>$("#fast_model_lazy").showDialog();</code>

<code>   </code><code>function click2(){</code>

<code>       </code><code>loadHtml("fast_model2_lazy");</code>

<code>       </code><code>$("#fast_model2_lazy").showDialog();</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>button</code> <code>click="click1()"&gt;弹出第一窗口&lt;/</code><code>button</code><code>&gt;</code>

<code>&lt;</code><code>button</code> <code>click="click2()"&gt;弹出第二窗口&lt;/</code><code>button</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id="fast_model_lazy"&gt;</code>

<code>  </code><code>&lt;!--[lazy]&gt;</code>

<code>  </code><code>&lt;div id="fast_model" class="model"&gt;</code>

<code>       </code><code>....这里省略html</code>

<code>  </code><code>&lt;/div&gt;</code>

<code> </code><code>&lt;![endlazy]--&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;</code><code>div</code> <code>id="fast_model2_lazy"&gt;</code>

<code>  </code><code>&lt;div id="fast_model2" class="model"&gt;</code>

总结：

 这种延迟加载的方式，主要用于延迟图片的加载，css的应用，js的解析和执行等等，并不是为了延迟加载html。如果是大量的html代码，比如分页的数据，

使用这种方式就不太合适。个人觉的这种加载方式还可以在很多地方用的到的。

后语：

 今天就写这些，下次再写写对该页面的其他的一些优化。

本文转自BearRui(AK-47)博客园博客，原文链接：http://www.cnblogs.com/BearsTaR/archive/2010/07/14/Tally_Optimization.html    ，如需转载请自行联系原作者