當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web性能优化（理论）

發(fā)布時間：2023/11/29 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 web性能优化（理论）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

什么是性能優(yōu)化？

就是讓用戶感覺你的網(wǎng)站加載速度很快。。。哈哈哈。

分析

讓我們來分析一下從用戶按下回車鍵到網(wǎng)站呈現(xiàn)出來經(jīng)歷了哪些和前端相關(guān)的過程。

緩存首先看本地是否有緩存，如果有符合使用條件的緩存則不需要向服務(wù)器發(fā)送請求了。

DNS查詢

建立TCP鏈接

發(fā)送HTTP請求
****** 后臺進行相關(guān)處理，前端等待 ******

接收緩存

接受完成，瀏覽器開始解析HTML

瀏覽器按行解析HTML，首先解析DOCTYPE，看是HTML還是XML。。。
不同的瀏覽器解析完一行，做出的響應(yīng)不一樣，有的會直接渲染有的則等到完全解析完（包括css）再進行渲染。
CSS在渲染的時候Chrome會阻塞HTML渲染，IE不會。JS則一定會阻塞HTML的解析。注意有最大同時下載數(shù)量。

對策

對DNS ---- 減少DNS查詢次數(shù)（盡量少的域名）

對TCP鏈接

連接復(fù)用 ---- 在請求頭中設(shè)置 xhr.setRequestHeader("Connection", "keep-alive");

大量的連接每次連接關(guān)閉都要三次握手四次分手的很顯然會造成性能低下，因此http有一種叫做keepalive connections的機制，它可以在傳輸數(shù)據(jù)后仍然保持連接，當客戶端需要再次獲取數(shù)據(jù)時，直接使用剛剛空閑下來的連接而不需要再次握手。

因為發(fā)送請求時會帶上cookie，所以可以減小其體積來優(yōu)化速度，再就是用沒有cook ie的域名（比如CDN）

服務(wù)器端設(shè)置cache-control，在設(shè)置的時間內(nèi)可以直接不發(fā)請求。

同時發(fā)送多個請求，請求的數(shù)量限制是對于一個域名來說，因此可以適當?shù)脑黾诱埱蟮挠蛎麃頊p少下載的排隊時間。

對接收響應(yīng)

使用Etag，服務(wù)器將接收到的Etag值與服務(wù)器存儲的值做對比，如果相同則返回304，可以盡量少的減少傳輸?shù)捏w積。

在請求頭中設(shè)置Accept-Encoding: gzip, deflate,這樣服務(wù)器傳送給客戶端的就是gzip編碼的response（文件后綴是.gz）。

其他優(yōu)化方法

將CSS放到 <head>,將js文件放到 <body>的最后面。CSS放前面是因為可以讓頁面一加載出來就可以有樣式，而且有的瀏覽器即使放在最后他也要等到css加載完才顯示頁面。而js放在最后是因為他會阻塞HTMl的渲染。在HTML渲染之前準備好js，我們的js也獲取不到DOM節(jié)點，而且沒有js我們的頁面一般也不會有礙觀瞻。

懶加載

預(yù)加載

避免空src的圖片

接下來說一下CDN

CDN即Content Delivery Network(內(nèi)容分發(fā)網(wǎng)絡(luò))。CDN是構(gòu)建在網(wǎng)絡(luò)之上的內(nèi)容分發(fā)網(wǎng)絡(luò)，依靠部署在各地的邊緣服務(wù)器，通過中心平臺的負載均衡、內(nèi)容分發(fā)、調(diào)度等功能模塊，使用戶就近獲取所需內(nèi)容，降低網(wǎng)絡(luò)擁塞，提高用戶訪問響應(yīng)速度和命中率。

總結(jié)

以上是生活随笔為你收集整理的web性能优化（理论）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： puppet puppet模块、file
下一篇： 10.30PMP试题每日一题