前端是龐大的,包括 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ù)。