聊浏览器渲染过程
网络
-
DNS(domain name system)
- Host
- 缓存
- 浏览器 操作系统(hosts) ISP
- 缓存
- Host
-
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
- HEAD
-
浏览器渲染
- 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
- HTML解析过程
