什么是性能優化?
就是讓用戶感覺你的網站加載速度很快。。。哈哈哈。
分析
讓我們來分析一下從用戶按下回車鍵到網站呈現出來經歷了哪些和前端相關的過程。
- 緩存 首先看本地是否有緩存,如果有符合使用條件的緩存則不需要向服務器發送請求了。
- DNS查詢
- 建立TCP鏈接
- 發送HTTP請求
****** 后臺進行相關處理,前端等待 ****** - 接收緩存
- 接受完成,瀏覽器開始解析HTML
- 瀏覽器按行解析HTML,首先解析DOCTYPE,看是HTML還是XML。。。
- 不同的瀏覽器解析完一行,做出的響應不一樣,有的會直接渲染有的則等到完全解析完(包括css)再進行渲染。
- CSS在渲染的時候Chrome會阻塞HTML渲染,IE不會。JS則一定會阻塞HTML的解析。注意有最大同時下載數量。
對策
對DNS ---- 減少DNS查詢次數(盡量少的域名)
對TCP鏈接
- 連接復用 ---- 在請求頭中設置
xhr.setRequestHeader("Connection", "keep-alive");
大量的連接每次連接關閉都要三次握手四次分手的很顯然會造成性能低下,因此http有一種叫做keepalive connections的機制,它可以在傳輸數據后仍然保持連接,當客戶端需要再次獲取數據時,直接使用剛剛空閑下來的連接而不需要再次握手。
- 因為發送請求時會帶上cookie,所以可以減小其體積來優化速度,再就是用沒有cook ie的域名(比如CDN)
- 服務器端設置cache-control,在設置的時間內可以直接不發請求。
- 同時發送多個請求,請求的數量限制是對于一個域名來說,因此可以適當的增加請求的域名來減少下載的排隊時間。
對接收響應
- 使用Etag,服務器將接收到的Etag值與服務器存儲的值做對比,如果相同則返回304,可以盡量少的減少傳輸的體積。
- 在請求頭中設置
Accept-Encoding: gzip, deflate
,這樣服務器傳送給客戶端的就是gzip編碼的response(文件后綴是.gz)。
其他優化方法
- 將CSS放到
<head>
,將js文件放到<body>
的最后面。CSS放前面是因為可以讓頁面一加載出來就可以有樣式,而且有的瀏覽器即使放在最后他也要等到css加載完才顯示頁面。而js放在最后是因為他會阻塞HTMl的渲染。在HTML渲染之前準備好js,我們的js也獲取不到DOM節點,而且沒有js我們的頁面一般也不會有礙觀瞻。 - 懶加載
- 預加載
- 避免空src的圖片
接下來說一下CDN
CDN即Content Delivery Network(內容分發網絡)。CDN是構建在網絡之上的內容分發網絡,依靠部署在各地的邊緣服務器,通過中心平臺的負載均衡、內容分發、調度等功能模塊,使用戶就近獲取所需內容,降低網絡擁塞,提高用戶訪問響應速度和命中率。