Web 性能優化
原創
樑廣銘
2018-10-05 19:34
前記
好久都沒有寫博客了，罪過罪過，不能懶不能懶，這次記錄一下web的性能優化方法，說到性能優化，就不得不從當你輸入網址按下回車的那一刻說起
性能分治法
把大問題分成小問題分別處理
按下回車發生了什麼
- 當然是先去緩存中看看啦
- 緩存沒有，那就先DNS查詢找IP地址
- 找到IP地址先建立TCP鏈接
- 建立後就可以發送HTTP請求了
- 後臺處理，我們等待
- 接收HTML文件
- DOCTYPE 確定解析的語法
- 逐行解析
- 有些標籤在不同瀏覽器上顯示
- CSS同時下載，解析一個接一個（IE同時4個，谷歌同時6個）
- JS並行下載，解析按順序，但是JS執行一定阻塞HTMl渲染
- 之後就是構建DOM樹，CSS和JS了
解決方法
1、緩存
DNS查詢後會留下緩存，下次訪問後就會無需查詢，另外設置響應頭Cache-Control，使文件緩存，這樣只要網站文件不更改就可以使用緩存
2、DNS查詢
DNS查詢會耗費時間，所以，我們要優化就要減少DNS查詢，儘量減少域名
3、建立TCP鏈接
每次發送HTTP請求都建立TCP連接的話就太耗費時間了，所以我們可以使用連接複用，只需要在HTTP請求頭加上keep-alive，在HTTP/2.0 甚至可以使用多路複用
4、發送HTTP請求
我們都知道發送請求是會帶上cookie的，所以減少cookie體積可以加快發送速度，另外，瀏覽器是可以同時發送多個請求，但是相同域名發送請求會有限制，所以我們可以增加域名，但是這樣就和第一步的解決方法衝突了，於是我們需要自己來權衡利弊
5、接收響應
設置ETag，這樣只要響應文件未更改，就可以返回一個304表示未更改，使用以前的文件，也可以使用Gzip壓縮文件，降低文件大小，接收到後再解壓文件，這樣可以加快下載速度
6、DOCTYPE
不能寫錯，這是確定渲染語法的，必須要寫
7、CDN加速
使用CDN可以增加同時請求數量，也可以減少cookie體積，因爲沒有cookie。使用CDN可以加速，內容緩存在就近的地方，動態DNS，IP就近返回，內容分佈網絡，請求快
8、CSS放在head，JS放在body最後
之所以把link標籤放擡頭而script放body尾部，是因爲瀏覽器遇到script標籤時，會去下載並執行js腳本，從而導致瀏覽器暫停構建DOM。然而JS腳本需要查詢CSS信息，所以JS腳本還必須等待CSSOM樹構建完纔可以執行。這將相當於CSS阻塞了JS腳本，JS腳本阻塞了DOM樹構建。是這樣子的關聯纔對。
