1. Javascript
css
html
从 零开始做首页

2. html结构
 level1： doc-文档结构和头尾
 level2： grid-布局
 level3：queue视觉上的组件队列
 level4：module-组件
 level5：u-最小单元

3. level1： doc-文档结构和头尾

4. level2： grid-布局

5. level3：queue视觉上的组件队列

6. level4：module-组件
根据结构和展示分离的原则，
不同的样式只要内容结构相同，
仍然应该使用相同的html代码。

7. level5：u-最小单元
根据页面的实际情况，总结归
纳出经常出现的页面展示方式，
用统一的class去处理。

8. css的部署

9. css结构

10. Javascript的组织

11. 引用两个js文件
顶部的js放一些
在页面加载完毕
前就有可能会用
到的方法。
绝大部份js都放
在页面底部，提
高页面渲染速度。

12. 延后加载的js（1）
闭包，让你的代码更加安全
请求管理器

13. 延后加载的js（2）
建立一个数组对象
把需要在页面加载
完毕后执行方法以
及所有绑定事件全
部包含进来（数组
而非对象的目的在
于执行循环时对象
是无序的而数组是
有序的，同时在注
释中注意给每个方
法加上编号）

14. 延后加载的js（3）
比较保险的加载方式，一般情况下某个js出错不会
影响别的js的执行，同时还方便定位错误。

15. js的部署
source目录存放源文件
merge目录存放合并的引用文件

16. 最后的细节

17. 尽量少的loading……
在js还没有加载的时候显示
的是第一张图片，轮播效
果的js加载完毕后才开始切
换。避免页面加载初期的
loading……。

18. 不要想当然地“秀自己”
对mouseover和
mouseout等事件
进行必要的延时
（比如0.2秒）可
解决此类问题。

19. “按需索取”可以加快速度
比较靠下面的广告可以在拖动滚动条的时候
再加载，这样对于进页面就搜索的用户就会
少很多内容。
Suggestion 的js可以在点击了
输入框之后再加载，这样对
不进行搜索操作的用户就节
省了内容

20. 对不同的浏览器分别“喂食”
Firefox对YUI的动画类的效果支持不是很好，所以在firefox下取消
了顶部topbanner的滚动效果，直接展示。而对于ie用户则保留了
减速下滑的动态过程。

21. 数据源尽量地分离
利用json对象存储数
据源便于其他页面对
于数据的调用。

22. 合并图片也要看大小
太大的背景图片会阻塞网页
的加载，所以把首屏需要的
背景图合成一张先展示。剩
下的背景图视复用情况进行
必要的拆分，还可以为其他
页面起到预加载作用。

23. 考虑到极端情况
当页面的css或者
图片无法载入的
时候仍然具有清
晰的结构和一定
的可用性。

24. 还有……

25. Thanks
阿里巴巴中文站UED前端架构组 姚升亮