React 首頁載入慢問題效能優化案例詳解
學習了一段時間React，想真實的實踐一下。於是便把我的個人部落格進行了重構。花了大概一週多時間，網站倒是重構的比較成功，但是一上線啊，那個訪問速度啊，是真心慢，慢到自己都不能忍受，那麼小一個網站，沒幾篇文章，慢成那樣，不能接受。我不是一個追求完美的人，但這樣可不行。後面大概花了一點時間進行效能的研究。才發現慢是有原因的。
React這類框架？
目前主流的前端框架React、、Angular都是採用客戶端渲染（服務端渲染暫時不在本文的考慮範圍內）。這當然極大的減輕了伺服器的壓力。相對www.cppcns.com的瀏覽器的壓力就增加了。這就意味著大量的檔案需要在本地執行。而從伺服器下載這些大的js檔案需要時間。再執行這些js又需要時間。這是首頁載入慢的本質原因。當然只是首頁，因為後續有快取的存在，相對就很快了。那麼如何提升速度呢？無非從兩個方向入手
- 提高下載靜態資源的速度
- 優化程式碼提高執行速度
在具體優化之前先說說我部落格網站的伺服器配置。
- 阿里雲伺服器ECS
- 系統Ubuntu 16.04UrYClptRHN
- CPU：1核
- 記憶體：1GB
- Nginx版本1http://www.cppcns.com.16.1
測試環境採用火狐瀏覽器,優化之前訪問速度是這樣的
是不是很慢，慢到懷疑人生。一篇兩千多字的博文頁面載入完需要6s的時間，下面我們就從我自己的部落格出發一步一步的進行優化。
提升下載靜態資源的速度
提升下載靜態資源的速度的方法有很多。升級HTTP1.1到HTTP2.0,開啟gzip資料壓縮，上cdn等，這些都是最有效提升速度的方法。自己的網站也主要從這些方面去一一的優化來提高速度的。
升級HTTP1.1到HTTP2
沒有升級之前是這樣的
升級到HTTP2.0之後是這樣的
那麼怎麼升級呢？升級也是需要條件的。
- openssl 1.0.2+ （OpenSSL 1.0.2 開始支援 ALPN）
- Nginx 1.9.5+
不知道nginx和openssl版本的可以通過
nginx -V
檢視,以上的條件滿足後，那就簡單了，只需要在nginx配置檔案中新增http2
server {
listen 443 ssl http2
.
.
.
}
即可，是不是很簡單，然後再重啟一下nginx伺服器就可以了。（該升級對訪問速度的提升不大。）
開啟gzip資料壓縮
從上面的圖中可以看出，傳輸列和大小列資料都是相等的，也就是說檔案多大，就傳輸多大，完全沒有壓縮，像其中1.4M這樣的大檔案，壓縮就很有必要了。更何況這還是一個簡單的部落格網站。這是拖慢速度的元凶之一。所以我們很有必要進行gzip壓縮。那麼我們怎麼開啟gzip呢？是不是很難？其實也很簡單，nginx原本就支援，我們只需要簡單的配置就好。同樣的修改nginx配置檔案
server {
listen 443 ssl http2
#...中間省略很多
gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/ text/xml application/ application/json;
}
其中
gzip on表示gzip壓縮開啟。gzip_buffers 32 4k表示處理請求壓縮的緩衝區數量和大小，可以不設定，使用預設值就好。gzip_comp_levelgzip壓縮級別,到了等級6之後就很難提高了。gzip_min_length當返回內容大於此值時才會使用gzip進行壓縮,以K為單位,當值為0時，所有頁面都進行壓縮gzip_types壓縮型別
同樣的再重啟一下nginx伺服器就好
從圖中可以看出，大大的提升了速度。再觀察傳輸和大小這一欄，兩者大小差異就很大了。完成了這兩步，速度已經從以前的6s減少到2秒左右了。
（該升級對訪問速度提升最大。）
注意： 當然更好的方法是使用cdn加速。把靜態資源cdn化。更能大大的提升速度。
優化程式碼提高執行速度
在多次請求測試中。發現依舊有很多檔案很小，但是執行起來卻相當耗時，當然這和React建立DOM樹等操作有關，不過我們還是可以再看看程式碼上有沒有其他可以優化的空間。對於這麼一個小網站來說也太慢了，我想我寫的程式碼一定有很耗時的操作，果不其然。網站中這段程式碼
const markdownHtml = marked(content_mark || '');
把markdown轉成html過程中需要耗費些時間，如果文章內容很大，這個時間也是不容忽視的。
測試了這篇JS陣列轉字串實現方法解析字數比較多的文章，竟然花費了我整整100多ms，按照慣例這也是不能容忍的。
這種情況我們在儲存markdown的時候就可以直接儲存兩份資料，一份原markdown資料，一份markdown轉成html後的資料。頁面渲染的時候直接獲轉換後的html程式碼，這樣節約了轉換時間。
我們還可以利用React的懶載入，在用webpack打包的時候進行程式碼的分割，減少首屏載入的體積。
當然載入過程中提升使用者體驗也是重要的一環，雖然不能有效的提升執行速度，但可以使使用者更加愉悅。所謂歡樂不覺時光過嘛。
到此這篇關於React 首頁載入慢問題效能優化案例詳解的文章就介紹到這了,更多相關React 首頁載入慢問題效能優化內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！