前端性能優化分析及方法

時間 2019-11-29

原文原文鏈接

1、請減小HTTP請求css

一、基本原理前端

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

二、解決辦法正則表達式

合併圖片（css sprites），合併CSS和JS文件；圖片較多的頁面也可使用 lazyLoad 等技術進行優化。跨域

2、請正確理解 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中，有兩種結構：對象和數組。
5、請使用JSON格式來進行數據交換

一、基本原理

HTML是一門用來描述網頁的一種語言，它使用標記標籤來描述網頁，做爲一名合格的前端開發，你有必要去知道其經常使用標籤表明的含義(SEO)和屬性(表現形式)。
CSS指層疊樣式表 (Cascading Style Sheets)，若是說把頁面想象成一我的，HTML就是人的骨架，CSS就是人的衣裝，一我的的品味從他的衣裝就能一目瞭然。
一名專業的前端開發也是一名優秀的重構，由於在頁面中常常會有各類不合理的嵌套和重複定義的CSS樣式，我不是要你重構頁面，只是但願你在碰到這種狀況的時候解決這些問題。如這樣的HTML：
<table><tr><td>
   <table><tr><td>
      ...
   </td></tr></table>
</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。

固然，使用方式不可能只有一種，感興趣的朋友可多去嘗試下。

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，都會改善用戶的響應時間。

11、注Javascript代碼優化

除了上文提到的減小dom操做，注意Reflow & Repaint外，這裏再補充另外幾個注意事項。

A、減小做用域鏈查找

這一點在循環中是尤爲須要注意的問題。若是在循環中須要訪問非本做用域下的變量時請在遍歷以前用局部變量緩存該變量，並在遍歷結束後再重寫那個變量，這一點對全局變量尤爲重要，由於全局變量處於做用域鏈的最頂端，訪問時的查找次數是最多的。以下圖：

此外，要減小做用域鏈查找還應該減小閉包的使用。

B、數據訪問

Javascript中的數據訪問包括直接量 (字符串、正則表達式 )、變量、對象屬性以及數組，其中對直接量和局部變量的訪問是最快的，對對象屬性以及數組的訪問須要更大的開銷。當出現如下狀況時，建議將數據放入局部變量：
　　a. 對任何對象屬性的訪問超過 1次
　　b. 對任何數組成員的訪問次數超過 1次
另外，還應當儘量的減小對對象以及數組深度查找。

C、字符串拼接

在 Javascript中使用」+」號來拼接字符串效率是比較低的，由於每次運行都會開闢新的內存並生成新的字符串變量，而後將拼接結果賦值給新變量。與之相比更爲高效的作法是使用數組的 join方法，即將須要拼接的字符串放在數組中最後調用其 join方法獲得結果。不過因爲使用數組也有必定的開銷，所以當須要拼接的字符串較多的時候能夠考慮用此方法。