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

新首页开发实践/朝阳北苑最好的无痛人流医院北京京顺医院云谦一、HTML规范!doctype htmlDOCTYPE的作用怪癖模式的开关(★)W3C校验为什么选择这种写法简单好记、长度短省流量兼容性(IE的”预见性”)meta charset=“gbk” /meta http-equiv=Content-Type content=text/html; charset=gbk /meta charset=gbk /区别？mime-type决定权embed css javascriptlink[rel=“stylesheet”]的type和media属性script的type属性默认值，没理由不省去 更多HTML规范，参见 /doku.php?id=f2e:html_guide/doku.php?id=f2e:html_guideref/TR/html4/http/TR/html4/:///TR/html4//TR/html5//TR/html5/TR/html5//http://hsivonen.iki.fi/doctype/http://hsivonen.iki.fi/doctype/? (/2009/06/14/activating-browser-modes-with-doctype/http/2009/06/14/activating-browser-modes-with-doctype/:///2009/06/14/activating-browser-modes-with-doctype/?)/speed/articles/html5-performance.html/speed/articles/html5-performance.html?/blog/68/understanding-html-xml-and-xhtml//blog/68/understanding-html-xml-and-xhtml/二、Sprites淘宝首页 Sprites新浪首页 Sprites“The biggest problem with CSS　sprites is memory usage.”—— vladimir，a leader in the Mozilla community//1299 * 1500026K75MB+w*h*(3-4)我们的目标是：减少空白用占位标签组织SpritesS : 39处B : 42处废弃、安全、环保用占位标签组织Sprites流程： 找出所有CSS背景图全部抽取出来确定Sprite宽度随意编排用占位标签组织Sprites优点：性能、工作效率、成就感缺点：DOM数增加LOGO 融入 Sprites (?)优点减少一个HTTP请求将CSS Sprite的请求排在最前面缺点不可复制问题IE渲染PNG的BUGSprites的拆分(V1)14K？太大了吧！！Sprites的拆分(V2)Sprites的拆分(V3)(5.8K)(10.3K)Sprites的拆分怎么拆？突击队（数据层，影响操作的展现层）大部队（不影响操作的展现层）没有完美的方案ref/archives/sprite-me-helping-you-sprite-up-but-maybe-you-shouldnt/archives/sprite-me-helping-you-sprite-up-but-maybe-you-shouldnt/2009/06/22/to-sprite-or-not-to-sprite/2009/06/22/to-sprite-or-not-to-sprite/search?hl=ensource=hpq=testaq=foq=aqi=g10/search?hl=ensource=hpq=testaq=foq=aqi=g10 (背景图)三、Data-uri 应用渐变背景的实现IE：Filtergecko：-moz-linear-gradient (firefox 3.6(1.9.2))Webkit：-webkit-gradient (safari 4.0(528))Opera? Webkit和Gecko的起始支持版本较高短期功能的背景图Sprites 缓存、图片变更可能性小ref/ (搜索按钮)四、HTTP请求队列的控制最先加载 Sprites最先加载 Sprites解决方案：优先发送Sprites图片请求new Image().src = “”; (位置?)div id=“logo”img src=“” //div#feedback-entry VS. #feedback-entry a需求：默认隐藏，domready时判断窗口尺寸决定是否显示结构：div id=“feedback”a新首页反馈/a/div