[[262302]]

性能優化是一門大學問，本文僅對個人一些積累知識的闡述，歡迎下面補充。

拋出一個問題，從輸入url地址欄到所有內容顯示到界面上做了哪些事？

•  1.瀏覽器向 DNS 服務器請求解析該 URL 中的域名所對應的 IP 地址;
•  2.建立TCP連接（三次握手）;
•  3.瀏覽器發出讀取文件(URL 中域名后面部分對應的文件)的HTTP 請求，該請求報文作為 TCP 三次握手的第三個報文的數據發送給服務器;
•  4.服務器對瀏覽器請求作出響應，并把對應的 html 文本發送給瀏覽器;
•  5.瀏覽器將該 html 文本并顯示內容;
•  6.釋放 TCP連接（四次揮手）;

上面這個問題是一個面試官非常喜歡問的問題，我們下面把這6個步驟分解，逐步細談優化。

一、DNS 解析

•  DNS`解析:將域名解析為ip地址 ,由上往下匹配，只要便停止
  •   走緩存
  •   瀏覽器DNS緩存
  •   本機DNS緩存
  •   路由器DNS緩存
  •   網絡運營商服務器DNS緩存 （80%的DNS解析在這完成的）
  •   遞歸查詢

優化策略：盡量允許使用瀏覽器的緩存，能給我們節省大量時間。

二、TCP的三次握手

•  SYN （同步序列編號）ACK（確認字符）
  •   第一次握手：Client將標志位SYN置為1，隨機產生一個值seq=J，并將該數據包發送給Server，Client進入SYN_SENT狀態，等 待Server確認。
  •   第二次握手：Server收到數據包后由標志位SYN=1知道Client請求建立連接，Server將標志位SYN和ACK都置為1，ack=J+1，隨機產生一個值seq=K，并將該數據包發送給Client以確認連接請求，Server進入SYN_RCVD狀態。
  •   第三次握手：Client收到確認后，檢查ack是否為J+1，ACK是否為1，如果正確則將標志位ACK置為1，ack=K+1，并將該數據包發送給Server，Server檢查ack是否為K+1，ACK是否為1，如果正確則連接建立成功，Client和Server進入ESTABLISHED狀態，完成三次握手，隨后Client與Server之間可以開始傳輸數據了。

三、瀏覽器發送請求

優化策略:

•  1.HTTP協議通信最耗費時間的是建立TCP連接的過程，那我們就可以使用HTTP Keep-Alive，在HTTP 早期，每個HTTP 請求都要求打開一個TCP socket連接，并且使用一次之后就斷開這個TCP連接。 使用keep-alive可以改善這種狀態，即在一次TCP連接中可以持續發送多份數據而不會斷開連接。通過使用keep-alive機制，可以減少TCP連接建立次數，也意味著可以減少TIME_WAIT狀態連接，以此提高性能和提高http服務器的吞吐率(更少的tcp連接意味著更少的系統內核調用
•  2.但是，keep-alive并不是免費的午餐,長時間的TCP連接容易導致系統資源無效占用。配置不當的keep-alive，有時比重復利用連接帶來的損失還更大。所以，正確地設置keep-alive timeout時間非常重要。(這個keep-alive_timout時間值意味著：一個http產生的tcp連接在傳送完最后一個響應后，還需要hold住keepalive_timeout秒后，才開始關閉這個連接)，如果想更詳細了解可以看這篇文章keep-alve性能優化的測試結果

•  3.使用webScoket通信協議，僅一次TCP握手就一直保持連接，而且他對二進制數據的傳輸有更好的支持，可以應用于即時通信，海量高并發場景。webSocket的原理以及詳解
•  4.減少HTTP請求次數，每次HTTP請求都會有請求頭，返回響應都會有響應頭，多次請求不僅浪費時間而且會讓網絡傳輸很多無效的資源，使用前端模塊化技術 AMD CMD commonJS ES6等模塊化方案將多個文件壓縮打包成一個，當然也不能都放在一個文件中，因為這樣傳輸起來可能會很慢，權衡取一個中間值
•  5.配置使用懶加載，對于一些用戶不立刻使用到的文件到特定的事件觸發再請求，也許用戶只是想看到你首頁上半屏的內容，但是你卻請求了整個頁面的所有圖片，如果用戶量很大，那么這是一種極大的浪費
•  6.服務器資源的部署盡量使用同源策略

四、服務器返回響應，瀏覽器接受到響應數據

一直沒想到這里使用什么優化手段，今晚想到了，使用Nginx反向代理服務器，主要是對服務器端的優化。

•  Nginx是一款輕量級的Web 服務器/反向代理服務器及電子郵件（IMAP/POP3）代理服務器，并在一個BSD-like 協議下發行。其特點是占有內存少，并發能力強，事實上nginx的并發能力確實在同類型的網頁服務器中表現較好，中國大陸使用nginx網站用戶有：百度、京東、新浪、網易、騰訊、淘寶等。
•  Nginx 是一個安裝非常的簡單、配置文件非常簡潔（還能夠支持perl語法）、Bug非常少的服務。Nginx 啟動特別容易，并且幾乎可以做到7*24不間斷運行，即使運行數個月也不需要重新啟動。你還能夠不間斷服務的情況下進行軟件版本的升級。
•  它可以：解決跨域，請求過濾，配置gzip，負載均衡，靜態資源服務器 等...
•  把服務窗口想像成我們的后端服務器，而后面終端的人則是無數個客戶端正在發起請求。負載均衡就是用來幫助我們將眾多的客戶端請求合理的分配到各個服務器，以達到服務端資源的充分利用和更少的請求時間。

•  Nginx如何實現負載均衡
  •   nginx如何實現負載均衡   

Upstream指定后端服務器地址列表  
   upstream balanceServer {  
       server 10.1.22.33:12345;  
       server 10.1.22.34:12345;  
       server 10.1.22.35:12345;  
   }  
   復制代碼在server中攔截響應請求，并將請求轉發到Upstream中配置的服務器列表。  
       server {  
           server_name  fe.server.com;  
           listen 80;  
           location /api {  
               proxy_pass http://balanceServer;  
           }  
       } 

•  上面的配置只是指定了nginx需要轉發的服務端列表，并沒有指定分配策略。
•  默認情況下采用的策略，將所有客戶端請求輪詢分配給服務端。這種策略是可以正常工作的，但是如果其中某一臺服務器壓力太大，出現延遲，會影響所有分配在這臺服務器下的用戶。
•  最小連接數策略

將請求優先分配給壓力較小的服務器，它可以平衡每個隊列的長度，并避免向壓力大的服務器添加更多的請求。   

upstream balanceServer {  
       least_conn; //配置壓力較小的服務器  
       server 10.1.22.33:12345;  
       server 10.1.22.34:12345;  
       server 10.1.22.35:12345;  
   } 

•  依賴于NGINX Plus，優先分配給響應時間最短的服務器。 

upstream balanceServer {  
    fair; //配置響應時間最短的服務器  
    server 10.1.22.33:12345;  
    server 10.1.22.34:12345;  
    server 10.1.22.35:12345;  
} 

•  客戶端ip綁定 

來自同一個ip的請求永遠只分配一臺服務器，有效解決了動態網頁存在的session共享問題。  
upstream balanceServer {  
    ip_hash; //配置1個IP永遠只分配一臺服務器  
    server 10.1.22.33:12345;  
    server 10.1.22.34:12345;  
    server 10.1.22.35:12345;  
} 

•  配置靜態資源服務器 

location ~* \.(png|gif|jpg|jpeg)$ {  
    root    /root/static/;    
    autoindex on;  
    access_log  off;  
    expires     10h;# 設置過期時間為10小時    
 }  
復制代碼匹配以png|gif|jpg|jpeg為結尾的請求，  
并將請求轉發到本地路徑，root中指定的路徑即nginx  
本地路徑。同時也可以進行一些緩存的設置

•  Nginx解決跨域 

nginx解決跨域的原理  
例如：  
前端server的域名為：fe.server.com  
后端服務的域名為：dev.server.com  
現在我在fe.server.com對dev.server.com發起請求一定會出現跨域。  
現在我們只需要啟動一個nginx服務器，將server_name設置為fe.server.com,  
然后設置相應的location以攔截前端需要跨域的請求，最后將請求代理回dev.server.com。  
如下面的配置：  
server {  
        listen       80;  
        server_name  fe.server.com;  
        location / {  
                proxy_pass dev.server.com;  
        }  
}  
復制代碼這樣可以完美繞過瀏覽器的同源策略：fe.server.com訪問nginx的fe.server.com  
屬于同源訪問，而nginx對服務端轉發的請求不會觸發瀏覽器的同源策略。 

•     最重要的一點來了，現在的網站大都使用了這種配置：
  
  •       配置GZIP  
    
    •   GZIP是規定的三種標準HTTP壓縮格式之一。目前絕大多數的網站都在使用GZIP傳輸 HTML、CSS、JavaScript 等資源文件。
    •   對于文本文件，GZip 的效果非常明顯，開啟后傳輸所需流量大約會降至 1/4 ~ 1/3。
    •   啟用 GZip 所需的HTTP 最低版本默認值為HTTP/1.1
    •   啟用gzip同時需要客戶端和服務端的支持，如果客戶端支持gzip的解析，那么只要服務端能夠返回gzip的文件就可以啟用gzip了,我們可以通過nginx的配置來讓服務端支持gzip。下面的respone中content-encoding:gzip，指服務端開啟了gzip的壓縮方式。
  •         具體可以看這篇文字文章 Nginx配置GZIP

對于文本文件，GZip 的效果非常明顯，開啟后傳輸所需流量大約會降至 1/4 ~ 1/3。 

Nginx功能非常強大，配置也非常方便，有興趣的可以多看看這篇文章 Nginx解析 

五、瀏覽器解析數據，繪制渲染頁面的過程

•  先預解析（將需要發送請求的標簽的請求發出去）
•  從上到下解析html文件
•  遇到HTML標簽，調用html解析器將其解析DOM樹
•  遇到css標記，調用css解析器將其解析CSSOM樹
•  link 阻塞 - 為了解決閃屏，所有解決閃屏的樣式
•  style 非阻塞，與閃屏的樣式不相關的
•  將DOM樹和CSSOM樹結合在一起，形成render樹
•  layout布局 render渲染
•  遇到script標簽，阻塞，調用js解析器解析js代碼，可能會修改DOM樹，也可能會修改CSSOM樹
•  將DOM樹和CSSOM樹結合在一起，形成render樹
•  layout布局 render渲染（重排重繪）
•  script標簽的屬性
  •   async 異步 誰先回來誰就先解析，不阻塞
  •   defer 異步 按照先后順序（defer）解析，不阻塞
  •   script標簽放在body下，放置多次重排重繪，能夠操作dom

性能優化策略：

•  需要阻塞的樣式使用link引入，不需要的使用style標簽(具體是否需要阻塞看業務場景)
•  圖片比較多的時候，一定要使用懶加載，圖片是最需要優化的，webpack4中也要配置圖片壓縮，能極大壓縮圖片大小，對于新版本瀏覽器可以使用webp格式圖片webP詳解，圖片優化對性能提升大。
•  webpack4配置 代碼分割，提取公共代碼成單獨模塊。方便緩存   

/*  
    runtimeChunk 設置為 true, webpack 就會把 chunk 文件名全部存到一個單獨的 chunk 中，  
    這樣更新一個文件只會影響到它所在的 chunk 和 runtimeChunk，避免了引用這個 chunk 的文件也發生改變。  
    */  
    runtimeChunk: true,   
    splitChunks: {  
      chunks: 'all'  // 默認 entry 的 chunk 不會被拆分, 配置成 all, 就可以了  
    }  
  }  
    //因為是單入口文件配置，所以沒有考慮多入口的情況，多入口是應該分別進行處理。 

•  對于需要事件驅動的webpack4配置懶加載的，可以看這篇webpack4優化教程,寫得非常全面
•  一些原生javaScript的DOM操作等優化會在下面總結

六、TCP的四次揮手，斷開連接

終結篇：性能只是 load 時間或者 DOMContentLoaded 時間的問題嗎？

•  RAIL
  •   Responce 響應，研究表明，100ms內對用戶的輸入操作進行響應，通常會被人類認為是立即響應。時間再長，操作與反應之間的連接就會中斷，人們就會覺得它的操作有延遲。例如：當用戶點擊一個按鈕，如果100ms內給出響應，那么用戶就會覺得響應很及時，不會察覺到絲毫延遲感。
  •   Animaton 現如今大多數設備的屏幕刷新頻率是60Hz，也就是每秒鐘屏幕刷新60次；因此網頁動畫的運行速度只要達到60FPS，我們就會覺得動畫很流暢。
  •   Idle RAIL規定，空閑周期內運行的任務不得超過50ms，當然不止RAIL規定，W3C性能工作組的Longtasks標準也規定了超過50毫秒的任務屬于長任務，那么50ms這個數字是怎么得來的呢？瀏覽器是單線程的，這意味著同一時間主線程只能處理一個任務，如果一個任務執行時間過長，瀏覽器則無法執行其他任務，用戶會感覺到瀏覽器被卡死了，因為他的輸入得不到任何響應。為了達到100ms內給出響應，將空閑周期執行的任務限制為50ms意味著，即使用戶的輸入行為發生在空閑任務剛開始執行，瀏覽器仍有剩余的50ms時間用來響應用戶輸入，而不會產生用戶可察覺的延遲。
  •   Load如果不能在1秒鐘內加載網頁并讓用戶看到內容，用戶的注意力就會分散。用戶會覺得他要做的事情被打斷，如果10秒鐘還打不開網頁，用戶會感到失望，會放棄他們想做的事，以后他們或許都不會再回來。

如何使網頁更絲滑？

•   使用requestAnimationFrame
  •    即便你能保證每一幀的總耗時都小于16ms，也無法保證一定不會出現丟幀的情況，這取決于觸發JS執行的方式。假設使用 setTimeout 或 setInterval 來觸發JS執行并修改樣式從而導致視覺變化；那么會有這樣一種情況，因為setTimeout 或 setInterval沒有辦法保證回調函數什么時候執行，它可能在每一幀的中間執行，也可能在每一幀的最后執行。所以會導致即便我們能保障每一幀的總耗時小于16ms，但是執行的時機如果在每一幀的中間或最后，最后的結果依然是沒有辦法每隔16ms讓屏幕產生一次變化，也就是說，即便我們能保證每一幀總體時間小于16ms，但如果使用定時器觸發動畫，那么由于定時器的觸發時機不確定，所以還是會導致動畫丟幀。現在整個Web只有一個API可以解決這個問題，那就是requestAnimationFrame，它可以保證回調函數穩定的在每一幀最開始觸發。

•   避免FSL
  
  •    先執行JS，然后在JS中修改了樣式從而導致樣式計算，然后樣式的改動觸發了布局、繪制、合成。但JavaScript可以強制瀏覽器將布局提前執行，這就叫 強制同步布局FSL。 

//讀取offsetWidth的值會導致重繪  
            const newWidth = container.offsetWidth;    
              //設置width的值會導致重排，但是for循環內部  
             代碼執行速度極快，當上面的查詢操作導致的重繪  
             還沒有完成，下面的代碼又會導致重排，而且這個重  
             排會強制結束上面的重繪，直接重排，這樣對性能影響  
             非常大。所以我們一般會在循環外部定義一個變量，這里  
             面使用變量代替container.offsetWidth;  
            boxes[i].style.width = newWidth + 'px';  
           }      

•   使用transform屬性去操作動畫，這個屬性是由合成器單獨處理的，所以使用這個屬性可以避免布局與繪制。
•   使用translateZ(0)開啟圖層，減少重繪重排。特別在移動端，盡量使用transform代替absolute。創建圖層好的方式是使用will-change，但某些不支持這個屬性的瀏覽器可以使用3D 變形（transform: translateZ(0)）來強制創建一個新層。
•   有興趣的可以看看這篇文字 前端頁面優化
•   樣式的切換提前定義好class，通過class的切換批量修改樣式，避免多次重繪重排
•   可以先切換display:none再修改樣式
•   多次的append 操作可以先插入到一個新生成的元素中，再一次性插入到頁面中。
•   代碼復用，函數柯里化，封裝高階函數，將多次復用代碼封裝成普通函數（俗稱方法），React中封裝成高階組件，ES6中可以使用繼承，TypeScript中接口繼承，類繼承，接口合并，類合并。
•   強力推薦閱讀:阮一峰ES6教程
•   以及什么是TypeScript以及入門

以上都是根據本人的知識點總結得出，后期還會有更多性能優化方案等出來，路過點個贊收藏收藏~，歡迎提出問題補充~

下面加入React的性能優化方案:

•  在生命周期函數shouldComponentUpdate中對this.state和prev state進行淺比較，使用for-in循環遍歷兩者，

只要得到他們每一項值，只要有一個不一樣就返回true，更新組件。

•  定義組件時不適用React.component , 使用PureComponent代替，這樣React機制會自動在shouldComponentUpdate中進行淺比較，決定是否更新。
•  上面兩條優化方案只進行淺比較，只對比直接屬性的值，當然你還可以在上面加入this.props和prevprops的遍歷比較，因為shouldComponentUpdate的生命周期函數自帶這兩個參數。如果props 和 state 的值比較復雜，那么可以使用下面這種方式去進行深比較。
•     解決：
  •   保證每次都是新的值
  •   使用 immutable-js 庫，這個庫保證生成的值都是獨立的       

var map1 = Immutable.Map({ a: 1, b: 2, c: 3 });  
        var map2 = map1.set('b', 50);  
        map1.get('b'); // 2  
        map2.get('b'); // 50 

•  總結：使用以上方式，可以減少不必要的重復渲染。
•  React的JSX語法要求必須包裹一層根標簽，為了減少不必要的DOM層級，我們使用Fragment標簽代替，這樣渲染時候不會渲染多余的DOM節點，讓DIFF算法更快遍歷。
•  使用Redux管理全局多個組件復用的狀態。
•  React構建的是SPA應用，對SEO不夠友好，可以選擇部分SSR技術進行SEO優化。
•  對Ant-design這類的UI組件庫，進行按需加載配置，從import Button from 'antd' 的引入方式，變成import {Button} from antd的方式引入。（類似Babel7中的runtime和polifill的區別）.