對於 Web 效能優化

2021-09-21 06:04:05 字數 828 閱讀 2189

(1)減少 http 請求的次數。我們知道每次傳送http請求,建立連線和等待相應會花去相當一部分時間,所以在傳送http請求的時候,儘量減少請求的次數,一次請求能取出的資料就不要分多次傳送。

注意: 此處說的是儘量減少請求的次數,建立連線和等待會消耗時間,但是如果一次性請求大量資料,web端不能得到很好使用者體驗,將會得不償失。js中也沒有多執行緒,所以這裡應當合理選擇。

(2)啟用瀏覽器快取,當確定請求的資料不會發生變化時,能夠直接讀瀏覽器快取的就不要向服務端傳送請求。比如我們ajax裡面有乙個引數能夠設定請求的時候是否啟用快取,這種情況下就需要我們在傳送請求的時候做好相應的快取處理。

(3)css檔案放 在裡面,js檔案盡量放在頁面的底部。因為請求js檔案是很花費時間,如果放在裡面,就會導致頁面的 dom樹呈現需要等待js檔案載入完成。這也就是為什麼很多**的原始碼裡面看到引用的檔案放在最後的原因。

(4)使用壓縮的css和js檔案。這個不用多說,網路流量小。

(5)如果條件允許,盡量使用cdn的方式引用檔案,這樣就能減少網路流量。比如我們常用的**

(6)在寫js和css的語法時,盡量避免重複的css,儘量減少js裡面迴圈的次數,諸如此類。

(1)程式的優化:這是乙個很大的話題,我這裡就選幾個常見的。比如減少**的層級結構、避免迴圈巢狀、避免迴圈curd資料庫、優化演算法等等。

(2)資料庫的優化:(由於資料庫優化不是本題重點,所以可選幾個主要的來說)比如啟用資料庫快取、常用的字段建索引、盡量避免大事務操作、避免select * 的寫法、盡量不用in和not in 這種耗效能的用法等等。

(3)伺服器優化:(這個可作為可選項)負載均衡、web伺服器和資料庫分離、ui和service分離等等。

Web效能優化

我們先來看乙個瀑布圖來確定乙個頁面效能問題是由哪些項造成的。chorome 自帶開發人員工具 圖中每一行表示乙個 請求,每乙個請求都有一條時間線,用於標識這個請求所花費的時間。如果將滑鼠放到某一條時間線上,可以看到以下資訊 1 首先看一下哪個請求花費的時間比較長,看看這個請求的時間線資訊,確定是伺服...

web效能優化

可以用gulp的gulp uglify gulp minify css模組完成 還可以用webpack的uglifyjsplugin壓縮外掛程式完成。通過css sprites將多個整合到乙個中,在用css來定位。伺服器在處理大流量的資料是十分困難的,這最終導致頁面載入速度變慢。cdn是位於全球不同...

web 效能優化

優化方向有兩個 http 請求 js 載入 開啟瀏覽器控制台的網路,可以看到從拉取模版開始到首次渲染中間到底在載入什麼,如果中間某些資源載入速度過慢,則可以從這方面入手,否則的話有可能是解析 js 速度過慢導致。請求優化 合理使用快取 合理使用快取,降低請求等待的時間,可以通過達到效能優化 cdn ...