聊瀏覽器渲染過程

聊瀏覽器渲染過程

網(wǎng)絡(luò)

  • DNS(domain name system)

    • Host
      • 緩存
        • 瀏覽器 操作系統(tǒng)(hosts) ISP

  • TCP(Transmission Control Protocol)

    • 三次握手
      • A -> B (a ->) SYN(x) synchronization(同步)
      • B -> A (b <- & b -> ) SYN(y) & ACK(x + 1)
      • A -> B (a <-) ACK(y + 1)
      • http
    • 四次揮手
      • A -> B FIN(x)
      • B -> A ACK(x + 1)
      • B -> A FIN(y)
      • A -> B ACK(y + 1)

  • HTTP(request & response)

    • HEAD
      • method
      • url
      • content-type
      • connection: keep-alive
      • Accept(req)
      • Host(req)
      • statusCode(res)
      • set-cookie(res)
      • content-encoding

  • 瀏覽器渲染

    • HTML解析過程
      • 下載HTML -> 解析HTML -> 下載CSS -> 解析CSS -> 下載JS -> 執(zhí)行JS(阻塞)
    • 阻塞(js要操作DOM)
      • async defer (搜script async vs defer)
      • css 可以阻塞 js 執(zhí)行
    • 渲染過程
      • DOM + CSSOM -> Render Tree(節(jié)點(diǎn)樣式,對應(yīng)關(guān)系) -> Layout(弄清每個(gè)對象在網(wǎng)頁上的確切大小和位置) -> Paint(將渲染樹轉(zhuǎn)換成屏幕上的像素) -> Composite(處理透明元素和重疊元素的顯示)
      • 觸發(fā)reflow
        • 讀(offsetTop,scrollTop,clientTop,getComputedStyle())
      • 只觸發(fā)reflow(查csstriggers)
        • 不設(shè)計(jì)到布局更改 transform，color, border-style, background, outline, box-shadow
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容