聊浏览器渲染过程

聊浏览器渲染过程

网络

• DNS(domain name system)

  • Host
    • 缓存
      • 浏览器 操作系统(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 -> 执行JS(阻塞)
  • 阻塞(js要操作DOM)
    • async defer (搜script async vs defer)
    • css 可以阻塞 js 执行
  • 渲染过程
    • DOM + CSSOM -> Render Tree(节点样式,对应关系) -> Layout(弄清每个对象在网页上的确切大小和位置) -> Paint(将渲染树转换成屏幕上的像素) -> Composite(处理透明元素和重叠元素的显示)
    • 触发reflow
      • 读(offsetTop,scrollTop,clientTop,getComputedStyle())
    • 只触发reflow(查csstriggers)
      • 不设计到布局更改 transform，color, border-style, background, outline, box-shadow