從五個(gè)方面來分析前端性能優(yōu)化，為面試而打造。
優(yōu)化HTML
- 避免圖片和 iFrame等src屬性為空。src屬性為空，會(huì)重新加載當(dāng)前頁面，影響速度和效率
- 盡量避免在HTML標(biāo)簽中寫 Style屬性
- 把CSS放在頁面頭部，把JavaScript代碼放在頁面底部，這樣避免阻塞頁面渲染而使頁面出現(xiàn)長(zhǎng)時(shí)間的空白
優(yōu)化CSS
- 避免使用CSS表達(dá)式、高級(jí)選擇器、通配選擇器，盡量使用id、class選擇器設(shè)置樣式，避免使用style屬性設(shè)置行內(nèi)樣式
- 壓縮、合并CSS
- 當(dāng)需要設(shè)置的樣式很多時(shí)，設(shè)置 className而不是直接操作 Style
- 正確使用display屬性，display屬性會(huì)影響頁面的渲染
- 不濫用float
- 不聲明過多的font-size
- 當(dāng)值為0時(shí)不需要單位
- 盡量使用CSS3動(dòng)畫
優(yōu)化JavaScript
- 少用全局變量，緩存DOM節(jié)點(diǎn)查找的結(jié)果，減少I/O讀取操作
- 用 innerHTML代替DOM操作，減少DOM操作次數(shù)，
優(yōu)化 JavaScript性能，用 setTimeout避免頁面失去響應(yīng) - 避免使用with（with會(huì)創(chuàng)建自己的作用域，增加作用域鏈的長(zhǎng)度）
- 多個(gè)變量聲明合并
- 合理使用 requestAnimationFrame動(dòng)畫代替 setTimeOut
- 使用 touchstart、 touchend代替 click
- 適當(dāng)使用 canvas動(dòng)畫
- 盡量避免在高頻事件（如 TouchMove、 Scroll事件）中修改視圖，這會(huì)導(dǎo)致多次渲染
利用緩存優(yōu)化服務(wù)器端
- 緩存Ajax，使用CDN，添加 Expires頭，在服務(wù)器端配置Etag
- 使用CDN托管文件，讓用戶更快速地訪問
- 可以使用多個(gè)域名來緩存靜態(tài)文件，延長(zhǎng)靜態(tài)資源緩存時(shí)間，合理設(shè)置資源的過期時(shí)間
- 開啟服務(wù)器端的Gzip壓縮，對(duì)文本資源非常有效
- 減少cookie頭信息的大小，頭信息越大，資源傳輸速度越慢
請(qǐng)求數(shù)量
優(yōu)化圖片加載
- 圖片懶加載?？梢詾轫撁嫣砑右粋€(gè)滾動(dòng)條事件，判斷圖片是否在可視區(qū)域內(nèi)或者即將進(jìn)入可視區(qū)域，優(yōu)先加載。
- 如果為幻燈片、相冊(cè)文件等，可以使用圖片預(yù)加載技術(shù)，對(duì)于當(dāng)前展示圖片的前一張圖片和后一張圖片優(yōu)先下載。
- 如果圖片為CSS圖片，可以使用精靈圖合并，減少HTTP請(qǐng)求
- 如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮得特別小的縮略圖，以提高用戶體驗(yàn)。
- 如果圖片展示區(qū)域小于圖片的真實(shí)大小，則應(yīng)在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進(jìn)行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。
- 為圖片標(biāo)明高度和寬度
