學習了一段時間React，想真實的實踐一下。於是便把我的個人博客網站進行了重構。花了大概一週多時間，網站倒是重構的比較成功，但是一上線啊，那個訪問速度啊，是真心慢，慢到自己都不能忍受，那麼小一個網站，沒幾篇文章，慢成那樣，不能接受。我不是一個追求完美的人，但這樣可不行。後面大概花了一點時間進行性能的研究。才發現慢是有原因的。
React這類框架？
目前主流的前端框架React、Vue、Angular都是採用客戶端渲染（服務端渲染暫時不在本文的考慮範圍內）。這當然極大的減輕了服務器的壓力。相對的瀏覽器的壓力就增加了。這就意味着大量的js文件需要在本地運行。而從服務器下載這些大的js文件需要時間。再運行這些js又需要時間。這是首頁加載慢的本質原因。當然只是首頁，因爲後續有緩存的存在，相對就很快了。那麼如何提升速度呢？無非從兩個方向入手
- 提高下載靜態資源的速度
- 優化代碼提高運行速度
在具體優化之前先說說我博客網站的服務器配置。
- 阿里雲服務器ECS
- 系統Ubuntu 16.04
- CPU：1核
- 內存：1GB
- MYSQL數據庫
- Nginx版本1.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/css text/xml application/javascript 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過程中需要耗費些時間，如果文章內容很大，這個時間也是不容忽視的。
測試了這篇JavaScript數組和字符串的常用方法以及其簡單算法字數比較多的文章，竟然花費了我整整100多ms，按照慣例這也是不能容忍的。
這種情況我們在保存markdown的時候就可以直接保存兩份數據，一份原markdown數據，一份markdown轉成html後的數據。頁面渲染的時候直接獲轉換後的html代碼，這樣節約了轉換時間。
我們還可以利用React的懶加載，在用webpack打包的時候進行代碼的分割，減少首屏加載的體積。
當然加載過程中提升用戶體驗也是重要的一環，雖然不能有效的提升運行速度，但可以使用戶更加愉悅。所謂歡樂不覺時光過嘛。
該文章會持續更新，只要有更好的提升性能的方法，我就會在自己博客網站上去實踐。
博客網站是採用antd+umi+dva阿里全家桶開發的，博客地址https://www.immisso.com
本人能力有限，是一個持續學習者。如果大家還有更多的優化方法請也留言教教我。。。
後續我也會把博客網站代碼開源出來。