淘宝新首页开发实践方案.pptxVIP

新首页开发实践;一、HTML规范;!doctype html;meta charset=“gbk” /;embed css javascript;ref;二、Sprites;淘宝首页 Sprites;新浪首页 Sprites;“The biggest problem with CSS 　　　　sprites is memory usage.”;我们的目标是：减少空白;用占位标签组织SpritesS : 39处B : 42处废弃、安全、环保;流程： 找出所有CSS背景图全部抽取出来确定Sprite宽度随意编排;优点：性能、工作效率、成就感缺点：DOM数增加;LOGO 融入 Sprites (?);Sprites的拆分(V1);14K？太大了吧！！;Sprites的拆分(V2);Sprites的拆分(V3);Sprites的拆分;ref;三、Data-uri 应用;渐变背景的实现;短期功能的背景图;ref;最先加载 Sprites;最先加载 Sprites;#feedback-entry VS. #feedback-entry a;#feedback-entry VS. #feedback-entry a;#feedback-entry VS. #feedback-entry a;ref;五、延时加载/渲染/执行;延时加载 屏幕外的图片 延时渲染(textarea) 屏幕外的DOM结构 隐藏Tab的DOM结构 延时执行 P4P数据请求函数;六、其他细节;CSS的阴影;CSS的图片旋转;异步获取数据的容灾处理;纠正：数据图片大小并不影响页面初始载入速度和Yslow评分;ref