前端需要性能優(yōu)化么？

性能優(yōu)化一直以來都是前端工程領(lǐng)域中的一個重要部分。很多資料表明，網(wǎng)站應(yīng)用的性能優(yōu)化對于提高用戶留存、轉(zhuǎn)化率等都有積極影響。可以理解為，提升你的網(wǎng)站性能，就是提升你的業(yè)務(wù)數(shù)據(jù)（甚至是業(yè)務(wù)收入）。

性能優(yōu)化廣義上包含前端優(yōu)化和后端優(yōu)化。后端優(yōu)化的關(guān)注點(diǎn)更多的時候是在增加資源利用率、降低資源成本以及提高穩(wěn)定性上。相較于后端，前端的性能優(yōu)化會更直接與用戶的體驗(yàn)掛鉤。從用戶體驗(yàn)側(cè)來說，前端服務(wù) 5s 的加載時間優(yōu)化縮減 80%(1s) 與后端服務(wù) 50ms 的響應(yīng)優(yōu)化縮減 80%(10ms) 相比，用戶的體驗(yàn)提升會更大。因此很多時候，與體驗(yàn)相關(guān)的性能的瓶頸會出現(xiàn)在前端。

我和一些同學(xué)接觸的過程中，發(fā)現(xiàn)作為前端工程師，大家其實(shí)都具備一定的性能優(yōu)化意識，同時也有自己的優(yōu)化“武器庫”，例如懶加載、資源合并、避免 reflow 等等。雖然大家對性能優(yōu)化都有自己的思路，不過大多是分散在某幾個點(diǎn)，較難形成一個完整的體系。

一、html文檔結(jié)構(gòu)標(biāo)簽語義化

1、首先什么是語義化呢？

語義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。機(jī)器在需要更少的人類干預(yù)的情況下能夠研究和收集信息,讓網(wǎng)頁能夠被機(jī)器理解,最終讓人類受益。即用正確的標(biāo)簽做正確的事。

2、語義化的好處或者說存在的意義

① 有利于搜索引擎抓取

② 結(jié)構(gòu)清晰的HTML在團(tuán)隊(duì)合作中的作用：代碼可讀、便于維護(hù)、提高開發(fā)效率、快速達(dá)成共識、利于二次開發(fā)。

③ 有利于盲人屏幕閱讀器

二、css、js文件數(shù)量及大小

優(yōu)化一般對于css、js是建議使用外聯(lián)式來進(jìn)行導(dǎo)入。我們可以對css、js做相應(yīng)的規(guī)劃也可以減少css、js的個數(shù)以減少http請求。同時也要注重減少重復(fù)代碼，注重代碼重復(fù)利用，以達(dá)到用最少的代碼干最多的事。同時當(dāng)項(xiàng)目要投入上線使用的時候，可以對css、js文件進(jìn)行壓縮，文件的減小可以加速文件的鏈接導(dǎo)入，以便加速網(wǎng)頁的加載渲染。

可通過使用webpack，gulp等工具對Js文件進(jìn)行合并。

三、圖片的數(shù)量和大小

多個服務(wù)器請求會對站點(diǎn)的性能產(chǎn)生顯著的影響。對一張圖片進(jìn)行導(dǎo)入又是一個http請求，因此我們應(yīng)該減少圖片的導(dǎo)入數(shù)量以便減少http請求。此處，我們必須提到一個名詞“css精靈spirit”。css精靈是指包含多個不同的圖標(biāo)、按鈕或圖形的單個圖像。因此我們可以把多張背景圖片合并為一張然后對背景圖片進(jìn)行相應(yīng)的定位。同時使用PNG8格式的圖片相對于GIF來說比較少。而對于內(nèi)容圖片，可以對其進(jìn)行適當(dāng)?shù)膲嚎s，可以加快文檔內(nèi)容加載，或者如果是需要用戶下載的圖片，小的圖片可以加快用戶下載的速度。

使用較為廣泛的web圖片格式有：JPEG/JPG、PNG、WEBP、Base64、SVG。

1.JPEG/JPG

特點(diǎn)是有損壓縮，體積小，加載快，不支持透明。

使用場景：JPG適合用于呈現(xiàn)熱菜豐富的圖片，在日常的開發(fā)中，JPG圖片經(jīng)常作為大的背景圖、輪播圖或是Banner圖。比如兩大電商網(wǎng)站對大圖片的處理，就是對JPG圖片應(yīng)用場景的最佳寫照。用JPG來呈現(xiàn)大圖片，既可以保留圖片的質(zhì)量，又不會擔(dān)心圖片的體積，是一種比較廣泛使用的方案。

缺點(diǎn)：在處理一些矢量圖形和logo等這些線條感很強(qiáng)、顏色對比強(qiáng)烈的圖片時，認(rèn)為壓縮就導(dǎo)致圖片模糊非常明顯。另外，JPG圖像不支持透明度處理，透明圖片只能用PNG來呈現(xiàn)了。

2.PNG-8和PNG-24

特點(diǎn)是無損壓縮、質(zhì)量高、體積大、支持透明

優(yōu)點(diǎn)：無損壓縮的高保真圖片格式。8和24都是二進(jìn)制數(shù)的位數(shù)，8位的PNG支持256中顏色，24位的PNG可以支持1600萬種顏色。在不考慮文件大小只在乎最佳的顯示效果時，推薦使用PNG-24。但是在適合使用PNG時會優(yōu)先選擇PNG-8

應(yīng)用場景：主要用PNG來呈現(xiàn)小的LOGO、顏色簡單對比強(qiáng)烈的圖片或是背景。

3.SVG

特點(diǎn)是文本文件，體積小，不失真，兼容性好

優(yōu)點(diǎn)：SVG是一種基于XML語法的圖像格式。SVG對圖像的處理不是基于像素，而是基于對圖像的形狀描述。

和JPG、PNG相比較，SVG文件體積更小，可壓縮性更強(qiáng)。SVG作為矢量圖最大的優(yōu)點(diǎn)在于圖片可以無限放大還不失真，一張SVG圖片可以適配多種分辨率。另外SVG是文本文件，可以像寫代碼一樣定義SVG，放在HTML中稱為DOM的一部分。也可以把對圖像的描述寫入以.svg為后綴的文件中，在img標(biāo)簽中引入即可。

4.WebP

優(yōu)點(diǎn)：WebP是一款比JPG、PNG等在壓縮方面更加優(yōu)越的圖片格式，同時也不會影響其圖片質(zhì)量，使用該格式時最好將同名文件格式化，當(dāng)檢測瀏覽器不兼容時自動切換jpg格式

缺點(diǎn)：是一個相對較新的技術(shù)，所以對于目前市面上的瀏覽器能否完美的兼容，其可用和實(shí)用性就變得很現(xiàn)實(shí)了，再好的東西如果沒有好的兼容性，也是非常難以普及和被廣泛使用的

5.Base64

優(yōu)點(diǎn)：減少請求，加快首屏數(shù)據(jù)顯示。對于jpg格式的圖片，每一個圖片相當(dāng)于一次http請求，圖片多了的話，服務(wù)器耗性能比較嚴(yán)重。而將jpg轉(zhuǎn)化成base64格式的圖片，則極大地減少了請求數(shù)，因?yàn)锽ase是文本格式。

缺點(diǎn)：base64格式圖片比原圖大，占用更多存儲空間，同時，瀏覽器不會對該資源緩存。

使用方法：background:url(data:image/png;base64,{img_data})

應(yīng)用場景：一般對于小于10KB大小的圖片進(jìn)行base64轉(zhuǎn)碼。

至于動態(tài)圖有GIF與APNG：后者APNG這東西是mozilla搞出來的， 它是24位的，而且也是動圖，可以容納1680萬種顏色，也是為了取代GIF，但是....也就火狐支持，IE10和chrome，safari全部不行， 如果說gif圖片是卡片機(jī)的話， APNG就是單反

四、有效性驗(yàn)證

除了根據(jù)語義加標(biāo)記之外，HTML文檔還需要用有效的代碼來編寫，如果代碼是無效的，瀏覽器會嘗試解釋標(biāo)記本身，有時候會產(chǎn)生錯誤的結(jié)果。更糟的是，如果發(fā)送具有正確的MIME類型的XHTML文檔，理解XML的瀏覽器將不顯示無效的頁面。因?yàn)闉g覽器需要知道要使用什么DTD（文檔類型定義）才能正確地處理頁面，所以對頁面進(jìn)行有效性驗(yàn)證要求有DOCTYPE聲明。

有效性驗(yàn)證工具徑：

① W3C驗(yàn)證器（bookmarklet），這是一小段可以存儲在瀏覽器的書簽或收藏夾中的Java。單擊這個書簽就會觸發(fā)Java動作。

②可以訪問http://validator.w3.org/，通過輸入自己的URL來對自己的站點(diǎn)來進(jìn)行在線驗(yàn)證。

③使用firefox瀏覽器的可以下載插件Firefox Web Developer Extension

五、雅虎的Web優(yōu)化最佳實(shí)踐

1、內(nèi)容優(yōu)化

① 盡量減少HTTP請求：常見方法包括合并多個CSS文件和Java文件，利用CSS Sprites整合圖像，Image map（圖像中不同的區(qū)域設(shè)置不同的鏈接），內(nèi)聯(lián)圖象（使用 data: URL scheme 在實(shí)際的頁面嵌入圖像數(shù)據(jù)）等。

② 減少DNS查找，一般dns查找需要花費(fèi)20-120ms，Windows的DNS緩存，可以通過ipconfig /displaydns 這個命令來查看。

③ 避免重定向

④ 使Ajax可緩存

⑤ 延遲加載組件：考慮哪些內(nèi)容是頁面呈現(xiàn)時所必需首先加載的、哪些內(nèi)容和結(jié)構(gòu)可以稍后再加載，根據(jù)這個優(yōu)先級進(jìn)行設(shè)定。

⑥ 預(yù)加載組件：預(yù)加載是在瀏覽器空閑時請求將來可能會用到的頁面內(nèi)容（如圖像、樣式表和腳本）。當(dāng)用戶要訪問下一個頁面時，頁面中的內(nèi)容大部分已經(jīng)加載到緩存中了，因此可以大大改善訪問速度。

⑦ 減少DOM元素?cái)?shù)量：頁面中存在大量DOM 元素，會導(dǎo)致Java遍歷DOM的效率變慢。

⑧根據(jù)域名劃分頁面內(nèi)容：把頁面內(nèi)容劃分成若干部分可以使你最大限度地實(shí)現(xiàn)平行下載。但要確保你使用的域名數(shù)量在2個到4個之間（否則與第2條沖突）。

⑨ 最小化iframe的數(shù)量：iframes 提供了一個簡單的方式把一個網(wǎng)站的內(nèi)容嵌入到另一個網(wǎng)站中。但其創(chuàng)建速度比其他包括Java和CSS的DOM元素的創(chuàng)建慢了1-2個數(shù)量級。

⑩ 避免404：HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應(yīng)（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗(yàn)而不會有一點(diǎn)好處。

2、服務(wù)器優(yōu)化

① 使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）：把你的網(wǎng)站內(nèi)容分散到多個、處于不同地域位置的服務(wù)器上可以加快下載速度。

添加Expires或Cache-Control信息頭：對于靜態(tài)內(nèi)容，可設(shè)置文件頭過期時間Expires的值為“Never expire（永不過期）”；對于動態(tài)內(nèi)容，可使用恰當(dāng)?shù)腃ache-Control文件頭來幫助瀏覽器進(jìn)行有條件的請求。

② Gzip壓縮

③ 設(shè)置ETag：ETags（Entity tags，實(shí)體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制。

④ 提前刷新緩沖區(qū)：當(dāng)用戶請求一個頁面時，服務(wù)器會花費(fèi)200到500毫秒用于后臺組織HTML文件。在這期間，瀏覽器會一直空閑等待數(shù)據(jù)返回。在PHP中，可以使用flush方法，它允許你把已經(jīng)編譯的好的部分HTML響應(yīng)文件先發(fā)送給瀏覽器，這時瀏覽器就會可以下載文件中的內(nèi)容（腳本等）而后臺同⑤時處理剩余的HTML頁面。

⑥ 對Ajax請求使用GET方法：當(dāng)使用時，瀏覽器中的POST方法會首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET最為恰當(dāng)。

⑦ 避免空的圖像src

3、Cookie優(yōu)化

① 減小cookie大?。喝コ槐匾腸oockie，并使coockie體積盡量小以減少對用戶響應(yīng)的影響

② 針對Web組件使用域名無關(guān)的Cookie：對靜態(tài)組件的Cookie讀取是一種浪費(fèi)，使用另一個無Cookie的域名來存放靜態(tài)組件是一個好方法，或者也可以在Cookie中只存放帶www的域名。

4、CSS優(yōu)化

① 將CSS代碼放在HTML頁面的頂部

② 避免使用CSS表達(dá)式：CSS表達(dá)式在執(zhí)行時候的運(yùn)算量非常大，會對頁面性能產(chǎn)生大的影響

③ 使用來代替@import

④ 避免使用Filters：IE獨(dú)有屬性AlphaImageLoader用于修正IE 7以下版本中PNG圖片的半透明效果，但它的問題在于瀏覽器加載圖片時它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。

5、Java優(yōu)化

① 將Java腳本放在頁面的底部

② 將Java和CSS作為外部文件來引用：在實(shí)際應(yīng)用中使用外部文件可以提高頁面速度，因?yàn)镴ava和CSS文件都能在瀏覽器中產(chǎn)生緩存。

③ 縮小Java和CSS

④ 刪除重復(fù)的腳本

⑤ 最小化DOM的訪問：使用Java訪問DOM元素比較慢

⑥ 開發(fā)智能的事件處理程序

6、圖像優(yōu)化

① 優(yōu)化圖片大小

② 通過CSS Sprites優(yōu)化圖片

③ 不要在HTML中使用縮放圖片

④ favicon.ico要小而且可緩存

7、針對移動優(yōu)化

① 保持組件大小在25KB以下：主要是因?yàn)閕Phone不能緩存大于25K的文件（注意這里指的是解壓縮后的大?。?/p>

② 將組件打包成為一個復(fù)合文檔：把頁面內(nèi)容打包成復(fù)合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中獲取多個組件。