Web前端效能優化的8條建議,你知道幾條?

2021-10-08 20:33:33 字數 1184 閱讀 3256

一般**優化都是優化後台,如介面的響應時間、sql優化、後台**效能優化、伺服器優化等。高併發情況下,對前端web優化也是非常重要的。

1、html css js位置

一般需要將css放頁面最上面,即head部分,而將js**放頁面底部。因為頁面需要載入為css才進行渲染,而js如果不是在頁面載入之前就要執行就要放到頁面最底部,以免在頁面展示之前因js過多載入而影響頁面渲染速度。

2、引用檔案位置

有一些外掛程式需要引用到遠端的、css、js、圖示等,如果遠端的資源連線網速不佳,如國外的某些資源,會造成網頁阻塞,同樣也會造成頁面展示問題,盡量能把引用遠端的資源能本地化。

3、減少後台請求

每個請求都是耗費資源影響系統效能的,所以,能減少後台請求就減少。如,盡量的將同乙個資源(、js、css等)合併成乙個檔案,頁面只要請求一次即可,這樣就節省了很多http連線的開銷及往返的時間損耗。

另外一方面,如果是關於**、搖一搖、秒殺等功能,可以限制發往後臺的頻率,如前端操作10次才往後端發一次請求,這樣從前端就做到了後台的流量控制,把流量控制到訪問的最外層是最好的,盡量不要讓請求落到底層。

4、壓縮傳輸

http壓縮可以對純文字可以壓縮至原內容的40%, 從而節省了60%的資料傳輸,gzip是一種常用的壓縮編碼。因此,對文字型別的資源如css、js、html啟用gzip壓縮加速http傳輸速度。

5、減少cookie傳輸

cookie會包含在每次請求和響應中,如果cookie過多會影響http響應速度,所以高併發情況下盡量控制cookie的傳輸量,nginx對cookie傳輸預設是做了限制的。另外,像css、js、等靜態資源可以啟用單獨網域名稱,禁用cookie對靜態資源的傳輸,這樣就能大大提高效率。

6、瀏覽器快取

高併發情況下,可以將一些不怎麼變動的東西快取到瀏覽器cache中,或者一些活動內容可以提前將內容在客戶端快取起來,以免活動開始大量請求湧入伺服器。

7、cdn

之前的文章有講過cdn的概念,它就是乙個靜態內容分發網路,本質就是靜態資源的快取,可以將靜態資源放到cdn上,這樣,使用者就能離自己最近的地方獲取到資源,大大提高了使用者訪問速度。

8、反向**

常用的反向**nginx除了負載均衡功能,它也可以通過配置快取功能來加速請求響應速度,當使用者第一次訪問的時候靜態資源就可以被快取到反向**伺服器上,這樣其他使用者的請求就能直接從反向**伺服器直接獲取返回,這樣也就直到了靜態資源快取的作用。

web前端效能優化

01 減少http請求 使用css sprite 合併js css02 使用cdn 當頁面中有很多資源的時候可以從不同伺服器中讀取 設定長的expires時間將直接減少http請求 如果資源設定了expires頭為將來的某個時間,下次訪問時候瀏覽器 發現資源還沒有過期,會直接從快取中讀取,不會再次產...

web前端效能優化

一 網路相關的一切,包括dns解析 http請求等等 二 web優化,就是前端頁面相關部分,也就是我們日常擼 能夠做到的一些 1 設定dns多級快取 瀏覽器快取,系統快取,路由器快取,ips伺服器快取,根網域名稱伺服器快取,頂級網域名稱伺服器快取,主網域名稱伺服器快取。2 dns負載均衡 dns重定...

前端web效能優化

使用cdn 進行dns預解析 每個請求都需建立連線消耗一定時間,請求數越多則網頁載入時長越長。我們可以將資源盡可能的合併從而減少請求 合併,使用sprites精靈圖 css 檔案合併 動態指令碼載入 defer html解析完成後才執行,按載入順序依次執行 async 載入完立即執行,和載入順序無關...