摘要：的新特性文件類(lèi)型聲明僅有一型。新的技術(shù)新的屬性用于與用于用于。

文件類(lèi)型聲明（）僅有一型：。
新的解析順序：不再基于SGML。
繪畫(huà) canvas;
用于媒介回放的 video 和 audio 元素;
語(yǔ)意化更好的內(nèi)容元素:article、footer、header、nav、section;
表單控件:calendar、date、time、email、url、search;
input元素的新類(lèi)型：date, email, url等。
新的技術(shù): webworker, websocket, Geolocation;
新的屬性：ping（用于a與area）, charset（用于meta）, async（用于script）。
全域?qū)傩裕篿d, tabindex, repeat。
新的全域?qū)傩裕篶ontenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
新應(yīng)用程序接口:
HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE
HTML Canvas/WebGL
HTML Audio/Video
移除的元素：
純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u;
對(duì)可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，naframes；

retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點(diǎn)由1個(gè)變?yōu)槎鄠€(gè)，如在同樣帶下的屏幕上，蘋(píng)果設(shè)備的retina顯示屏中，像素點(diǎn)1個(gè)變?yōu)?個(gè)
?
在高清顯示屏中的位圖被放大，圖片會(huì)變得模糊，因此移動(dòng)端的視覺(jué)稿通常會(huì)設(shè)計(jì)為傳統(tǒng)PC的2倍
那么，前端的應(yīng)對(duì)方案是：
設(shè)計(jì)稿切出來(lái)的圖片長(zhǎng)寬保證為偶數(shù)，并使用backgroud-size把圖片縮小為原來(lái)的1/2
//例如圖片寬高為：200px*200px，那么寫(xiě)法如下

.css{width:100px;height:100px;background-size:100px 100px;}

?
其它元素的取值為原來(lái)的1/2，例如視覺(jué)稿40px的字體，使用樣式的寫(xiě)法為20px

.css{font-size:20px}

ios用戶(hù)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)半透明灰色遮罩, 如果想要禁用，可設(shè)置-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最后一位設(shè)置為0.X就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0.X)}

android用戶(hù)點(diǎn)擊一個(gè)鏈接，會(huì)出現(xiàn)一個(gè)邊框或者半透明灰色遮罩, 不同生產(chǎn)商定義出來(lái)額效果不一樣，可設(shè)置-webkit-tap-highlight-color的alpha值為0去除部分機(jī)器自帶的效果
?
???????????

 a,button,input,textarea{ 
??????????????    -webkit-tap-highlight-color: rgba(0,0,0,0;) 
??????????????????-webkit-user-modify:read-write-plaintext-only; 
??????????? } 

??????????? -webkit-user-modify有個(gè)副作用，就是輸入法不再能夠輸入多個(gè)字符
??????????? 另外，有些機(jī)型去除不了，如小米2
??????????? 對(duì)于按鈕類(lèi)還有個(gè)辦法，不使用a或者input標(biāo)簽，直接用div標(biāo)簽

通用

.css{-webkit-appearance:none;}

偽元素改變number類(lèi)型input框的默認(rèn)樣式

input[type=number]::-webkit-textfield-decoration-container { 
??? background-color: transparent;??? 
} 
input[type=number]::-webkit-inner-spin-button { 
??? -webkit-appearance: none; 
} ???????????????????? 
input[type=number]::-webkit-outer-spin-button { 
????-webkit-appearance: none; 
}

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

.css{-webkit-touch-callout: none}

?

.css{-webkit-user-select:none}

打電話(huà)：打電話(huà)給:0755-10086
發(fā)短信，winphone系統(tǒng)無(wú)效?發(fā)短信給: 10086
寫(xiě)郵件：peun@foxmail.com
?

應(yīng)對(duì)方案：觸屏即播

$("html").one("touchstart",function(){
?? ?audio.play()
})

通過(guò)transform的3d屬性改去硬件加速可以解決閃屏問(wèn)題
開(kāi)啟硬件加速
1）解決頁(yè)面閃白
2）保證動(dòng)畫(huà)流暢

.css { 
?? ?-webkit-transform: translate3d(0, 0, 0); 
?? ?-moz-transform: translate3d(0, 0, 0); 
?? ?-ms-transform: translate3d(0, 0, 0); 
?? ?transform: translate3d(0, 0, 0); 
} 

?

input::-webkit-input-speech-button {display: none}

盡可能地使用合成屬性transform和opacity來(lái)設(shè)計(jì)CSS3動(dòng)畫(huà)
不使用position的left和top來(lái)定位
利用translate3D開(kāi)啟GPU加速
?

ios下fixed元素容易定位出錯(cuò)，軟鍵盤(pán)彈出時(shí)，影響fixed元素定位
android下fixed表現(xiàn)要比iOS更好，軟鍵盤(pán)彈出時(shí)，不會(huì)影響fixed元素定位
ios4下不支持position:fixed
解決方案
可用isroll.js，暫無(wú)完美方案

?
??????????? 1）PC優(yōu)化手段在Mobile側(cè)同樣適用
??????????? 2）在Mobile側(cè)我們提出三秒種渲染完成首屏指標(biāo)
??????????? 3）基于第二點(diǎn)，首屏加載3秒完成或使用Loading
??????????? 4）基于聯(lián)通3G網(wǎng)絡(luò)平均338KB/s(2.71Mb/s)，所以首屏資源不應(yīng)超過(guò)1014KB
??????????? 5）Mobile側(cè)因手機(jī)配置原因，除加載外渲染速度也是優(yōu)化重點(diǎn)
??????????? 6）基于第五點(diǎn)，要合理處理代碼減少渲染損耗
??????????? 7）基于第二、第五點(diǎn)，所有影響首屏加載和渲染的代碼應(yīng)在處理邏輯中后置
??????????? 8）加載完成后用戶(hù)交互使用時(shí)也需注意性能

??????????? [加載優(yōu)化]
?
??????????? 加載過(guò)程是最為耗時(shí)的過(guò)程，可能會(huì)占到總耗時(shí)的80%時(shí)間，因此是優(yōu)化的重點(diǎn)
?

??????????? 因?yàn)槭謾C(jī)瀏覽器同時(shí)響應(yīng)請(qǐng)求為4個(gè)請(qǐng)求（Android支持4個(gè)，iOS 5后可支持6個(gè)），所以要盡量減少頁(yè)面的請(qǐng)求數(shù)，首次加載同時(shí)請(qǐng)求數(shù)不能超過(guò)4個(gè)
??????????? a) 合并CSS、JavaScript
??????????? b) 合并小圖片，使用雪碧圖
?

???????使用緩存可以減少向服務(wù)器的請(qǐng)求數(shù)，節(jié)省加載時(shí)間，所以所有靜態(tài)資源都要在服務(wù)器端設(shè)置緩存，并且盡量使用長(zhǎng)Cache（長(zhǎng)Cache資源的更新可使用時(shí)間戳）
??????????? a) 緩存一切可緩存的資源
??????????? b) 使用長(zhǎng)Cache（使用時(shí)間戳更新Cache）
??????????? c) 使用外聯(lián)式引用CSS、JavaScript
?

??????????? 減少資源大小可以加快網(wǎng)頁(yè)顯示速度，所以要對(duì)HTML、CSS、JavaScript等進(jìn)行代碼壓縮，并在服務(wù)器端設(shè)置GZip
??????????? a) 壓縮（例如，多余的空格、換行符和縮進(jìn)）
??????????? b) 啟用GZip
?

???????寫(xiě)在HTML頭部的JavaScript（無(wú)異步），和寫(xiě)在HTML標(biāo)簽中的Style會(huì)阻塞頁(yè)面的渲染，因此CSS放在頁(yè)面頭部并使用Link方式引入，避免在HTML標(biāo)簽中寫(xiě)Style，JavaScript放在頁(yè)面尾
部或使用異步方式加載
?

?????首屏的快速顯示，可以大大提升用戶(hù)對(duì)頁(yè)面速度的感知，因此應(yīng)盡量針對(duì)首屏的快速顯示做優(yōu)化
?

??????????? 將不影響首屏的資源和當(dāng)前屏幕資源不用的資源放到用戶(hù)需要時(shí)才加載，可以大大提升重要資源的顯示速度和降低總體流量
??????????? PS：按需加載會(huì)導(dǎo)致大量重繪，影響渲染性能
??????????? a) LazyLoad
??????????? b) 滾屏加載
??????????? c) 通過(guò)Media Query加載
?

??????????? 大型重資源頁(yè)面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁(yè)面。但Loading時(shí)間過(guò)長(zhǎng)，會(huì)造成用戶(hù)流失
??????????? 對(duì)用戶(hù)行為分析，可以在當(dāng)前頁(yè)加載下一頁(yè)資源，提升速度
??????????? a) 可感知Loading(如進(jìn)入空間游戲的Loading)
??????????? b) 不可感知的Loading（如提前加載下一頁(yè)）
?

??????????? 圖片是最占流量的資源，因此盡量避免使用他，使用時(shí)選擇最合適的格式（實(shí)現(xiàn)需求的前提下，以大小判斷），合適的大小，然后使用智圖壓縮，同時(shí)在代碼中用Srcset來(lái)按需顯示
??????????? PS：過(guò)度壓縮圖片大小影響圖片顯示效果
??????????? a) 使用智圖（ http://zhitu.isux.us/ ）
??????????? b) 使用其它方式代替圖片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont)
??????????? c) 使用Srcset
??????????? d) 選擇合適的圖片(1. webP優(yōu)于JPG 2. PNG8優(yōu)于GIF)
??????????? e) 選擇合適的大小（1. 首次加載不大于1014KB 2. 不寬于640（基于手機(jī)屏幕一般寬度））
?

????Cookie會(huì)影響加載速度，所以靜態(tài)資源域名不使用Cookie
?

?????????重定向會(huì)影響加載速度，所以在服務(wù)器正確設(shè)置避免重定向
?

??????????? 第三方資源不可控會(huì)影響頁(yè)面的加載和顯示，因此要異步加載第三方資源
?

?
????處理不當(dāng)會(huì)阻塞頁(yè)面加載、渲染，因此在使用時(shí)需當(dāng)注意
???? CSS寫(xiě)在頭部，JavaScript寫(xiě)在尾部或異步
??????? 避免圖片和iFrame等的空Src
??????? 空Src會(huì)重新加載當(dāng)前頁(yè)面，影響速度和效率
?

????????重設(shè)圖片大小是指在頁(yè)面、CSS、JavaScript等中多次重置圖片大小，多次重設(shè)圖片大小會(huì)引發(fā)圖片的多次重繪，影響性能
?

?????DataURL圖片沒(méi)有使用圖片的壓縮算法文件會(huì)變大，并且要解碼后再渲染，加載慢耗時(shí)長(zhǎng)
?

?
??* 盡量避免寫(xiě)在HTML標(biāo)簽中寫(xiě)Style屬性
??* 避免CSS表達(dá)式
????????CSS表達(dá)式的執(zhí)行需跳出CSS樹(shù)的渲染，因此請(qǐng)避免CSS表達(dá)式
??* 移除空的CSS規(guī)則
????????空的CSS規(guī)則增加了CSS文件的大小，且影響CSS樹(shù)的執(zhí)行，所以需移除空的CSS規(guī)則
??* 正確使用Display的屬性
????????Display屬性會(huì)影響頁(yè)面的渲染，因此請(qǐng)合理使用
??????????? a) display:inline后不應(yīng)該再使用width、height、margin、padding以及float
???????????????b) display:inline-block后不應(yīng)該再使用float
???????????????c) display:block后不應(yīng)該再使用vertical-align
???????????????d) display:table-*后不應(yīng)該再使用margin或者float
??*?不濫用Float
?????????Float在渲染時(shí)計(jì)算量比較大，盡量減少使用
??*?不濫用Web字體
?????????Web字體需要下載，解析，重繪當(dāng)前頁(yè)面，盡量減少使用
??*?不聲明過(guò)多的Font-size
?????????過(guò)多的Font-size引發(fā)CSS樹(shù)的效率
??*?值為0時(shí)不需要任何單位
?????????為了瀏覽器的兼容性和性能，值為0時(shí)不要帶單位
??*?標(biāo)準(zhǔn)化各種瀏覽器前綴
?????????a) 無(wú)前綴應(yīng)放在最后
?????????b) CSS動(dòng)畫(huà)只用 （-webkit- 無(wú)前綴）兩種即可
?????????c) 其它前綴為 -webkit- -moz- -ms- 無(wú)前綴 四種，（-o-Opera瀏覽器改用blink內(nèi)核，所以淘汰）
? * 避免讓選擇符看起來(lái)像正則表達(dá)式 高級(jí)選擇器執(zhí)行耗時(shí)長(zhǎng)且不易讀懂，避免使用
?

?
?????* 減少重繪和回流
????????????a) 避免不必要的Dom操作
????????????b) 盡量改變Class而不是Style，使用classList代替className
????????????c) 避免使用document.write
????????????d) 減少drawImage
?????* 緩存Dom選擇與計(jì)算
??????????? 每次Dom選擇都要計(jì)算，緩存他
?????* 緩存列表.length
???????????每次.length都要計(jì)算，用一個(gè)變量保存這個(gè)值
?????*?盡量使用事件代理，避免批量綁定事件
?????* 盡量使用ID選擇器
????????????ID選擇器是最快的
?????* TOUCH事件優(yōu)化
?????????????使用touchstart、touchend代替click，因快影響速度快。但應(yīng)注意Touch響應(yīng)過(guò)快，易引發(fā)誤操作

????* HTML使用Viewport
?????????? Viewport可以加速頁(yè)面的渲染，請(qǐng)使用以下代碼
?????????????
????* 減少Dom節(jié)點(diǎn)
???????????Dom節(jié)點(diǎn)太多影響頁(yè)面的渲染，應(yīng)盡量減少Dom節(jié)點(diǎn)
????* 動(dòng)畫(huà)優(yōu)化
?????????a) 盡量使用CSS3動(dòng)畫(huà)
?????????b) 合理使用requestAnimationFrame動(dòng)畫(huà)代替setTimeout
?????????c) 適當(dāng)使用Canvas動(dòng)畫(huà) 5個(gè)元素以?xún)?nèi)使用css動(dòng)畫(huà)，5個(gè)以上使用Canvas動(dòng)畫(huà)（iOS8可使用webGL）
?
????* 高頻事件優(yōu)化
?????????Touchmove、Scroll 事件可導(dǎo)致多次渲染
?????????a) 使用requestAnimationFrame監(jiān)聽(tīng)?zhēng)兓?，使得在正確的時(shí)間進(jìn)行渲染
?????????b) 增加響應(yīng)變化的時(shí)間間隔，減少重繪次數(shù)
?
????* GPU加速
??????????CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）來(lái)觸發(fā)GPU渲染，請(qǐng)合理使用（PS：過(guò)渡使用會(huì)引發(fā)手機(jī)過(guò)耗電增加）

a、CSS動(dòng)畫(huà)更為流暢、但內(nèi)存占用過(guò)高，動(dòng)畫(huà)元素在5個(gè)以?xún)?nèi)更為推薦；
b、Canvas動(dòng)畫(huà)存在丟幀現(xiàn)象，這一現(xiàn)象在android中低端手機(jī)中表現(xiàn)更為明顯；
c、5個(gè)以?xún)?nèi)動(dòng)畫(huà)元素，選用CSS動(dòng)畫(huà)，80%的設(shè)備幀頻可達(dá)80以上。

移動(dòng)自適應(yīng)的話(huà)一般我用的話(huà)就是rem，通過(guò)rem單位配合媒體查詢(xún)來(lái)完成幾個(gè)屏幕的適配，以iphone6位標(biāo)準(zhǔn)，向上適配plus，向下適配5，不做過(guò)多的適配，有時(shí)候有要求的話(huà)也用js來(lái)控制rem的大小達(dá)到適配效果，rem是相對(duì)單位，相對(duì)html元素的font-size值的屬性，比如font-size:100px; 的話(huà)1rem就得100px，這樣我子需要通過(guò)改變html的font-size就可以達(dá)到適配效果

為動(dòng)畫(huà)DOM元素添加CSS3樣式-webkit-transform:transition3d(0,0,0)或-webkit-transform:translateZ(0);，這兩個(gè)屬性都會(huì)開(kāi)啟GPU硬件加速模式，從而讓瀏覽器在渲染動(dòng)畫(huà)時(shí)從CPU轉(zhuǎn)向GPU

通過(guò)-webkit-transform:transition3d/translateZ開(kāi)啟GPU硬件加速之后，有些時(shí)候可能會(huì)導(dǎo)致瀏覽器頻繁閃爍或抖動(dòng)，可以嘗試以下辦法解決之：
-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

通過(guò)-webkit-transform:transition3d/translateZ開(kāi)啟GPU硬件加速的適用范圍：
使用很多大尺寸圖片(尤其是PNG24圖)進(jìn)行動(dòng)畫(huà)的頁(yè)面。
頁(yè)面有很多大尺寸圖片并且進(jìn)行了css縮放處理，頁(yè)面可以滾動(dòng)時(shí)。
使用background-size:cover設(shè)置大尺寸背景圖，并且頁(yè)面可以滾動(dòng)時(shí)
編寫(xiě)大量DOM元素進(jìn)行CSS3動(dòng)畫(huà)時(shí)(transition/transform/keyframes/absTop&Left)
使用很多PNG圖片拼接成CSS Sprite時(shí)

可以使用after插入的形式將寬度設(shè)置為200%，然后通過(guò)css transfrom 的scale 縮放0.5倍；

使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局

通過(guò)快捷方式打開(kāi)時(shí)全屏顯示

iPhone會(huì)將看起來(lái)像電話(huà)號(hào)碼的數(shù)字添加電話(huà)連接，應(yīng)當(dāng)關(guān)閉

使用Media Queries適配對(duì)應(yīng)樣式

all所有設(shè)備；
screen 電腦顯示器；
print打印用紙或打印預(yù)覽視圖；
handheld便攜設(shè)備；
tv電視機(jī)類(lèi)型的設(shè)備；
speech語(yǔ)意和音頻盒成器；
braille盲人用點(diǎn)字法觸覺(jué)回饋設(shè)備；
embossed盲文打印機(jī)；
projection各種投影設(shè)備；
tty使用固定密度字母柵格的媒介，比如電傳打字機(jī)和終端。

width瀏覽器寬度；
height瀏覽器高度；
device-width設(shè)備屏幕分辨率的寬度值；
device-height設(shè)備屏幕分辨率的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。

@media only screen and (min-width:768px)and(max-width:1024px){}
@media only screen and (width:320px)and (width:768px){}

寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}

響應(yīng)式圖片

#wrap img{
??max-width:100%;
??height:auto;
}

一個(gè)響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶(hù)端屏幕。css3引入了新的單位叫做rem,和em類(lèi)似但對(duì)于Html元素，rem更方便使用。em是相對(duì)于根元素的，需重置根元素字體大小：

html{font-size:100%;}

完成后，可以定義響應(yīng)式字體：

@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:2rem;}}

ip6 2、ip6+ 3、nexus5 3

1) 自適應(yīng)方式
2) viewport方式
3) rem方式
4) scale()方式縮放

避免IE使用兼容模式
為不支持viewport的IE Mobile設(shè)定寬度
是否對(duì)手持設(shè)備友好

強(qiáng)制豎屏
強(qiáng)制全屏
應(yīng)用模式

強(qiáng)制豎屏
強(qiáng)制全屏
應(yīng)用模式

開(kāi)啟極速模式

啟動(dòng)webapp功能 刪除工具欄和菜單欄
控制狀態(tài)欄顏色
開(kāi)啟號(hào)碼或郵箱檢測(cè)
添加主屏幕icon