关于网站减肥(网站板块异步加载技术)
2004-12-06 13:38
399 查看
现在用户体验变得越来越重要,对于一个网站肯定要有非常丰富的内容,那么如何更快更好的将所有栏目呈现给用户呢?我觉得异步加载技术是其中一个解决方案。
比如:用户浏览一个页面时,要下载的内容是html的代码,js的代码,css的代码,图片,Flash。而这些只能线性的下载,也就是说,这些内容如果加起来有500kb,那么用户就要顺序下载这500kb的内容,当然,IE或FireFox有自己的读取方式,仔细观察会发现,他们会预先呈现一部分内容,但仍然是线性的方式,只是读一部分呈现一部分而已。如何更快的将内容呈现给用户,减少用户的等待感。
首先界面先按布局的方式划分区域,比如
<div id=“menu”></div>
<div id=“title”></div>
<div id=“context”></div>
<div id=“copyright”></div>
那么用户进入界面时,读取的html只有以上大小而已,而具体的内容我们通过xmlhttp来进行异步加载,JS伪码如下:
<script>
async('menu/index.htm','menu');
async('title/index.htm','menu');
async('context/index.htm','menu');
async('copyright/index.htm','menu');
</script>
每一个界面都是以异步的方式同时读取,这样等于同时读取多个栏目的内容,会使用户拥有更好的用户体验。
具体的封装以及读取方法,我在进行整理。
网站的例子:http://www.plaxo.com 等等
比如:用户浏览一个页面时,要下载的内容是html的代码,js的代码,css的代码,图片,Flash。而这些只能线性的下载,也就是说,这些内容如果加起来有500kb,那么用户就要顺序下载这500kb的内容,当然,IE或FireFox有自己的读取方式,仔细观察会发现,他们会预先呈现一部分内容,但仍然是线性的方式,只是读一部分呈现一部分而已。如何更快的将内容呈现给用户,减少用户的等待感。
首先界面先按布局的方式划分区域,比如
<div id=“menu”></div>
<div id=“title”></div>
<div id=“context”></div>
<div id=“copyright”></div>
那么用户进入界面时,读取的html只有以上大小而已,而具体的内容我们通过xmlhttp来进行异步加载,JS伪码如下:
<script>
async('menu/index.htm','menu');
async('title/index.htm','menu');
async('context/index.htm','menu');
async('copyright/index.htm','menu');
</script>
每一个界面都是以异步的方式同时读取,这样等于同时读取多个栏目的内容,会使用户拥有更好的用户体验。
具体的封装以及读取方法,我在进行整理。
网站的例子:http://www.plaxo.com 等等
相关文章推荐
- 新的网站的开放
- 新的网站的开放
- .NET 数据访问架构指南(转)
- 关于可扩展的web架构设计的探索-框架结构的描述文件
- 一些有用的VC的网站 zz
- Java精品网站
- 探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)(3)
- Java开发者必去的20个英文技术网站
- 比较酷的网站
- 探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)(2)
- 探究客户端浏览器分辨率的自适应问题(如何使网站脚本自动适应客户端分辨率)(1)
- 分布式应用架构中的数据传输对象(DTO)
- JavaWebStudio开发文档网站及开发论坛
- [转载]大学生创业:一个硬件网站站长自述创业经历
- 网站站内搜索的重要性
- [转载]PHP网站漏洞的相关总结
- 完成了一次子网站向顶级网站的迁移
- 盖茨瞄准博客族 MSN网站将推出免费博客服务
- SPS的网站利用率
- 盖茨瞄准博客族 MSN网站将推出免费博客服务