瀏覽器相關機制

皮蛋和豆樹發表於2019-07-09
瀏覽器

瀏覽器相關機制

  • DOCTYPE 是什麼以及作用

<!DOCTYPE html>
複製程式碼

在說 DOCTYPE 之前呢 還是有一個概念要先闡述一下 就是DTD(Document type defintion) 文件型別定義 DTD 是一系列的語法規則 用來定義 XML 或者 HTML 的檔案型別 瀏覽器會使用它來判斷文件型別 決定使用何種協議來解析以及切換瀏覽器模式

定義看起來挺高大尚甚至有點複雜 其實說人話 就是 DTD 用於告訴瀏覽器這是啥文件 讓瀏覽器知道用什麼模板去解析 有點類似於大家平時生活裡用導航去到某一個地方 DTD 就是你輸入的地點 瀏覽器則對應導航軟體

DOCTYPE:用來宣告文件型別和 DTD 規範的,一個主要的用途就便是檔案的合法性驗證 如果檔案程式碼不合法 那麼瀏覽器解析便會出一些差錯

說人話就是 DOCTYPE 通知瀏覽器當前的文件是包含了哪個文件型別(DTD)

  • 瀏覽器的渲染過程

  • HTML -> 轉為 DOM Tree
  • Style -> 轉為 CSS Tree
  • Layout 通過 CSS Tree 精確計算螢幕上每個 dom 的位置 大小 顏色之類
  • DOM Tree + CSS Tree -> 轉為 Render Tree 這個 Render Tree 也就是 Dom Tree 和 CSS Tree 結合起來的 Tree
  • Painting -> 瀏覽器開始通過上面的這些進行渲染

  • Display -> 顯示成像

  • 重排(Reflow)

  • 什麼是重排: DOM 結構中的各個元素都有自己的盒子模型 這些都需要瀏覽器根據各種樣式來計算並根據結果將元素放到它該出現的位置 這個過程就是重排 簡單點一句話概括就是 瀏覽器繪製 DOM 的過程 就是重排

  • 觸發 Reflow 的情況

    • 增加、刪除、修改DOM節點時 會導致重排或者重繪
    • 當移動Dom的位置 或者有動畫的情況
    • 當修改CSS樣式的時候
    • 當觸發瀏覽器的Resize或者是Scroll
    • 修改網頁的預設字型 (特別不推薦頁面渲染完以後 修改網頁的字型)

  • 重繪(Repaint)

  • 什麼是重繪: 當各種盒子的位置、大小以及其他屬性都確定以後 瀏覽器把元素按照各自特性繪製 這個過程就是重繪 概括一下就是 頁面要呈現的內容 統統都已經畫在螢幕上了

  • 觸發Repaint的情況:

    • DOM改動
    • CSS改動
    • 其實就是 頁面顯示的內容如果發生變化 一定就會觸發瀏覽器的重繪

提升頁面效能的方法

  • 資源壓縮合並 減少Http請求

  • 非核心程式碼非同步載入 -> 非同步載入的方式 -> 非同步載入的區別

    • 非同步載入的方式

    1. 動態指令碼載入
    var scprit = document.createElement('script')
scrpit.type = 'text/javascript'
document.body.apped(script)
複製程式碼
    1. defer 在script標籤上新增這個屬性
    2. async 同上

    • 非同步載入的區別

    1. defer是在HTML解析完之後才執行 如果是多個 按照載入順序依次執行
    2. async是在載入完之後立即執行 如果是多個 執行順序和載入順序無關

  • 利用瀏覽器快取 -> 快取的分類 -> 快取的原理

    • 快取的分類

    • 概念: 快取 => 各資原始檔在瀏覽器中的備份 其實就可以理解成 資原始檔存在了本地 直接從本地讀取 而不是再次請求
    1. 強快取 (覽器不會詢問 而是直接就用)
    // http-header中的兩個欄位 一個是過期時間 這個是伺服器的絕對時間
Expiress Expires:Thu, 9 Jul 2019 20:26:30 GMT
// 另一個是相對時間 也就是客戶端在1000秒之內不會再請求伺服器 
Cache-Control Cache-Control:max-age=1000
複製程式碼
    1. 協商快取 (瀏覽器發現本地有檔案 但是不確定是否使用 需要詢問伺服器)
    Last-Modified
If-Modified-Since
Etag
If-None-Match
複製程式碼

  • 使用CDN

  • 預解析DNS

// 大部分的瀏覽器在http協議下 預設開啟預解析 但是在https協議下不會
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">
// 強制開啟預解析
<meta http-equiv="x-dns-prefetch-control" content="on">
複製程式碼

相關文章