JS執行機制 瀏覽器快取

2021-09-12 20:50:07 字數 1314 閱讀 9479

1. dcotype及作用

dtd:告訴瀏覽器是什麼文件型別(xml/html),決定哪種協議來解析 及切換瀏覽器模式

dcotype:用來宣告文件型別和dtd規範,乙個主要用途是檔案的合法性驗證。若檔案**不合法,那麼瀏覽器解析時便會出錯。

dcotype型別和寫法

2. 瀏覽器渲染過程

3. 重拍reflow

定義:dom結構中的各個元素都有自己的盒子(模型),這些都需要瀏覽器根據各種樣式來計算並根據計算結果將元素放到它該出現的位置,這個過程稱之為reflow

觸發reflow

4. 重繪repaint

定義:當各種盒子的位置、大小及其他屬性如字型、顏色等都確定下來後,瀏覽器把這些元素都按照各自的特性繪製了一遍,於是頁面內容出現了,這個過程叫做repaint

觸發repaint

5. 布局layoutjs是單執行緒的,即js在同一時間只能做一件事。

event loop(事件迴圈)

同步任務放在執行棧中,非同步任務不會放在執行棧中,而是拿走,同步任務執行完後,時間到了,定時器會把任務放到非同步任務中去,js引擎發現執行棧中的同步任務執行完畢,就會去非同步佇列中的非同步任務放到執行棧中,變成執行同步任務。

非同步任務開啟

1. 提公升頁面效能的方法

2. 非同步載入

非同步載入的方式:

非同步載入的區別:

3. 瀏覽器快取

1)快取分類:

強快取:直接從瀏覽器拿來用,不請求伺服器獲取檔案

http協議頭:

協商快取:

http協議頭:

1. 前端錯誤的分類:

2. 錯誤的捕獲方式:

1) 即時執行錯誤:

2) 資源載入錯誤:

3. 上報錯誤的基本原理:

(new image()).src = '路徑及資料';

js執行機制(瀏覽器多程序)

瀏覽器的每個tab相當於乙個程序,可在瀏覽器的任務管理器中檢視,如下 在這裡瀏覽器應該也有自己的優化機制,有時候開啟多個tab頁後,可以在chrome任務管理器中看到,有些程序被合併了 所以每乙個tab標籤對應乙個程序並不一定是絕對的 瀏覽器多程序設計的優勢 1.充分利用瀏覽器的多核優勢 2.避免單...

瀏覽器快取機制

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時,通常考慮的就是書不是瀏覽器做了快取呢,按ctrl f5重新請求一次就能請求到沒有快取的頁面,這個是為什麼呢。首先,ctrl f5組合鍵重新整理頁面,那麼瀏覽器會直接向目標url傳送請求,而不再使用瀏覽器快取的資料。其次,當請求到達伺服器端依然有可能出現使用伺服器端的資...