[PPT模板]淘宝新首页开发实践方案网页设计新风向.ppt

新首页开发实践 云谦 朝阳最好的前列腺门诊 /nanke/qlxy/ 一、HTML规范 !doctype html DOCTYPE的作用 怪癖模式的开关(★) W3C校验 为什么选择这种写法 简单好记、长度短省流量 兼容性(IE的”预见性”) meta charset=“gbk” / meta http-equiv=Content-Type content=text/html; charset=gbk / meta charset=gbk / 区别？ mime-type决定权 embed css javascript link[rel=“stylesheet”]的type和media属性 script的type属性 默认值，没理由不省去 更多HTML规范，参见 /doku.php?id=f2e:html_guide ref /TR/html4/ /TR/html5/ http://hsivonen.iki.fi/doctype/  (/2009/06/14/activating-browser-modes-with-doctype/ ) /speed/articles/html5-performance.html  /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处废弃、安全、环保 流程： 找出所有CSS背景图全部抽取出来确定Sprite宽度随意编排 用占位标签组织Sprites 优点：性能、工作效率、成就感缺点：DOM数增加 用占位标签组织Sprites LOGO 融入 Sprites (?) 优点 减少一个HTTP请求 将CSS Sprite的请求排在最前面 缺点 不可复制 问题 IE渲染PNG的BUG Sprites的拆分(V1) 14K？太大了吧！！ Sprites的拆分(V2) Sprites的拆分(V3) (5.8K) (10.3K) Sprites的拆分 怎么拆？ 突击队（数据层，影响操作的展现层） 大部队（不影响操作的展现层） 没有完美的方案 ref /archives/sprite-me-helping-you-sprite-up-but-maybe-you-shouldnt /2009/06/22/to-sprite-or-not-to-sprite /search?hl=ensource=hpq=testaq=foq=aqi=g10 (背景图) 三、Data-uri 应用 渐变背景的实现 IE：Filter gecko：-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 #feedback-entry VS. #feedback-entry a #feedback-entry VS. #feedback-entry a ref /search;_ylt=A0oGk07HtkJLwHsBbZ.l87UF?p=testfr=sfpfr2=iscqry= (源码里搜new Image()) 五、延时加载/渲染/执行 延时加载 屏幕外的图片 延时渲染(textarea) 屏幕外的DOM结构 隐藏Tab的DOM结构 延时执行 P4P数据请求函数 六、其他细节 CSS的阴影 #4f999999 0%   - 00 5%   - 0d 10% - 1a 15% - 26 20% - 33 25% - 40 30% -