More Related Content
Similar to 2011homepage (20)
2011homepage
- 2. 分享的目的
• 了解中文站首页的前端开发流程和规范
• 积累的经验得以传承
11年8月19日星期五
- 4. • html－html5（标签）
• css－css3
• js－fdev4
• 模块化管理总结
• 新版首页相对上⼀一版的改进点
• 性能数据
11年8月19日星期五
- 5. html
• html4 －> html5
• ie9以下的处理
• noscript
• “第⼀一次”
11年8月19日星期五
- 8. < ie9
• html5shiv；
• document.createElement(”article”);
• 线上的处理是所有ie载入html5shiv；
11年8月19日星期五
- 9. < ie9
• html5shiv；
• document.createElement(”article”);
• 线上的处理是所有ie载入html5shiv；
looks great, but...
11年8月19日星期五
- 13. innerHTML
append
...
为什么不用<figure>、<figcaption>？
11年8月19日星期五
- 14. solution
• innerShiv
rel: http://code.google.com/p/html5shiv/
http://jdbartlett.com/innershiv/
11年8月19日星期五
- 15. 结构的定义
•模块命名以 “mod-” 开头；
•元件 “cell-”为统⼀一定义，自己不得添加；
•每个模块必须有class为“content”的section，header则非必须；
•内容结构复杂的，适当使用“region-”和“obj-”;
•id以“hp-”开头（页面风格的统⼀一）；
rel: http://op.fangdeng.org/pitaya/
http://op.fangdeng.org/pages/html5.tag.usage.html
11年8月19日星期五
- 16. 文档流的变化
以往的定义：
• 描述大纲的唯⼀一方式是<h1>~<h6>
• 添加⼀一个副标题会破坏原先的文档流
http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fchina.alibaba.com
11年8月19日星期五
- 17. 文档流的变化－续
html5的定义：
• <h1>~<h6>方式同以往，h1不唯⼀一，下面第二点的元素内都可各自包含h1；
• 有些标签也具有了定义大纲的功能，大致分为三类：
1. 无意义：类似<div>，<ul>等元素；
2. 产生新的节：类似<article>，<section>，<nav>，<aside>等；
3. 成节的根：某些元素（<blockquote>、<body>、<details>、<fieldset>、
<figure>、<td>）叫做成节的根，并且它们可以拥有自己的大纲。但是，这些元素
中的节和标题对于它们的祖先的大纲没有任何影响。
http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fpage.china.alibaba.com%2Findex_new.html
rel:http://www.osmn00.com/rebuild/223.html
11年8月19日星期五
- 18. ⼀一些小点
• 预加载背景图；
• logo改成<img>；
• <a tabindex="0" target="_self" href="#content" id="skip-to-content">跳到内容区</a>；
• ie9 pintab
• ARIA attributes:
<input id="alisearch-input" name="keywords" placeholder="输入产品名称" autocomplete="off"
accesskey="s" class="ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria-
haspopup="true">
11年8月19日星期五
- 22. css
• 文件按mod分，⼀一个mod⼀一个单独的css；
• 基于fdev4-float，pitaya4；
• 禁止使用无意义的标签实现样式上的展
示；
rel: http://op.fangdeng.org/pitaya/
11年8月19日星期五
- 23. 样式书写规则
1、显示与定位
display
position
float
list-style
2、元素自身
width
height
margin
padding
border
background
3、文本外观
color
font
line-height
text-align
text-decoration
other
11年8月19日星期五
- 24. css3
• 部分圆角，hover效果使用简单的动画；
• 90％＋的用户看不到 :（ 只能小规模尝试；
• rel: http://fd.aliued.cn/fdevlib/#home css3部分
MSIE6
45.81%
MSIE6 MSIE8 MSIE7
Sougou MSIE9 Tt MSIE8
Chrome Firefox Theworld 37.19%
Maxthon Se360 Other
Safari Opera 0.07%
0.09%
0.18%
0.82%
0.83%
0.93%
0.94%
1.14% MSIE7
1.42%
Sougou
2.86%
3.79%
3.93%
11年8月19日星期五
- 25. js
• 文件按mod分，⼀一个mod⼀一个单独的js；
• 基于fdev4，HexJS；
• 懒加载；
• 大前提，首页是静态的；
11年8月19日星期五
- 26. HexJS
• 不是库
• 实现模块定义和管理
• 使用有两种方式：
1. hexjs.register(“module-xx”); // domready 后执行
2. hexjs.register(“~module-xx”); // 马上执行
rel: http://hexjs.edgarhoo.org/
11年8月19日星期五
- 27. 头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script>
35.7K
11年8月19日星期五
- 28. 头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script>
35.7K
目的？
11年8月19日星期五
- 29. 头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script>
35.7K
目的？
11年8月19日星期五
- 30. 头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script>
35.7K
目的？
11年8月19日星期五
- 31. 头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script>
35.7K
目的？
<script>FE.operation.pitaya.register( '~alibar-account' );</script>
<script>FE.operation.pitaya.register( '~hp-sign' );</script>
11年8月19日星期五
- 32. 头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script>
35.7K
目的？
<script>FE.operation.pitaya.register( '~alibar-account' );</script>
<script>FE.operation.pitaya.register( '~hp-sign' );</script>
性能 or 体验？
11年8月19日星期五
- 35. 模块化管理总结
• 什么是模块化？
1. 可组合、可分解
11年8月19日星期五
- 36. 模块化管理总结
• 什么是模块化？
1. 可组合、可分解
2. 易更换
11年8月19日星期五
- 37. 模块化管理总结－html
• 统⼀一的mod框架；
• 统⼀一的命名格式；
• cms中模块切割（也是便于运营维护的方式）；
11年8月19日星期五
- 38. 模块化管理总结－css
• common，grid使用库文件，不再单独创建；
• 基于独立的reset和pitaya4；
• 其他公用样式基于base.css；
• 以模块为单位建立独立的css；
• 样式书写风格统⼀一；
• 样式中如无特殊情况，以”.mod-xxx {}”开头；
• 背景图基于各自的css，不做统⼀一管理；
• 背景图分预加载（preLoad.png）和普通背景（bg.png）；
11年8月19日星期五
- 39. 模块化管理总结－js
• 基于fdev4，HexJS；
• 以模块为单位建立独立的js；
• merge文件分头尾两个；
• 模块的js统⼀一的书写风格，并按功能点define和register；
• 统⼀一的命名空间；
11年8月19日星期五
- 40. 新版首页的改进点
• html5标签 • 焦点图懒加载
• 结构风格统⼀一 • 更加合理的滚动加载
• 以mod为单位 • 预加载js库
• 更加合理的logo • css3
• 模块化的html，css，js管理 • 无障碍的尝试
• 预加载背景图 • noscript
• 更加合理的背景图sprites • ......
11年8月19日星期五
- 41. 我们还需努力的...
• 微数据－microdata • 全方位的数据监控
• 更加友好的noscript • 其他平台的扩展
• localStorage • ......
• application cache
• 更多合理的标签使用
• 更多合理的css3效果
• 多版本的管理
11年8月19日星期五
- 42. 性能数据
• 基调网络
• 哈勃
• KeepFast
各平台本身、网络差异，数据仅作对比和参考。
11年8月19日星期五
- 43. 基调网络
两个时间点：8月11日、8月17日，其中的变化，新版首页增加了10个请求。
8月11日
8月17日
11年8月19日星期五
- 44. KeepFast
Request
Time Bytes
s
11号 4.814s 43 370KB
17号 6.470s 53 361KB
11年8月19日星期五
- 46. 请求数对性能有着实质的影响
High Performance Web Sites
Rule 1: Make Fewer HTTP Requests
11年8月19日星期五
- 47. • 优化是持续的，不要等到用户抱怨才优化；
• ⼀一屏以下图片尽量懒加载；
• 首屏图片大小严格规定；
11年8月19日星期五
- 48. One More Thing
• 首页目前的环境是static；
• static的优点，快速响应；
• Try your ideas；
11年8月19日星期五
- 49. 感谢
冯汉军、洪珊珊、谢传贵、由雪伟、俞雨
11年8月19日星期五
