Web 性能優化

前記

很久都沒有寫博客了，罪過罪過，不能懶不能懶，此次記錄一下web的性能優化方法，說到性能優化，就不得不從當你輸入網址按下回車的那一刻提及

性能分治法

把大問題分紅小問題分別處理

按下回車發生了什麼

1. 固然是先去緩存中看看啦
2. 緩存沒有，那就先DNS查詢找IP地址
3. 找到IP地址先創建TCP連接
4. 創建後就能夠發送HTTP請求了
5. 後臺處理，咱們等待
6. 接收HTML文件
7. DOCTYPE 肯定解析的語法
8. 逐行解析
9. 有些標籤在不一樣瀏覽器上顯示
10. CSS同時下載，解析一個接一個（IE同時4個，谷歌同時6個）
11. JS並行下載，解析按順序，可是JS執行必定阻塞HTMl渲染
12. 以後就是構建DOM樹，CSS和JS了

解決方法

一、緩存

DNS查詢後會留下緩存，下次訪問後就會無需查詢，另外設置響應頭Cache-Control，使文件緩存，這樣只要網站文件不更改就可使用緩存

二、DNS查詢

DNS查詢會耗費時間，因此，咱們要優化就要減小DNS查詢，儘可能減小域名

三、創建TCP連接

每次發送HTTP請求都創建TCP鏈接的話就太耗費時間了，因此咱們可使用鏈接複用，只須要在HTTP請求頭加上keep-alive，在HTTP/2.0 甚至可使用多路複用

四、發送HTTP請求

咱們都知道發送請求是會帶上cookie的，因此減小cookie體積能夠加快發送速度，另外，瀏覽器是能夠同時發送多個請求，可是相同域名發送請求會有限制，因此咱們能夠增長域名，可是這樣就和第一步的解決方法衝突了，因而咱們須要本身來權衡利弊

五、接收響應

設置ETag，這樣只要響應文件未更改，就能夠返回一個304表示未更改，使用之前的文件，也可使用Gzip壓縮文件，下降文件大小，接收到後再解壓文件，這樣能夠加快下載速度

六、DOCTYPE

不能寫錯，這是肯定渲染語法的，必需要寫

七、CDN加速

使用CDN能夠增長同時請求數量，也能夠減小cookie體積，由於沒有cookie。使用CDN能夠加速，內容緩存在就近的地方，動態DNS，IP就近返回，內容分佈網絡，請求快

八、CSS放在head，JS放在body最後

之因此把link標籤放擡頭而script放body尾部，是由於瀏覽器遇到script標籤時，會去下載並執行js腳本，從而致使瀏覽器暫停構建DOM。然而JS腳本須要查詢CSS信息，因此JS腳本還必須等待CSSOM樹構建完才能夠執行。這將至關於CSS阻塞了JS腳本，JS腳本阻塞了DOM樹構建。是這樣子的關聯纔對。