頁面效能 待完善

2021-09-12 12:14:36 字數 3372 閱讀 6702

本文是學習慕課網上課程前端跳槽面試必備技巧的學習筆記,便於之後複習。本文說明頁面效能的方法:

資源壓縮合併,減少http請求

非核心**非同步載入   //非同步載入的方式  非同步載入的區別

利用瀏覽器快取(很關鍵的一步) // 快取的分類 //快取的原理

使用cdn

預解析dns

標籤在很多瀏覽器中預設開啟預解析 , 如果是https協議開頭的 很多瀏覽器中預設關閉預解析

方式:動態指令碼載入 、defer、async

defer

async

區別:

defer是在html解析完成後才會執行,如果是多個,按照載入的順序依次執行

async是在載入完之後立即執行,如果是多個,執行順序和載入順序無關

瀏覽器快取(brower caching)是瀏覽器在本地磁碟對使用者最近請求過的文件進行儲存,當訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁碟載入文件。

快取主要分為強快取協商快取

瀏覽器在第一次請求發生後,再次請求時:

瀏覽器會先獲取該資源快取的header資訊,根據其中的expires和cache-control判斷是否命中強快取),若命中則直接從快取中獲取資源,包括快取的header資訊,本次請求不會與伺服器進行通訊; 

如果沒有命中強快取,瀏覽器會傳送請求到伺服器,該請求會攜帶第一次請求返回的有關快取的header欄位資訊(last-modified/if-modified-since、etag/if-none-match),由伺服器根據請求中的相關header資訊來對比結果是否命中協商快取,若命中,則伺服器返回新的響應header資訊更新快取中的對應header資訊,但是並不返回資源內容,它會告知瀏覽器可以直接從快取獲取;否則返回最新的資源內容。

強快取是利用http的返回頭中的expires或者cache-control兩個欄位來控制的,用來表示資源的快取時間。瀏覽器直接從快取中獲取資源,而不經過伺服器。

expires

expires:thu,21 jan 2017 23:39:02 gmt   // 資源過期時間 是伺服器的絕對時間

這是http1.0時的規範;它的值為乙個絕對時間的gmt格式的時間字串。如果傳送請求的時間在expires之前,那麼本地快取始終有效,否則就會傳送請求到伺服器來獲取資源。

cache-control

cache-control:max-age=3600 // 相對時間 請求到資源後,以本地時間為準,3600s內不再請求伺服器,直接訪問瀏覽器快取

這是http1.1時出現的header資訊,主要是利用該字段的max-age值來進行判斷,它是乙個相對值;資源第一次的請求時間和cache-control設定的有效期,計算出乙個資源過期時間,再拿這個過期時間跟當前的請求時間比較,如果請求時間在過期時間之前,就能命中快取,否則就不行。

注意:如果cache-control與expires同時存在的話,cache-control的優先順序高於expires

向伺服器傳送請求,伺服器會根據這個請求的request header的一些引數來判斷是否命中協商快取,如果命中,則返回304狀態碼並帶上新的response header通知瀏覽器從快取中讀取資源。即第一次請求的響應頭帶上某個字段(last-modified或者etag),則後續請求則會帶上對應的請求字段(if-modified-since或者if-none-match)。

last-modify/if-modify-since

last-modified if-modified-since last-modified: wed, 21 jan 2017 23:39:02 gmt

瀏覽器第一次請求乙個資源的時候,伺服器返回的header中會加上last-modify,last-modify是乙個時間標識該資源的最後修改時間;當瀏覽器再次請求該資源時,request的請求頭中會包含if-modify-since(last-modify的值)。伺服器收到if-modify-since後,根據資源的最後修改時間判斷是否命中快取.如果在if-modify-since之後資源沒有被修改過,則命中。流程參考下圖▼

etag:是web伺服器響應請求時,告訴瀏覽器當前資源在伺服器的唯一標識,相當於版本id(生成規則由伺服器決定)。etag可以保證每乙個資源是唯一的,資源變化都會導致etag變化。

if-none-match:當資源過期時(使用cache-control標識的max-age),發現資源具有etage宣告,則再次向伺服器請求時帶上頭if-none-match (etag的值)。伺服器收到請求後發現有頭if-none-match 則與被請求資源的相應校驗串進行比對,決定是否命中協商快取;如果資源版本標識一致,則命中。

etag和last-modified的作用和用法,他們的區別:

1.etag要優於last-modified。last-modified的時間單位是秒,如果某個檔案在一秒內改變了多次,那麼他們的last-modified其實並沒有體現出來修改,但是etag每次都會改變確保了精度;

2.在效能上,etag要遜於last-modified,畢竟last-modified只需要記錄時間,而etag需要伺服器通過演算法來計算出乙個hash值;

3.在優先順序上,last-modified與etag是可以一起使用的,伺服器會優先驗證etag,一致的情況下,才會繼續比對last-modified,最後才決定是否返回304。

強快取和協商快取兩者的共同點是都從客戶端快取中讀取資源;區別是強快取不會發請求,協商快取會發請求。

使用者行為對快取的影響

本文參考瀏覽器快取:強快取和協商快取

diff命令 待完善

diff命令在最簡單的情況下,比較給定的兩個檔案的不同。如果使用 代替 檔案 引數,則要比較的內容將來自標準輸入。diff命令是以逐行的方式,比較文字檔案的異同處。如果該命令指定進行目錄的比較,則將會比較該目錄中具有相同檔名的檔案,而不會對其子目錄檔案進行任何比較操作。來自 diff命令在最簡單的情...

Windows HOOK總結 待完善

安裝鉤子 hhook winapi setwindowshookex 1,鉤子型別 in int idhook,2,函式位址,即掛鉤型別事件發生時,系統應該呼叫的函式 in hookproc lpfn,3,標識乙個dll,這個dll中包含第二個引數表示的函式 例項控制代碼 in hinstance ...

session筆記(待完善)

什麼是session 為什麼要用session 怎麼用在計算機專業術語中,session是指乙個終端使用者與互動系統進行通訊的時間間隔,通常指從註冊進入系統到登出退出系統之間所經過的時間。容易理解的就是 一次瀏覽器和伺服器的互動的會話,我開啟網頁,網頁向伺服器傳送了請求,伺服器再響應回來,就發生了一...