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

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

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

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

分析实现流程

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

为什么要用textarea ?

其实这个东西估计是 因为html 标签的限制，这个方法的设计之初，设计师想将 硕大的html数据 缓存在一个不会被解析标签里，然后就发现textarea 刚好符合期望。

为什么不用ajax ?

因为数据不需要验证，不是时变性的数据，再者使用ajax 会增加http请求，并且维护性不好。
目前淘宝的 TMS 后台系统 都是模版化引擎，使用ajax 会对 模版化 引擎 产生冲突 以及 维护成本高等。

如何实现？

从实现流程来讲，这个功能实现起来没什么难度，唯一有难度的是，怎样把这个功能做成一个通用的模块，简易添加 class 以及配置就可以实现等来提高重用特性。

有合弊端

优点那么多，缺点又怎样呢·？
SEO：存在textarea 里的数据 能不能被 搜索引擎抓取呢？ 这个我最近在自己blog里研究一下。
web标准： 这样的做符合web标准么？将html代码放在textarea来实现 飞鱼：只是一个标准而已。

好了 打完收工~~~