淘宝新首页开发实践方案网页设计新风向ppt课件

1、新首页开发实际云谦朝阳最好的前列腺门诊jdyy999/nanke/qlxy/一、HTML规范 DOCTYPE的作用 怪癖方式的开关() W3C校验 为什么选择这种写法 简单好记、长度短省流量 兼容性(IE的预见性)区别？mime-type决议权embed css & javascriptlinkrel=“stylesheet的type和media属性script的type属性默许值，没理由不省去 更多HTML规范，参见 /TR/html4/ /TR/html5/ hsivonen.iki.fi/doctype/ (dancewithnet/2021/06/14/

2、activating-browser-modes-with-doctype/ ) code.google/speed/articles/html5-performance.html /blog/68/understanding-html-xml-and-xhtml/二、Sprites淘宝首页 Sprites新浪首页 Sprites“The biggest problem with CSS “The biggest problem with CSS sprites is memory usage.sprites is memory usage. vladimir，a lead

3、er in the Mozilla communitywthitv/1299 * 1500026K75MB+w*h*(3-4)我们的目的是：减少空白用占位标签组织SpritesS : 39处B : 42处废弃、平安、环保流程： 找出一切CSS背景图全部抽取出来确定Sprite宽度随意编排用占位标签组织Sprites优点：性能、任务效率、成就感缺陷：DOM数添加用占位标签组织SpritesLOGO 融入 Sprites (?) 优点 减少一个HTTP恳求 将CSS Sprite的恳求排在最前面 缺陷 不可复制 问题 IE渲染PNG的BUGSprites的拆分(V1)14K？太大了吧！Sprite

4、s的拆分(V2)Sprites的拆分(V3)(5.8K)(10.3K)Sprites的拆分 怎样拆？ 突击队数据层，影响操作的展现层 大部队不影响操作的展现层 没有完美的方案ref ajaxian/archives/sprite-me-helping-you-sprite-up-but-maybe-you-shouldnt blog.vlad1/2021/06/22/to-sprite-or-not-to-sprite google/search?hl=en&source=hp&q=test&aq=f&oq=&aqi=g10 (背景图)三、Data-ur

5、i 运用渐变背景的实现渐变背景的实现IE：Filtergecko：-moz-linear-gradient (firefox 3.6(1.9.2)Webkit：-webkit-gradient (safari 4.0(528)Opera? Webkit和Gecko的起始支持版本较高短期功能的背景图短期功能的背景图Sprites 缓存、图片变卦能够性小ref search.yahoo (搜索按钮)四、HTTP恳求队列的控制最先加载 Sprites最先加载 Sprites 处理方案：优先发送Sprites图片恳求 new Image().src = “; (位置?) #feedback-entry

6、 VS. #feedback-entry a需求：需求：默许隐藏，默许隐藏，domreadydomready时判别窗口尺寸决议能否时判别窗口尺寸决议能否显示显示构造：构造：div id=“feedback新首页反响新首页反响#feedback-entry VS. #feedback-entry a#feedback-entry VS. #feedback-entry aref search.yahoo/search;_ylt=A0oGk07HtkJLwHsBbZ.l87UF?p=test&fr=sfp&fr2=&iscqry= (源码里搜new Image()五、延时加

7、载/渲染/执行 延时加载 屏幕外的图片 延时渲染(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不支持非图片元素异步获取数据的容灾处置 我的淘宝数