+WEB前端性能優(yōu)化:HTML,CSS,JS和服務(wù)器端優(yōu)化
對(duì)前端開發(fā)工程師來(lái)說(shuō)锣夹，前端性能優(yōu)化的重要性是不言而喻的浪南，最為大家所知的是YSLOW的23條優(yōu)化規(guī)則父款，在我的理解中，性能優(yōu)化不純粹是指用戶訪問(wèn)網(wǎng)站的速度斩松，也包括開發(fā)的效率伶唯，這里我總結(jié)下我理解中的WEB前端性能優(yōu)化。
HTML部分
語(yǔ)義化HTML：好處在于可以使代碼簡(jiǎn)潔清晰惧盹，支持不同設(shè)備抵怎，利于搜索引擎奋救，便于團(tuán)隊(duì)開發(fā)；
減少DOM節(jié)點(diǎn)：加速頁(yè)面渲染反惕；
給圖片加上正確的寬高值：這可以減少頁(yè)面重繪，同時(shí)防止圖片縮放演侯；
防止src屬性和link的href屬性為空：當(dāng)值為空時(shí)姿染，瀏覽器很可能會(huì)把當(dāng)前頁(yè)面當(dāng)成其屬性值加載；
正確的閉合標(biāo)簽：如避免使用
秒际，瀏覽器會(huì)多一個(gè)將它解析成的過(guò)程悬赏；
鏈接為目錄或首頁(yè)的地址后面加”/”，如http://www.qq.com/娄徊；
用LINK而不用@import方式導(dǎo)入樣式闽颇；
樣式放在頁(yè)頭，JS放在頁(yè)尾寄锐；
縮小favicon.ico并緩存兵多；
CSS部分
避免使用 CSS Expressions(CSS表達(dá)式)：如
避免使用 CSS Filter（CSS濾鏡）；
使用CSS縮寫橄仆，減少代碼量剩膘；
通過(guò)CSSSprites把同類圖片合成一張，減少圖片請(qǐng)求盆顾；
減少查詢層級(jí)：如.header .logo要好過(guò).header .top .logo怠褐；
減少查詢范圍：如.header>li要好過(guò).header li；
避免TAG標(biāo)簽與CLASS或ID并存：如a.top您宪、button#submit奈懒；
刪除重復(fù)的CSS；
Javscript部分
盡量少用全局變量宪巨；
使用事件代理綁定事件磷杏，如將事件綁定在body上進(jìn)行代理；
避免頻繁操作DOM節(jié)點(diǎn)揖铜；
不使用EVAL茴丰；
減少對(duì)象查找，如a.b.c.d這種查找方式非常耗性能天吓，盡可能把它定義在變量里贿肩；
類型轉(zhuǎn)換：把數(shù)字轉(zhuǎn)換成字符串使用”” + 1，浮點(diǎn)數(shù)轉(zhuǎn)換成整型使用Math.floor()或者M(jìn)ath.round()龄寞；
對(duì)字符串進(jìn)行循環(huán)操作汰规，譬如替換、查找物邑，應(yīng)使用正則表達(dá)式溜哮；
刪除重復(fù)的JS滔金；
服務(wù)器部分
盡量合并CSS、JS文件茂嗓，或?qū)⑵渲苯訉懺陧?yè)面上餐茵，減少HTTP請(qǐng)求；
壓縮CSS述吸、JS文件忿族，縮短文件傳輸時(shí)間；
避免404錯(cuò)誤：特別要避免給404指定一個(gè)停擺頁(yè)面蝌矛，否則所有404錯(cuò)誤都將會(huì)加載一次頁(yè)面道批；
一般要求減少DNS查詢次數(shù)，如同一個(gè)頁(yè)面的請(qǐng)求資源盡量少的使用不同的主機(jī)名入撒，這可以減少網(wǎng)站并行下載的數(shù)量隆豹，但很多網(wǎng)站為了加速下載資源其實(shí)是特意用了多個(gè)主機(jī)名，這里要做一個(gè)權(quán)衡茅逮；
使用CDN加速璃赡，使用戶從離自己最近的服務(wù)器下載文件；
減少Cookie的大小氮唯，使用無(wú)cookie的域鉴吹，客戶端請(qǐng)求靜態(tài)文件的時(shí)候，減少 Cookie 的反復(fù)傳輸對(duì)主域名的影響惩琉；
為文件頭指定Expires豆励，使內(nèi)容具有緩存性；
使用gzip壓縮內(nèi)容瞒渠；
