淘宝新首开发实践方案网设计新风向

新首页开发实践云谦一、HTML规范<!doctypehtml>DOCTYPE的作用怪癖模式的开关(★)W3C校验为什么选择这种写法简单好记、长度短省流量兼容性(IE的”预见性”)<metacharset=“gbk”/>embedcss&javascriptlink[rel=“stylesheet”]的type和media属性script的type属性默认值，没理由不省去ref二、Sprites淘宝首页Sprites新浪首首页Sprites“ThebiggestproblemwithCSSspritesismemoryusage.”——vladimir，aleaderintheMozillacommunity我们的的目标标是：：减少少空白白用占位位标签签组织织SpritesS:39处B:42处废弃、、安全全、环环保流程：：找出所所有CSS背景图图全部抽抽取出出来确定Sprite宽度随意编编排用占位位标签签组织织Sprites优点：：性能能、工工作效效率、、成就就感缺点：：DOM数增加加用占位位标签签组织织SpritesLOGO融入Sprites(?)Sprites的拆分分(V1)14K？太大大了吧吧！！！Sprites的拆分分(V2)Sprites的拆分分(V3)(5.8K)(10.3K)Sprites的拆分分怎么拆拆？突击队队（数数据层层，影影响操操作的的展现现层））大部队队（不不影响响操作作的展展现层层）没有完完美的的方案案ref三、Data-uri应用渐变背背景的的实现现IE：Filtergecko：-moz-linear-gradient(firefox3.6(1.9.2))Webkit：-webkit-gradient(safari4.0(528))Opera?Webkit和Gecko的起始始支持持版本本较高高短期功功能的的背景景图Sprites缓存、、图片片变更更可能能性小小ref最先加加载Sprites最先加加载Sprites解决方方案：：优先先发送送Sprites图片请请求newImage().src=““”;(位置?)<divid=““logo”><imgsrc=““”/></div>#feedback-entryVS.#feedback-entrya需求：：默认隐隐藏，，domready时判断断窗口口尺寸寸决定定是否否显示示结构：：<divid=“feedback””><a>新首页页反馈馈</a></div>#feedback-entryVS.#feedback-entrya#feedback-entryVS.#feedback-entryaref五、延时时加载载/渲染/执行延时加加载屏幕外外的图图片延时渲渲染(textarea)屏幕外的DOM结构隐藏Tab的DOM结构延时执执行P4P数据请请求函函数六、其其他细细节CSS的阴影影#4f9999990%-005%-0d10%-1a15%-2620%-3325%-4030%-4d35%-5940%-6645%-7350%-8055%-8c60%-9965%-a670%-b375%-bf80%-cc85%-d990%-e595%-f2100%-ffCSS的图片片旋转转注意：：IE6下BasicImage不支持持非图图片元元素异步获获取数数据的的容灾灾处理理我的淘淘宝数数据广