飞鱼 ^_^ 浆抱罗斯‘s blog
30 Jun 2010
一知半解 – 分析淘宝商城首页的 lazy load 功能
2010年6月30日 12:35 pm - 代码浅谈 - 生活琐碎 - javascript - 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来实现 飞鱼：只是一个标准而已。
好了 打完收工~~~
===============2011年4月29日= 更新===================
SEO 的影响
我尝试着在项目中的list 页面中使用了这样的textarea 形式加载方法：(以下搜索引擎主要以google引擎来分析， 度娘V5 玩不起)
发现 seo 是能抓到 textrea 中的内容的，
1. 研究有发现 textarea 里的内容会被google搜索引擎当作大段内容形式来表现(google 会以为textarea 里的内容是‘正文’ 的错觉) ，如果是类似内容页，建议将textarea 部分放在内容部分之后，这样能让google 将真正的内容部分抓去当作正文。
2. textarea 里的html 代码也会因此暴露出来 通过查看抓取页面(site:xxx.com)会发现(搜索结果的表述里会有html 代码出现) 因为google 认为这是内容而不是代码。
3. 因为以value 形式存在于 textrea 里，于是这里面的链接 会被google直接跳过， 当然有好处有坏处，好处是 google 可以快速得跳过这些链接 加快网页抓取，坏处是 会错过这些 链接(只要做好sitemap 就能避免这样的问题)
以上： 如果有 好的idea 欢迎交流·· ^__^ 俺们都是菜菜鸟
您可能还对这些日志感兴趣
最新在啃
该文章已经被摸了2,725次。 共有 22 条评论
这个技术小马给我们培训的时候提到过一点，飞鱼真是好学的娃。：）
回复
飞鱼 Reply:
June 30th, 2010 at 16:02
哈~ 最近 刚好有时间 就抓紧研究··· 希望在下次项目中应用到~
回复
我要抓紧学习～～很希望能跟你们站到一个高度
回复
今天也发现一个站有这种效果,但个人感觉会影响体验,尤其是对于无线或者小水管.
就好像是youku推出的那个分段载入功能一样,不能跳跃快进的感觉很烦…
不过还是挺适合图片站的~~ PS:taobao的家伙们都是妖孽么,没事天天鼓捣新东西玩~
回复
飞鱼 Reply:
July 1st, 2010 at 14:57
哈~~~ 有利有弊。看用在什么场合。
他们有个核心研发部的，任务就是捣腾，重构，优化。 =，=
回复
居然是这样!我原来也一直以为是ajax..没有太深入去看..
回复
飞鱼 Reply:
July 3rd, 2010 at 21:06
嗯，多研究研究，哦 hehe ~~~·
回复
Wang Hedger ： 會escape HTML, 把HTML存在… 裡面會更好.
回复
飞鱼 Reply:
July 3rd, 2010 at 21:07
纳尼~？~~ 没看懂 ~~
回复
康康 Reply:
March 30th, 2011 at 17:38
他的意思应该是用encodeURIcomponent把HTML编码为二进制数据，用的时候在decode回来。
回复
飞鱼 Reply:
March 30th, 2011 at 20:50
嗯 这个方法 可取，不过针对 自定义模版化 语言，这样做维护性不好。^__^
回复
这个根本不用分析，去翻下KISSY的文档(源码中的注释)就有了。而且不仅仅这么一种lazy load。看了很多种方式，主要有自动档和手动档两种。这种是手动档里的一种。
YUI有，jQuery插件也有，再加上KISSY这种。
LZ好学的精神还是值得学习的～
回复
飞鱼 Reply:
July 6th, 2010 at 21:04
额 好吧·~~ 我土了点~~ 比较喜欢探索~~ 嘿嘿~ KISSY 还不成熟，远处观望中~~~
回复
葉子 Reply:
July 15th, 2010 at 9:39
我是更土的人，告诉我吧
回复
设计理念有变化，记得以前都讲求预加载。
回复
这些真的太深奥…..
回复
hoho~ 好吧 我错了 ·· 下词写些湿点的。·· ╭(￣m￣*)╮
回复
lz，对seo有影响么？最近遇到了，也是在困惑这个点。
回复
飞鱼 Reply:
April 29th, 2011 at 11:33
哈~ 看到 有人困惑 我顺便 更新一下·。 分享一下之后实践的一些结果。
但只是将问题暴露出来，目前还没有 想到 完美的办法。
回复
[...] 详情请看这里http://qilei.org/201006/lazy-load-about-mall-of-taobao-index-page/ 这样当用户触发某事件才渲染相应内容，从而提高页面渲染效率 [...]
求教程呀。我的站图片太多，有些受不了。
回复
飞鱼 Reply:
November 8th, 2011 at 19:56
如果是 自己的blog 网上有好多 jquery lazyload 插件呢~ 呵呵比较好用的。可以看下我的评论头像，就是jquery 插件实现的。 自己动手丰衣足食哇~ ^__^
回复
发表评论