關於前端性能優化的話題

摘要：

 

　　通常說來Web前端指網站業務邏輯以前的部分，包括瀏覽器加載、網站視圖模型、圖片服務、CDN服務等，主要優化手段有優化瀏覽器訪問、使用反向代理、CDN加速等。

---

一、 減小HTTP請求

　 在瀏覽器(客戶端)和服務器發生通訊時，就已經消耗了大量的時間，尤爲是在網絡狀況比較糟糕的時候，這個問題尤爲的突出。 
　　一個正常HTTP請求的流程簡述：如在瀏覽器中輸入」www.xxxxxx.com」並按下回車，瀏覽器再與這個URL指向的服務器創建鏈接，而後瀏覽器才能向服務器發送請求信息，服務器在接受到請求的信息後再返回相應的信息，瀏覽器接收到來自服務器的應答信息後，對這些數據解釋執行。
　　 HTTP協議是無狀態的應用層協議，意味着每次HTTP請求都須要創建通訊鏈路、進行數據傳輸，當咱們請求的網頁文件中有不少圖片、CSS、JS甚至音樂等信息時，將會頻繁的與服務器創建鏈接並釋放鏈接，這一定會形成資源的浪費，而在服務端，每一個HTTP都須要啓動獨立的線程去處理，這些通訊和服務的開銷都很昂貴，每一個HTTP請求都會對服務器和瀏覽器產生性能負擔。
　　 網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。
　　 減小HTTP的主要手段是合併CSS、合併JavaScript、合併圖片。將瀏覽器一次訪問須要的JavaScript、CSS合併成一個文件，這樣瀏覽器只須要一次請求。圖片也能夠合成，多張圖片合併成一張，若是每張圖片都有不一樣的超連接，可經過CSS偏移響應鼠標點擊操做，構造不一樣的URL。

---

二、 使用瀏覽器緩存

　 對一個網站而言，CSS、JavaScript、Logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都須要的，若是將這些文件緩存在瀏覽器中，能夠極好地改善性能。經過設置HTTP頭中的Cache-Control和Expires屬性，可設定瀏覽器緩存，緩存時間能夠是數天，甚至是數月。 
　　在某些時候，靜態資源文件變化須要及時應用到客戶端瀏覽器，這種狀況，能夠經過改變文件名實現 ，即更新JavaScript文件並非更新JavaScript文件內容，而是生成現代戰爭新的JS文件並更新HTML文件中的引用。
　　使用瀏覽器緩存策略的網站在更新靜態資源時，應採用分批次更新的方法，好比須要更新10個圖標文件，不宜把10個文件一次所有更新，而應該一個文件一個文件逐步更新，並有必定的間隔時間，以避免用戶瀏覽器忽然大量緩存失效，集中更新緩存，形成服務器負載驟增，網絡堵塞的狀況。 　　

---

三、服務端啓用壓縮

　 在服務器端對文件進行壓縮，在瀏覽器對文件解壓縮，可有效減小通訊傳輸的數據量。文本文件的壓縮率可達80%以上，所以HTML、CSS、JavaScript文件啓用GZip壓縮可達到較好的效果。可是壓縮對服務器和瀏覽器產生必定的壓力，在通訊帶寬良好，而服務器資源不足的狀況下要權衡考慮。

---

四、 CSS放在頁面最上面、JavaScript放在頁面最下面

　 瀏覽器會在下載徹底部CSS以後纔對整個頁面進行渲染，所以最好的作法是將CSS放在頁面最上面，讓瀏覽器儘快下載CSS，HTML規範清楚指出CSS要放包含在頁面的區域內。JavaScript則相反，瀏覽器在加載JavaScript後當即執行，有可能會阻塞整個頁面，形成頁面顯示緩慢，所以JavaScript最好放在頁面最下面，但若是頁面解析時就須要用到JavaScript，這裏放在底部就不合適了。
　　JavaScript是瀏覽器中的霸主，爲何這麼說，由於在瀏覽器在執行JavaScript代碼時，不能同時作其它事情，即<script>標籤每次出現都會讓頁面等待腳本的解析和執行（不論JavaScript是內嵌的仍是外鏈的），JavaScript代碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。由於這個阻塞的特色，建議把JavaScript代碼放到</body>標籤之前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

---

五、 精簡CSS和JS文件

 

　 有一條很是重要的準則一直沒有提到，就是CSS和JavaScript的壓縮，直接減小下載的文件體積。我我的常用的方式是使用 YUI Compressor，它的特色是：移除註釋；移除額外的空格；細微優化；標識符替換。
　　YUI Compressor是java程序，若是你對java很熟悉的話可快速的上手使用yuicompressor.jar；若是你對java很陌生也不要緊，同樣可使用YUI Compressor。
　　以我本身的yuicompressor-2.4.2.jar爲例：
　　1.壓縮JS

java -jar yuicompressor-2.4.2.jar api.js > api.min.js

• 1

　　2.壓縮CSS

java -jar yuicompressor-2.4.2.jar style.css > style.min.css

• 1

---

六、減小對DOM的操做

　 對DOM操做的代價是高昂的，這在網頁應用中的一般是一個性能瓶頸，天生就慢。在《高性能JavaScript》中這麼比喻：「把DOM當作一個島嶼，把JavaScript(ECMAScript)當作另外一個島嶼，二者之間以一座收費橋鏈接」。因此每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。因此通常建議儘可能減小過橋次數。
　　 修改和訪問DOM元素會形成頁面的重繪和重排，循環對DOM操做更是罪惡的行爲。 因此請合理的使用JavaScript變量儲存內容，考慮大量DOM元素中循環的性能開銷，在循環結束時一次性寫入。減小對DOM元素的查詢和修改，查詢時可將其賦值給局部變量。

---

七、正確理解Repaint和Reflow

　 Repaint 和 Reflow 也就是重繪和重排，Repaint(重繪)就是在一個元素的外觀被改變，但沒有改變佈局(寬高)的狀況下發生，如改變visibility、outline、背景色等等。
　　Reflow(重排)就是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器會從新計算元素的幾何屬性，會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的全部其它結點的visibility屬性，這也是Reflow低效的緣由。如：改變窗囗大小、改變文字大小、內容的改變、瀏覽器窗口變化，style屬性的改變等等。若是Reflow的過於頻繁，CPU使用率就會噌噌的往上漲，因此前端也就有必要知道 Repaint 和 Reflow的知識。
　　上面提到經過設置style屬性改變結點樣式的話，每設置一次都會致使一次reflow，因此最好經過設置class的方式；有動畫效果的元素，它的position屬性應當設爲fixed或absolute，這樣不會影響其它元素的佈局；若是功能需求上不能設置position爲fixed或absolute，那麼就權衡速度的平滑性。
　　總之，由於 Reflow 有時確實不可避免，因此只能儘量限制Reflow的影響範圍。

---

八、使用JSON格式進行數據交換

 

　 JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。
　　與XML序列化相比，JSON序列化後產生的數據通常要比XML序列化後數據體積小，因此在Facebook等知名網站中都採用了JSON做爲數據交換方式。
　　在JSON中，有兩種結構：對象和數組。
　　1. 一個對象以 「 { 」 開始，「 } 」 結束。每一個「名稱」後跟一個 「 : 」 ；「名稱/值 對」之間使用 「 , 」（逗號）分隔。 名稱用引號括起來；值若是是字符串則必須用引號括起來，數值型則不須要。如：

var obj={"name":"darren","age":24,"location":"beijing"} ; 

• 1

　　2. 數組是值（value）的有序集合。一個數組以 「 [ 」 開始， 「 ] 」 結束。值之間使用 「 , 」 （逗號）分隔。如：

var jsonlist=[{"name":"darren","age":24,"location":"beijing"},{"name":"weidong.nie","age":24,"location":"hunan"}];; 

• 1

　　對這種數組和對象字面量的操做是很是方便且高效的。若是預先知道JSON結構的狀況下，使用JSON進行數據傳遞簡直是太美妙了，能夠寫出很實用美觀可讀性強的代碼。若是你是純粹的前臺開發人員，必定會很是喜歡JSON。

---

九、減小Cookie傳輸

　 一方面，Cookie包含在每次請求和響應中，太大的Cookie會嚴重影響數據傳輸，所以哪些數據須要寫入Cookie須要慎重考慮，儘可能減小Cookie中傳輸的數據量。另外一方面對於某些靜態資源的訪問，如CSS、Script等，發送Cookie沒有意義，能夠考慮靜態資源使用獨立域名訪問，避免請求靜態資源時發送Cookie，減小Cookie傳輸的次數。
　 由於Cookie是本地的磁盤文件，每次瀏覽器都會去讀取相應的Cookie，因此建議去除沒必要要的Coockie，使Coockie體積儘可能小以減小對用戶響應的影響；
　　使用Cookie跨域操做時注意在適應級別的域名上設置coockie以便使子域名不受其影響。
　　Cookie是有生命週期的，因此請注意設置合理的過時時間，合理地Expire時間和不要過早去清除coockie，都會改善用戶的響應時間。

---

十、使用CDN加速

　 CDN的全稱是Content Delivery Network，即內容分發網絡。
　 CDN本質仍然是一個緩存，並且將數據緩存在離用戶最近的地方，使用戶以最快的速度獲取數據。
　　因爲CDN部署在網絡運營商的桐廬，這些運營商又是終端用戶的網絡服務提供商，所以用戶請求路由的第一跳就到達了CDN服務器，當CDN中存在瀏覽器請求的資源時，從CDN直接返回瀏覽器，最短路徑返回響應，加快用戶訪問速度，減小數據中心負載壓力。 CDN可以緩存的通常是靜態資源，如圖片、文件（例如視頻）、CSS、Script腳本、靜態網頁等，這些文件訪問頻率很高（例如NBA總決賽這些的熱門視頻文件），將其緩存在CDN可極大改善網頁的打開速度。 
　　實時性不太好是CDN的缺陷。隨着對CDN需求的逐漸升溫，這一缺陷將獲得改進， 使來自於遠程服務器的網絡內容網頁與副本服務器或緩存器中的網頁保持同步。解決方法是在網絡內容發生變化時將新的網絡內容從服務器端直接傳送到緩存器，或者當對網絡內容的訪問增長時將數據源服務器的網絡內容儘量實時地複製到緩存服務器。 

---

小結

　　前端攻城師這個職位正愈來愈受到各個互聯網公司的重視，身邊也有愈來愈多的朋友加入到前端開發這個崗位上。

　　因爲如今本人表達能力和技術能力上的欠缺，不免有理解不對的地方，也請你們多多諒解。