posts - 36, comments - 419, trackbacks - 0, articles - 0
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

刚刚做完1个复杂页面的前端性能优化,这里的优化是针对这个页面具体的需求单独做的优化,所以这里不会谈那些减少http请求,合并压缩js,css,图片合并等等。因为这些是所有页面都需要做的,如果需要了解这些,可以参考我这篇文章:web高性能开发系列随笔

 

页面介绍:

该页面是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个弹出窗口,代码大概如下(并不是完整代码,不能直接运行):

 

  <script>
var loaded = new Object();  // 记录哪些html已经append到body中
/**
* 加载html,该html已经以注释的方式嵌入的html中,eg:
* <div id="fast_model_lazy">
* <!--[lazy]>
* sass
*  <![endlazy]-->
* </div>
*/
function loadHtml(id){
// 已经加载过,不再加载
if(loaded[id])
return false;
var html = $.trim(document.getElementById(id).innerHTML);
// 去掉注释开头(11位)和结尾(14位)
html = html.substring(11,html.length-14);
$(document.body).append($(html));
loaded[id]=1;
return true;
}
function click1(){
loadHtml("fast_model_lazy");
// 弹出窗口
$("#fast_model_lazy").showDialog();
}
function click2(){
loadHtml("fast_model2_lazy");
// 弹出窗口
$("#fast_model2_lazy").showDialog();
}
</script>
<button click="click1()">弹出第一窗口</button>
<button click="click2()">弹出第二窗口</button>
<div id="fast_model_lazy">
<!--[lazy]>
<div id="fast_model" class="model">
....这里省略html
</div>
<![endlazy]-->
</div>
<div id="fast_model2_lazy">
<!--[lazy]>
<div id="fast_model2" class="model">
....这里省略html
</div>
<![endlazy]-->
</div>

 

总结:

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

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

 

后语:

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



[作者]:BearRui(AK-47)
[博客]: http://www.blogjava.net/bearrui/
[声明]:本博所有文章版权归作者所有(除特殊说明以外),转载请注明出处.
英雄,别走啊,帮哥评论下:  

精彩推荐 好文要顶 水平一般 看不懂 还需努力

评论

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-14 10:30 by BearRui(AK-47)
我晕,干嘛了

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-14 12:31 by stone2083
@BearRui(AK-47)
Sorry,Sorry.
你底下的几个button做的不错,发觉挺有意思的,就多点了几下.没想到居然是发评论用的. :)

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-14 12:34 by BearRui(AK-47)
呵呵,没事,^_^

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-15 17:00 by panasia
好文章,顶一下!这个思路太帅了!不过有个问题,页面代码也会增加不少吧。如果JS代码较多。全写在页面上..会不会加载速度也会有影响呢?

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-15 17:12 by BearRui(AK-47)
@panasia
页面代码跟原来的相比,应该大不了多少,就多了几行注释。而JS代码可以写成公用的函数,多的代码行数绝对在100行之内。

PS:谢谢兄弟常来捧场,以后可以去看我在博客园的博客,博客园人气好点,而且后台编辑比blogjava要好很多,我一般在博客园先更新,有些文章可能还没在Blogjava上发,^_^

http://www.cnblogs.com/bearstar/

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-18 17:25 by panasia
好的。。我直接订阅了。。你的文章都很有技术含量。所以看你有更新我就会过来看看。

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-18 19:03 by BearRui(AK-47)
@panasia

谢谢

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-29 14:01 by 风骚的小野猪
好文章,顶一下!

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2010-07-29 14:36 by BearRui(AK-47)
@风骚的小野猪

谢谢支持。

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载[未登录]  回复  更多评论   

2011-02-23 21:53 by sodarfish

牛啊~~
发现跟facebook的pagelet 还挺像的
只不过他们是用js加载html字符串,楼主是加载注释里的html

# re: 记一复杂页面的前端优化(1) - 不一样的延迟加载  回复  更多评论   

2012-02-28 02:00 by swind
用textarea 做这个会不会更好些呢

只有注册用户登录后才能发表评论。


网站导航: