放大招了,直接搞定前端浏览器面试

461 阅读1分钟

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

导航流程

1. 构建请求 —— action:输入URL按下回车

2. 查找缓存(强缓存)

image.png

网络请求阶段

背景 image.png

TCP阶段

背景

TCP:传输控制协议(use in 传输层)

image.png

UDP:用户数据包协议(use in 传输层)

image.png

建立连接

连接准备:TCP头 + IP头

image.png

3. DNS解析(得到目标IP 应用层)

image.png

4. 等待TCP队列

image.png

5. 建立TCP连接:三次握手

image.png

6/7 数据传输(HTTP请求过程)

image.png

8. 断开TCP连接

HTTP背景
HTTP1.0

image.png

HTTP1.1

image.png

HTTP2.0

image.png

长连接(>=HTTP1.1):保持连接不断开,下一个请求复用

image.png

非长连接:四次挥手

image.png

HTTP阶段

6. 客户端发送HTTP请求

image.png

7. 服务端处理HTTP请求

image.png

9. 处理响应阶段

image.png

10. 提交导航

image.png

渲染流程

解析HTML

加载+计算 由渲染进程主线程完成

11. 构建DOM树

image.png

12. CSS计算

image.png

13. 布局(Layout)

image.png

渲染流水线

得到已计算的布局后进行渲染前流程,由渲染进程主线程之外的辅助线程完成

14. 绘制

image.png

15. 合成

image.png

16. 显示

image.png