资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2010-1-5,#,新首页开发实践,云谦,一、,HTML,规范,DOCTYPE,的作用,怪癖模,式,式的开,关,关,(,),W3C,校验,为什么,选,选择这,种,种写法,简单好,记,记、长,度,度短省,流,流量,兼容性,(IE,的,”,预见性,”),embedcss&javascript,linkrel=,“,“stylesheet”,的,type,和,media,属性,script,的,type,属性,默认值,，,，没理,由,由不省,去,去,ref,二、,Sprites,淘宝首,页,页,Sprites,新浪首,页,页,Sprites,“,Thebiggestproblem withCSSsprites is memoryusage.,”,vladimir，a leaderintheMozillacommunity,我们的,目,目标是,：,：减少,空,空白,用占位,标,标签组,织,织,Sprites,S:39,处,B:42,处废弃、,安,安全、,环,环保,流程：,找出所,有,有,CSS,背景图全部抽,取,取出来确定,Sprite,宽度随意编,排,排,用占位,标,标签组,织,织,Sprites,优点：,性,性能、,工,工作效,率,率、成,就,就感缺点：,DOM,数增加,用占位,标,标签组,织,织,Sprites,LOGO,融入,Sprites(?),Sprites,的拆分,(V1),14K,？太大,了,了吧！,！,！,Sprites,的拆分,(V2),Sprites,的拆分,(V3),(5.8K),(10.3K),Sprites,的拆分,怎么拆,？,？,突击队,（,（数据,层,层，影,响,响操作,的,的展现,层,层）,大部队,（,（不影,响,响操作,的,的展现,层,层）,没有完,美,美的方,案,案,ref,三、,Data-uri,应用,渐变背,景,景的实,现,现,IE,：,Filter,gecko,：,-moz-linear-gradient(firefox3.6(1.9.2),Webkit,：,-webkit-gradient(safari4.0(528),Opera?,Webkit,和,Gecko,的起始,支,支持版,本,本较高,短期功,能,能的背,景,景图,Sprites,缓存、,图,图片变,更,更可能,性,性小,ref,最先加,载,载,Sprites,最先加,载,载,Sprites,解决方,案,案：优,先,先发送,Sprites,图片请,求,求,newImage().src=,“,“”;(,位置,?),#feedback-entryVS.#feedback-entrya,需求：,默认隐,藏,藏，,domready,时判断,窗,窗口尺,寸,寸决定,是,是否显,示,示,结构：,新首页,反,反馈,#feedback-entryVS.#feedback-entrya,#feedback-entryVS.#feedback-entrya,ref,五,、延时,加,加载,/,渲染,/,执行,延时加,载,载,屏幕外,的,的图片,延时渲,染,染,(textarea),屏幕外的,DOM,结构,隐藏,Tab,的,DOM,结构,延时执,行,行,P4P,数据请,求,求函数,六、其,他,他细节,CSS,的阴影,#4f999999,0%-00,5%-0d,10%-1a,15%-26,20%-33,25%-40,30%-4d,35%-59,40%-66,45%-73,50%-80,55%-8c,60%-99,65%-a6,70%-b3,75%-bf,80%-cc,85%-d9,90%-e5,95%-f2,100%-ff,CSS,的图片,旋,旋转,注意：,IE6,下,BasicImage,不支持,非,非图片,元,元素,异步获,取,取数据,的,的容灾,处,处理,我的淘,宝,宝数据,广告数,据,据,纠正：,数,数据图,片,片大小,并,并不影,响,响页面,初,初始载,入,入速度,和,和,Yslow,评分,ref,
展开阅读全文