More Related Content
Similar to 2011淘宝首页开发实践 (20)
2011淘宝首页开发实践
- 10. 小结:
• 约定词汇表
• 基于 SSI 和 combo 的本地开发环境
• 打包脚本
目的:减少冲突
- 15. 290
990 栅格
30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
- 16. 300
1000px “栅格”?
C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数)
n∈[15,40],C∈Z 无解
- 22. IE 9
Chrome 4+
Safari 4+
Firefox 3.6+
Opera 10+
- 23. 让ie6/7/8 支持 HTML5 标签
<html>
<head>
<style>
figure { color:orange; }
</style>
<script>document.createElement("figure");</script>
</head>
<body>
<figure>
淘宝网!
</figure>
</body>
</html>
- 27. <!--[if lte IE 8]> <noscript>
<style>
.html5-wrappers {display:none !important;}
</style>
<div class="ie-noscript-warning">
您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!
或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript> <![endif]-->
- 37. 传统优化策略依然适用
• 内容的延时加载
• Dom节点的延时渲染
• 函数的延时执行
• 将 sprites 载入提前
• 缓存、combo…
- 39. 客户端 CPU 损耗对 FirstRendering 的影响
2010c (旧)版首页 CPU 消耗
2011a (新)版首页 CPU 消耗
- 44. /* except for ie 6/7/8 */
.J_slide li {
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
height:20px;
}
圆角的实现
- 45. /* 圆角 for ie6,7,8 use vml */
var css = document.createStyleSheet();
css.addRule("v:roundrect", "behavior:
url(#default#VML);display:inline-block;");
var rect = document.createElement('v:roundrect');
setAttribute(rect, {
arcsize:"20px",
stroked:false
});
rect.css({
width:"20px",height:"20px", antialias:true
});
IE 6/7/8使用js实现圆角
- 51. 拔赤
bachi@taobao.com
http://jayli.github.com