Web前端性能優化

1、CSS方面：

1.精簡css文件

　　移除額外的空格；細微優化等，減少文件體積。

2. 高效使用HTML標籤和CSS樣式
　　HTML是一門標記語言，使用合理的HTML標籤前你必須瞭解其屬性，好比Flow Elements，Metadata Elements ，Phrasing Elements。比較基礎的就是得知道塊級元素和內聯元素、盒模型、SEO方面的知識。
　　CSS是用來渲染頁面的，也是存在渲染效率的問題。CSS選擇符是從右向左進行匹配的，這裏對css選擇符按照開銷從小到大的順序梳理一下：
　　ID選擇符 #box
　　類選擇符 .box
　　標籤 div
　　僞類和僞元素 a:hover

　　body .box .border ul li p strong span{color:#000}
　　以上都是對HTML和CSS很是糟糕的使用方法。
　　當頁面被觸發引發迴流（reflow）的時候，低效的選擇符依然會引起更高的開銷，因此請避免低效。

3. 請正確理解 Repaint 和 Reflow，儘量限制Reflow的影響範圍。

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

2、JS方面：

1.精簡js文件

　　JavaScript的壓縮，直接減小下載的文件體積。

2.請減小對DOM的操做

　　對DOM操做的代價是高昂的，這在網頁應用中的一般是一個性能瓶頸。修改和訪問DOM元素會形成頁面的Repaint和Reflow，循環對DOM操做更是罪惡的行爲。因此請合理的使用JavaScript變量儲存內容，考慮大量DOM元素中循環的性能開銷，在循環結束時一次性寫入。減小對DOM元素的查詢和修改，查詢時可將其賦值給局部變量

3. 使用JSON格式來進行數據交換
　　JSON是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時，JSON是 JavaScript原生格式，這意味着在 JavaScript 中處理 JSON數據不須要任何特殊的 API 或工具包。
　　與XML序列化相比，JSON序列化後產生的數據通常要比XML序列化後數據體積小，因此在Facebook等知名網站中都採用了JSON做爲數據交換方式。

3、圖片方面

1.壓縮圖片大小

　　1.縮小圖片分辨率；
　　2.改變圖片格式；
　　3.下降圖片保存質量。

2.合併圖片（css sprites）

　　把許多圖片放到一張大圖片裏面，經過CSS來顯示圖片的一部分。

4、其它方面

1.減小HTTP請求

　　在瀏覽器(客戶端)和服務器發生通訊時，就已經消耗了大量的時間，尤爲是在網絡狀況比較糟糕的時候，這個問題尤爲的突出。
一個正常HTTP請求的流程簡述：如在瀏覽器中輸入"www.xxxxxx.com"並按下回車，瀏覽器再與這個URL指向的服務器創建鏈接，而後瀏覽器才能向服務器發送請求信息，服務器在接受到請求的信息後再返回相應的信息，瀏覽器接收到來自服務器的應答信息後，對這些數據解釋執行。
而當咱們請求的網頁文件中有不少圖片、CSS、JS甚至音樂等信息時，將會頻繁的與服務器創建鏈接，與釋放鏈接，這一定會形成資源的浪費，且每一個HTTP請求都會對服務器和瀏覽器產生性能負擔。
　　網速相同的條件下，下載一個100KB的圖片比下載兩個50KB的圖片要快。因此，請減小HTTP請求。
　　解決辦法：
　　合併圖片（css sprites），合併CSS和JS文件；圖片較多的頁面也可使用 lazyLoad 等技術進行優化。

2.將CSS和JS放到外部文件中引用，CSS放頭，JS放尾

　　引入外部文件好處是顯而易見的，並且是項目稍稍複雜一點的時候就有必要了這樣作了。易維護、易擴展，方便管理和重複利用。

　　在瀏覽器在執行JavaScript代碼時，不能同時作其它事情，即<script>每次出現都會讓頁面等待腳本的解析和執行（不論JavaScript是內嵌的仍是外鏈的），JavaScript代碼執行完成後，才繼續渲染頁面。這個也就是JavaScript的阻塞特性。由於這個阻塞的特色，建議把JavaScript代碼放到</body>標籤之前，這樣既能有效的防止JavaScript的阻塞，又能使得頁面的HTML結構能更快的釋放。

3. 注意控制Cookie大小和污染

　　由於Cookie是本地的磁盤文件，每次瀏覽器都會去讀取相應的Cookie，因此建議去除沒必要要的Coockie，使Coockie體積儘可能小以減小對用戶響應的影響；　　使用Cookie跨域操做時注意在適應級別的域名上設置coockie以便使子域名不受其影響；　　Cookie是有生命週期的，因此請注意設置合理的過時時間，合理地Expire時間和不要過早去清除coockie，都會改善用戶的響應時間。