如果您无法下载资料,请参考说明:
1、部分资料下载需要金币,请确保您的账户上有足够的金币
2、已购买过的文档,再次下载不重复扣费
3、资料包下载后请先用软件解压,在使用对应软件打开
新首页开发实践云谦一、HTML规范55128.5d6d.net福彩3D3<!doctypehtml>•DOCTYPE的作用–怪癖模式的开关(★)–W3C校验•为什么选择这种写法–简单好记、长度短省流量–兼容性(IE的”预见性”)embedcss&javascriptlink[rel=“stylesheet”]的type和media属性script的type属性默认值,没理由不省去<metacharset=“gbk”/><metahttp-equiv="Content-Type"content="text/html;charset=gbk"/><metacharset="gbk"/>区别?mime-type决定权更多HTML规范,参见ref•http://www.w3.org/TR/html4/•http://www.w3.org/TR/html5/•http://hsivonen.iki.fi/doctype/(http://dancewithnet.com/2009/06/14/activating-browser-modes-with-doctype/)•http://code.google.com/speed/articles/html5-performance.html•http://webkit.org/blog/68/understanding-html-xml-and-xhtml/二、Sprites淘宝首页Sprites新浪首页Sprites““TheThebiggestbiggestproblemproblemwithwithCSSCSSspritesspritesisismemorymemoryusage.usage.””——vladimir,aleaderintheMozillacommunity1299*1500026K75MB+w*h*(3-4)我们的目标是:减少空白14用占位标签组织SpritesS:39处B:42处废弃、安全、环保用占位标签组织Sprites流程:找出所有CSS背景图全部抽取出来确定Sprite宽度随意编排用占位标签组织Sprites优点:性能、工作效率、成就感缺点:DOM数增加LOGO融入Sprites(?)•优点–减少一个HTTP请求–将CSSSprite的请求排在最前面•缺点–不可复制•问题–IE渲染PNG的BUGSprites的拆分(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缓存、图片变更可能性小30ref•(搜索按钮)四、HTTP请求队列的控制最先加载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数据请求函数六、其他细节#4f9999990%-005%-0d10%-1aCSS的阴影15%-2620%-3325%-4030%-4d35%-5940%-6645%-7350%-8055%-8c60%-9965%-a670%-b375%-bf80%-cc