WEB前端效能優化小結

Galary_GY發表於2016-05-05
原文網址 : https://blog.csdn.net/Galary_GY/article/details/51324147
Web前端優化

1. 請減少HTTP請求

基本原理：

在瀏覽器(客戶端)和伺服器發生通訊時，就已經消耗了大量的時間，尤其是在網路情況比較糟糕的時候，這個問題尤其的突出。

一個正常HTTP請求的流程簡述：如在瀏覽器中輸入"www.xxxxxx.com"並按下回車，瀏覽器再與這個URL指向的伺服器建立連線，然後瀏覽器才能向伺服器傳送請求資訊，伺服器在接受到請求的資訊後再返回相應的資訊，瀏覽器接收到來自伺服器的應答資訊後，對這些資料解釋執行。

而當我們請求的網頁檔案中有很多圖片、CSS、JS甚至音樂等資訊時，將會頻繁的與伺服器建立連線，與釋放連線，這必定會造成資源的浪費，且每個HTTP請求都會對伺服器和瀏覽器產生效能負擔。

網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。所以，請減少HTTP請求。

解決辦法：

合併圖片（css sprites），合併CSS和JS檔案；圖片較多的頁面也可以使用 lazyLoad 等技術進行優化。
2. 請正確理解 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的影響範圍。
3. 請減少對DOM的操作

基本原理：

對DOM操作的代價是高昂的，這在網頁應用中的通常是一個效能瓶頸。

天生就慢。在《高效能JavaScript》中這麼比喻：“把DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋連線”。所以每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。所以一般建議儘量減少過橋次數。

解決辦法：


修改和訪問DOM元素會造成頁面的Repaint和Reflow，迴圈對DOM操作更是罪惡的行為。所以請合理的使用JavaScript變數儲存內容，考慮大量DOM元素中迴圈的效能開銷，在迴圈結束時一次性寫入。

減少對DOM元素的查詢和修改，查詢時可將其賦值給區域性變數。

注：在IE中:hover會降低響應速度。
4. 使用JSON格式來進行資料交換

基本原理：

JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式，是理想的資料交換格式。同時，JSON是 JavaScript原生格式，這意味著在 JavaScript 中處理 JSON資料不需要任何特殊的 API 或工具包。

與XML序列化相比，JSON序列化後產生的資料一般要比XML序列化後資料體積小，所以在Facebook等知名網站中都採用了JSON作為資料交換方式。

JS操作JSON：

在JSON中，有兩種結構： 物件和陣列。

1. 一個物件以 “ { ”  開始，“ } ” 結束。每個“名稱”後跟一個 “ : ” ；“名稱/值 對”之間使用 “ ,  ”（逗號）分隔。 名稱用引號括起來；值如果是字串則必須用引號括起來，數值型則不需要。如：

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

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

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

對這種陣列和物件字面量的操作是非常方便且高效的。如果預先知道JSON結構的情況下，使用JSON進行資料傳遞簡直是太美妙了，可以寫出很實用美觀可讀性強的程式碼。如果你是純粹的前臺開發人員，一定會非常喜歡JSON。
5. 高效使用HTML標籤和CSS樣式

基本原理：

HTML是一門用來描述網頁的一種語言，它使用標記標籤來描述網頁，作為一名合格的前端開發，你有必要去知道其常用標籤代表的含義(SEO)和屬性(表現形式)。

CSS指層疊樣式表 (Cascading Style Sheets)，如果說把頁面想象成一個人，HTML就是人的骨架，CSS就是人的衣裝，一個人的品味從他的衣裝就能一目瞭然。

一名專業的前端開發也是一名優秀的重構，因為在頁面中經常會有各種不合理的巢狀和重複定義的CSS樣式，我不是要你重構頁面，只是希望你在碰到這種情況的時候解決這些問題。如這樣的HTML：
1
        <table><tr><td>
2
           <table><tr><td>
3
              ...
4
           </td></tr></table>
5
        </td></tr></table>

或者這樣的CSS:

body .box .border ul li p strong span{color:#000}

以上都是對HTML和CSS非常糟糕的使用方法。
正確理解：

HTML是一門標記語言，使用合理的HTML標籤前你必須瞭解其屬性，比如Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。

CSS是用來渲染頁面的，也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的，這裡對css選擇符按照開銷從小到大的順序梳理一下：

ID選擇符 #box

類選擇符 .box

標籤 div

偽類和偽元素 a:hover

當頁面被觸發引起迴流（reflow）的時候，低效的選擇符依然會引發更高的開銷，所以請避免低效。
6. 使用CDN加速（內容分發網路）

基本原理：

CDN的全稱是Content Delivery Network，即內容分發網路。

"其基本思路是儘可能避開網際網路上有可能影響資料傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的網際網路基礎之上的一層智慧虛擬網路，CDN系統能夠實時地根據網路流量和各節點的連線、負載狀況以及到使用者的距離和響應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。" - 百度百科。

上面幾句話有多少能安安心心看完的，所以我還是通過說故事再來介紹一遍吧，順便補一句，故事出處不明，^_^：

古代打仗大家一定都知道，由於古代的交通很不發達，所以當外族進攻的時候往往不能及時的反擊，等朝廷徵完兵再把兵派往邊境的時候那些侵略者卻是早已不見了蹤影，這個讓古代的帝王很是鬱悶。後來帝王們學聰明瞭，都將大量的兵員提前派往邊境駐紮，讓他們平時屯田，戰時當兵，這樣的策略起到了很顯著的作用。
不足之處：

實時性不太好是CDN的致命缺陷。隨著對CDN需求的逐漸升溫，這一缺陷將得到改進，使來自於遠端伺服器的網路內容網頁與複本伺服器或快取器中的網頁保持同步。解決方法是在網路內容發生變化時將新的網路內容從伺服器端直接傳送到快取器，或者當對網路內容的訪問增加時將資料來源伺服器的網路內容儘可能實時地複製到快取伺服器。 
7. 將CSS和JS放到外部檔案中引用，CSS放頭，JS放尾
基本原理：

注：這個是很基礎且必須遵循的知識點，可是為了文章的完整性勉為其難加進來吧，嘿嘿。

引入外部檔案好處是顯而易見的，而且是專案稍稍複雜一點的時候就有必要了這樣做了。

易維護、易擴充套件，方便管理和重複利用。
正確的方式：

JavaScript是瀏覽器中的霸主，為什麼這麼說，因為在瀏覽器在執行JavaScript程式碼時，不能同時做其它事情，即<script>每次出現都會讓頁面等待指令碼的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript程式碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。

因為這個阻塞的特點，建議把JavaScript程式碼放到</body>標籤以前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

HTML規範清楚指出CSS要放包含在頁面的<head>區域內，這裡就不多解釋了。
8. 精簡CSS和JS檔案
基本原理：

有一條非常重要的準則一直沒有提到，就是CSS和JavaScript的壓縮，直接減少下載的檔案體積。我個人經常使用的方式是使用 YUI Compressor，它的特點是：移除註釋；移除額外的空格；細微優化；識別符號替換。

YUI Compressor是java程式，如果你對java很熟悉的話可快速的上手使用yuicompressor.jar；如果你對java很陌生也沒關係，一樣可以使用YUI Compressor，下面介紹其使用方式。
YUI Compressor的配置和使用：

先配置使用環境：

1.先確保電腦中是否安裝了JDK

2.再配置必要的環境變數(細節不能三兩句說清，所以不知道如何設定還是搜尋吧)

3.在cmd介面，輸入javac可測試是否安裝成功

使用方法可從cmd到進入yuicompressor.jar所在磁碟，我以自己的yuicompressor-2.4.2.jar為例：

1.壓縮JS

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

2.壓縮CSS

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

Web前端效能優化

當然，還有另一種更傻瓜式的使用方式，趕興趣的朋友自己可去多嘗試下。
9. 壓縮圖片和使用圖片Sprite技術

基本原理:

注：其實壓縮圖片和圖片精靈是兩個方面的技術，可是既然都是關於圖片的優化還是放到一塊吧。

現在由於工作的細分，專業的前端工程師已經少有機會去切圖了，可是關於圖片壓縮還是得略微瞭解，一般圖片壓縮的方式有：

1.縮小圖片解析度；

2.改變圖片格式；

3.降低圖片儲存質量。

關於圖片精靈(Sprite)技術就和我們工作直接相關，不管是在CSS中的圖片還是在HTML結構中的圖片都會產生HTTP請求，前端優化的第一條就是減少請求數，最直接有效的方法是使用圖片精靈（CSS Sprite）。圖片精靈就是把許多圖片放到一張大圖片裡面，通過CSS來顯示圖片的一部分。

至於圖片精靈的操作細節就不多做介紹了，網上相關內容很多。
10. 注意控制Cookie大小和汙染
基本原理和使用方法：

有關Cookie的基礎和高階知識可以去看本人寫過的一篇文章《JavaScript 操作 Cookie》。

因為Cookie是本地的磁碟檔案，每次瀏覽器都會去讀取相應的Cookie，所以建議去除不必要的Coockie，使Coockie體積儘量小以減少對使用者響應的影響；

使用Cookie跨域操作時注意在適應級別的域名上設定coockie以便使子域名不受其影響；

Cookie是有生命週期的，所以請注意設定合理的過期時間，合理地Expire時間和不要過早去清除coockie，都會改善使用者的響應時間。

相關文章