前端頁(yè)面性能優(yōu)化

前端是龐大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各種各樣的資源。前端優(yōu)化是復(fù)雜的，針對(duì)方方面面的資源都有不同的方式。那么，前端優(yōu)化的目的是什么 ?
1. 從用戶角度而言，優(yōu)化能夠讓頁(yè)面加載得更快、對(duì)用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。
2. 從服務(wù)商角度而言，優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù)、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的資源。

總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。以下從幾個(gè)方面介紹關(guān)于前端方面的優(yōu)化：

1.Html方面

從html的健壯性、可維護(hù)性和語(yǔ)義化入手

健壯性是指你搭建的html代碼框架要穩(wěn)固，并且盡量減少DOM元素的編寫，Write less do more是程序員必備的思想，用最少的代碼布最好的框架；

可維護(hù)性和語(yǔ)義化，這兩者相互依賴。如上條所說，減少DOM元素也是為了以后便于維護(hù)和修改，使用語(yǔ)義化的標(biāo)簽或者語(yǔ)義化的類名的道理都是為了便于后期的維護(hù)，也是防止css樣式缺失/無法渲染的時(shí)候，用戶也能像閱讀文檔一樣瀏覽網(wǎng)頁(yè)。

2.CSS方面

同html一樣都是需要語(yǔ)義化處理的，并且減少DOM層級(jí)嵌套，這一點(diǎn)上用css的預(yù)編譯處理器就能很好的處理，將經(jīng)常用到的屬性或功能用變量緩存，便于多次利用和減少代碼量；less的層級(jí)嵌套雖然好用，但是也要避免多層的嵌套（用grunt的less轉(zhuǎn)換插件轉(zhuǎn)換成css時(shí)就會(huì)看到過多層級(jí)的恐怖）；還有一些css3的屬性也很影響性能：text-shadow\box-shadow\gradient(漸變) 這些屬性在渲染的時(shí)候很影響性能。

避免使用CSS expression（css表達(dá)式）又稱Dynamic properties(動(dòng)態(tài)屬性)；需要設(shè)置很多樣式時(shí)設(shè)置className而不是直接操作style。

3.JavaScript方面

首要的就是減少http請(qǐng)求（圖片、音頻、視頻文件會(huì)向服務(wù)器發(fā)送請(qǐng)求），如何減少呢？

圖片：1.部分背景圖片使用圖片精靈使之轉(zhuǎn)換成雪碧圖（發(fā)送一次請(qǐng)求就可以將許多背景圖片緩存）；

2.小圖標(biāo)使用font-icon字體圖標(biāo)，用文本的形式加載；

3.較大的背景圖片使用懶加載（lazyload）和預(yù)加載。

其次是減少對(duì)DOM的操作，會(huì)使該元素重繪或重構(gòu)，也是很影響性能。（重繪和重構(gòu)見之前的文章）對(duì)需要多次操作的DOM元素給其設(shè)置變量名緩存，減少遍歷整個(gè)HTML頁(yè)面的次數(shù)開銷。

還有許多細(xì)節(jié)的處理方式：

同一父元素的多個(gè)子元素有同樣事件綁定，無需將其逐一綁定（給每個(gè)子元素都加上一個(gè)方法），而是使用“事件委托”給它父元素綁定事件，在用條件判斷每次需要執(zhí)行的子元素是誰(shuí)（switch）。

盡量不使用滾輪事件和滾動(dòng)條相關(guān)事件；針對(duì)一些頻繁操作的動(dòng)畫使用“函數(shù)防抖”或“函數(shù)節(jié)流”（個(gè)人推薦使用函數(shù)節(jié)流）；少用全局變量避免變量污染（組間操作的時(shí)候 你的全局變量可能和他人變量重名 會(huì)導(dǎo)致事件異常 變量污染）；使用for循環(huán)語(yǔ)句代替for in語(yǔ)句；使用DOM2級(jí)事件而少使用DOM0級(jí)事件；用innerHTML代替DOM操作，減少DOM操作次數(shù)。