1、 減少HTTP請求

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

一個正常HTTP請求的流程簡述：如在瀏覽器中輸入”www.xxxxxx.com”并按下回車，瀏覽器再與這個URL指向的服務器建立連接，然后瀏覽器才能向服務器發送請求信息，服務器在接受到請求的信息后再返回相應的信息，瀏覽器接收到來自服務器的應答信息后，對這些數據解釋執行。

HTTP協議是無狀態的應用層協議，意味著每次HTTP請求都需要建立通信鏈路、進行數據傳輸，當我們請求的網頁文件中有很多圖片、CSS、JS甚至音樂等信息時，將會頻繁的與服務器建立連接并釋放連接，這必定會造成資源的浪費，而在服務端，每個HTTP都需要啟動獨立的線程去處理，這些通信和服務的開銷都很昂貴，每個HTTP請求都會對服務器和瀏覽器產生性能負擔。

網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。

減少HTTP的主要手段是合并CSS、合并JavaScript、合并圖片。將瀏覽器一次訪問需要的JavaScript、CSS合并成一個文件，這樣瀏覽器只需要一次請求。圖片也可以合成，多張圖片合并成一張，如果每張圖片都有不同的超鏈接，可通過CSS偏移響應鼠標點擊操作，構造不同的URL。

2、 使用瀏覽器緩存

對一個網站而言，CSS、JavaScript、Logo、圖標這些靜態資源文件更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都需要的，如果將這些文件緩存在瀏覽器中，可以極好地改善性能。通過設置HTTP頭中的Cache-Control和Expires屬性，可設定瀏覽器緩存，緩存時間可以是數天，甚至是數月。

在某些時候，靜態資源文件變化需要及時應用到客戶端瀏覽器，這種情況，可以通過改變文件名實現 ，即更新JavaScript文件并不是更新JavaScript文件內容，而是生成現代戰爭新的JS文件并更新HTML文件中的引用。

使用瀏覽器緩存策略的網站在更新靜態資源時，應采用分批次更新的方法，比如需要更新10個圖標文件，不宜把10個文件一次全部更新，而應該一個文件一個文件逐步更新，并有一定的間隔時間，以免用戶瀏覽器突然大量緩存失效，集中更新緩存，造成服務器負載驟增，網絡堵塞的情況。 　　

3、服務端啟用壓縮

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

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

瀏覽器會在下載完全部CSS之后才對整個頁面進行渲染，因此最好的做法是將CSS放在頁面最上面，讓瀏覽器盡快下載CSS，HTML規范清楚指出CSS要放包含在頁面的區域內。JavaScript則相反，瀏覽器在加載JavaScript后立即執行，有可能會阻塞整個頁面，造成頁面顯示緩慢，因此JavaScript最好放在頁面最下面，但如果頁面解析時就需要用到JavaScript，這里放在底部就不合適了。

JavaScript是瀏覽器中的霸主，為什么這么說，因為在瀏覽器在執行JavaScript代碼時，不能同時做其它事情，即<script>標簽每次出現都會讓頁面等待腳本的解析和執行（不論JavaScript是內嵌的還是外鏈的），JavaScript代碼執行完成后，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。因為這個阻塞的特點，建議把JavaScript代碼放到</body>標簽以前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

5、 精簡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

2.壓縮CSS

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

6、減少對DOM的操作

對DOM操作的代價是高昂的，這在網頁應用中的通常是一個性能瓶頸，天生就慢。在《高性能JavaScript》中這么比喻：“把DOM看成一個島嶼，把JavaScript(ECMAScript)看成另一個島嶼，兩者之間以一座收費橋連接”。所以每次訪問DOM都會教一個過橋費，而訪問的次數越多，交的費用也就越多。所以一般建議盡量減少過橋次數。

修改和訪問DOM元素會造成頁面的重繪和重排，循環對DOM操作更是罪惡的行為。 所以請合理的使用JavaScript變量儲存內容，考慮大量DOM元素中循環的性能開銷，在循環結束時一次性寫入。減少對DOM元素的查詢和修改，查詢時可將其賦值給局部變量。

7、正確理解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的影響范圍。

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

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

與XML序列化相比，JSON序列化后產生的數據一般要比XML序列化后數據體積小，所以在Facebook等知名網站中都采用了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。

9、減少Cookie傳輸

一方面，Cookie包含在每次請求和響應中，太大的Cookie會嚴重影響數據傳輸，因此哪些數據需要寫入Cookie需要慎重考慮，盡量減少Cookie中傳輸的數據量。另一方面對于某些靜態資源的訪問，如CSS、Script等，發送Cookie沒有意義，可以考慮靜態資源使用獨立域名訪問，避免請求靜態資源時發送Cookie，減少Cookie傳輸的次數。

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

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

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

10、使用CDN加速

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

CDN本質仍然是一個緩存，而且將數據緩存在離用戶最近的地方，使用戶以最快的速度獲取數據。

由于CDN部署在網絡運營商的桐廬，這些運營商又是終端用戶的網絡服務提供商，因此用戶請求路由的第一跳就到達了CDN服務器，當CDN中存在瀏覽器請求的資源時，從CDN直接返回瀏覽器，最短路徑返回響應，加快用戶訪問速度，減少數據中心負載壓力。 CDN能夠緩存的一般是靜態資源，如圖片、文件（例如視頻）、CSS、Script腳本、靜態網頁等，這些文件訪問頻率很高（例如NBA總決賽這些的熱門視頻文件），將其緩存在CDN可極大改善網頁的打開速度。

實時性不太好是CDN的缺陷。隨著對CDN需求的逐漸升溫，這一缺陷將得到改進， 使來自于遠程服務器的網絡內容網頁與副本服務器或緩存器中的網頁保持同步。解決方法是在網絡內容發生變化時將新的網絡內容從服務器端直接傳送到緩存器，或者當對網絡內容的訪問增加時將數據源服務器的網絡內容盡可能實時地復制到緩存服務器。

小結

前端攻城師這個職位正越來越受到各個互聯網公司的重視，身邊也有越來越多的朋友加入到前端開發這個崗位上，要了解更多關于Web前端性能優化點建議請查看下面的相關鏈接