你正在浏览的是 代码浅谈 分类

一知半解 – 分析淘宝商城首页的 lazy load 功能

日期 : 2010年6月30日 12:35 pm 标签 : - - - 评论 : 22 feet 日历 : 30 Jun 2010

最近趁部门搬至淘宝办公。
研究了一下之前就开始注意的 :商城首页 的lazy load 实现(也可以说是:伪异步加载)。
首先解释一下商城 的 lazy load 是怎么一回事。
我们打开商城后发现,当你拖动滚动条往下,第二屏以下的东西才慢慢加载出来。
这样做能在初次打开的时候http 请求将大幅度减少,并且页面加载速度也提高不少。

上面说的 伪异步加载 是咋一看的推测,感觉像是滚动到那里的时候 整一个ajax请求,将下面内容加载进来。
后来在不经意之间看了下源代码发现的。
看下面是商城的源码截图。

从图中可以看出,源码中有很多 textarea 的标签,里面的值就是即将要加载的html,然后就恍然大悟,原来所谓异步加载也可以这样来实现。

分析实现流程

首先是将要加载的html代码 丢进textarea 里,因为此时html 在 textarea 是一直val形式,不会被浏览器解析渲染,所以页面在刚加载的时候只显示第一屏。然后通过计算滚动条的相对偏移(数学问题),将textarea的val 值添加到html 的dom里 ,因为浏览器是即时解析的,新添加的dom 会被重新渲染,这样新加的html 就显示出来了。这个就是所谓的lazy load :伪异步加载。 阅读全部>>

Coding 的那些银荡事 – Notepad++插件WebEdit使用心得

日期 : 2010年5月30日 22:57 pm 标签 : - - 评论 : 4 feet 日历 : 30 May 2010

从淘宝透露出的那些设计细节

日期 : 2010年5月22日 22:33 pm 标签 : - - - 评论 : 4 feet 日历 : 22 May 2010

系统级应用项目中的函数命名冲突问题

日期 : 2010年5月3日 10:54 am 标签 : - - 评论 : 6 feet 日历 : 3 May 2010

伸缩自如 – 绝对定位的自适应能力

日期 : 2010年5月1日 22:30 pm 标签 : - - 评论 : 7 feet 日历 : 1 May 2010
Page 3 of 812345...Last »