网站优化:按需加载数据

黄平俊 发布于 2010/10/14 08:39
阅读 693
收藏 3

这里的按需加载资源不只是CSS、JS文件,Image、swf、Content等都可以利用这种方式。特别是当前Yahoo的首页:http://www.yahoo.com,几乎页面的每一个模块都体现了按需加载的技巧:左边的导航(用户可以定制、点击异步请求更多资源)、中间的新闻、图片tab、右栏的第三方资源等等。

按需加载表面理解起来很简单,但是怎么个按需法呢?我所理解的按需,包括两个方面:一个是按用户的需要;另一个是网站本身的需要。按需加载主要解决 的问题 就是加快页面的初始化以及在页面初始化的时候最大化减少HTTP请求,因为有些模块比如:图片导航tab、多级菜单、内容导航等等,这些在初始化页面的时 候有很多内容都是处于隐藏状态,用户是看不到的,那么这些内容对不同的用户来说有不同的需求,那么这些就可以从页面的初始化中剥离出来,按用户的需求通过 异步通信来加载内容和资源。对于网站本身的需要来加载后续资源,比如Google首页对于结果页的一些js、image等资源的pre-fetch的方 式,通过分析用户可能会产生的行为,为后续的页面提前加载内容,加快后续页面的初始化速度,从缓存中读取页面所需要的资源。

接下来分析一下淘宝首页(http://www.taobao.com)的一些按需加载的技巧。首先对于中间栏的这个部分的实现:

看这个模块的源码之后发现,除了初始化第一个tab内容之后,后面隐藏的几个tab的资源是没有加载的,它是将这些资源的HTML设置到一个隐藏的 textarea控件的值里面,在点击了左右的导航按钮之后,就读出这个textarea的内容并解析到tab中,当然这也同时是加载图片等资源。我想, 这样做的一个好处就是上面说的按需加载,加快页面的初始化速度;还有另外一个作用是减少页面初始化的DOM节点数。将这个添加更多DOM节点推迟到按照用 户的需要去点击导航按钮。这个在加快页面的初始化方面也是很不错的技巧。

再来分析一下Yahoo首页的其中一个模块的实现方式,也是比较类似的:

如上图,在下部的导航中,初始化的时候会默认加载一个tab看到的导航的图片和问题,而其他隐藏的每一个导航tab,在页面初始化的时候HTML的 结构均 使用四个span标签代替,之后在点击左右导航按钮的时候,进行异步请求资源,并替换掉每一个相应的span标签。它在初始化页面的时候使用span标 签,只是为了保持一个高度上的“空架子”,在之后的按需请求中往这个架子中替换内容,这样其中的一个原因可能是为了不至于在替换标签的时候在高度上的过度 出现闪烁。

按需加载的思维在很多网站中都有体现,利用Ajax技术,异步请求内容,将隐藏的内容、资源的加载跟页面的初始化剥离开来,加快页面的初始化。

网秀推荐文章:http://www.wangshow.net/topic/post/GrGaL
加载中
0
胡瀚森

Textarea这一招真是不错呀,以前没想到过……

返回顶部
顶部