頁面效能類

js頁面效能類

1.提公升頁面效能的方法有哪些？

示例：1.defer

兩個檔案： defer1.js console.log(『defer1』); defer2.js console.log(『defer2』); head頭部插入：body: //內聯到dom中的是做同步執行的 test 執行順序：先執行write，再執行for迴圈，最後執行非同步載入js

（defer1,defer2—在這非同步載入是等到同步載入之後執行的）

2.async

兩個檔案： async1.js console.log(『async1』); async2.js console.log(『async2』); head頭部插入：body: //內聯到dom中的是做同步執行的 test 執行順序：先執行write，再執行for迴圈，最後執行非同步載入js(因為是本地檔案，載入速度比較快，所以執行順序是按順序的)

如果把async1.js換成大的js檔案，async2.js檔案小，載入快，就有可能會在前面執行

利用瀏覽器快取—快取的分類—快取的原理；

1.快取的分類：

快取：對應檔案在瀏覽器中存在的備份（副本），把請求的東西快取到本地了（是放在電腦磁碟中的），瀏覽器下次請求相當於是從這個磁碟直接讀了，而不會再去請求這個檔案的位址。

1.強快取：

http協議頭： expires expires:thu,21 jan 2017 23:39:02 gmt

cache-control cahe-control : max-age=3600

強快取：問都不問，不直接請求，直接拿過來就用了；不管是絕對時間還是相對時間，這個時間過期之前不會和伺服器通訊了，直接從瀏覽器副本拿出來給頁面用；

http協議頭：在請求乙個檔案的時候，http頭上（響應頭上）會帶兩個東西（有可能是2個，也有可能是1個，根據伺服器配置）；響應頭中會有key，value expires 過期時間； value值表示的是絕對時間（伺服器的絕對時間，這個時間是伺服器下發的）判斷客戶端當前的時候是不是這個時間，比較的時候是按瀏覽器本地的時間做比較，下發的是伺服器端的時間，會有偏差；缺點：有可能客戶端和伺服器的時間不一致。 cache-control value值 max-age=3600（相對時間）不管客戶端和伺服器時間是否一致，它最後是以客戶端相對時間為止，時間單位是秒（拿到資源之後再3600s之內不會再去請求伺服器，在這個時間之內直接去瀏覽器拿快取） *如果伺服器兩個時間都下發了，依哪個時間為準呢？

以後者相對時間為準（這個規定）

2.協商快取：

last-modified if-modified-since last-modified:wed,26 jan 2017 00:35:11 gmt

etag if-none-match

協商快取：瀏覽器發現本地有這個副本，但是又不確定用不用它，去伺服器問乙個這個檔案要不要用（和伺服器協商這個檔案能不能用，過期沒有）

last-modified(伺服器下發的上次修改的時間) 在拿到這個檔案的時候，瀏覽器會給這個資源檔案的http響應頭中加乙個last-modified，value值就是時間； if-modified-since:(請求中給伺服器帶的，伺服器要對比，所以一來一回，兩個東西) 當強快取失效（過期了），瀏覽器在這個時間之外又開始請求了，不確定這個東西有沒有變化，要攜帶上次給的時間是哪乙個，請求的時候會以攜帶這個欄位的時間。（拿到新資源檔案，會通過last-modified下發乙個時間，當下次請求問伺服器這個資源有沒有發生變化，是用http請求頭中加if-modified-since（key值），他們兩個值是乙個） *缺點：雖然hash值變了，內容並沒有變化，完全可以從副本拿，etag就是解決這個問題的。 etag（雜湊值）：伺服器給你這個資源的時候會給乙個etag值，當過了強快取的時間，瀏覽器在問伺服器請求問它這個資源可不可以在用的時候，會通過這個http中加乙個key值（if-none-math）乙個value，那麼value就是發的那個etag值。

if-none-match

和快取相關的http頭有哪些？能寫出來幾個？

expires

cache-control

last-modified

etag

if-none-match

快取可以提公升效能；

頁面效能類

提公升頁面效能

前端頁面效能

頁面效能優化

頁面效能類

提公升頁面效能

前端 頁面效能

頁面效能優化

相關推薦

前端頁面效能