从输入URL到渲染页面的整个过程(浏览器访问URL的完整流程)
1.解析URL、查询DNS
浏览器通过输入的url提取协议、域名、端口号等信息,检查本地缓存(包括浏览器缓存、操作系统缓存、路由器缓存)是否有对应的ip地址;
如果没有,则对本地DNS服务地进行递归查询,直到获取到目标IP地址
2.建立TCP连接(进行3次握手)
使用TCP协议与目标服务器建立连接,进行3次握手
- 客户端发送SYN
- 服务器回复SYN-ACK
- 客户端发送ACK,完成连接
如果是HTTPS协议,还要进行TLS握手,建立安全加密通道
3.发送HTTP请求
浏览器组装HTTP请求报文(包括请求行、请求头、请求体)
通过TCP连接,向服务器发送请求
4.服务器返回响应
服务器接受并处理请求,返回HTTP响应
5.浏览器解析并渲染页面
- 浏览器对HTML进行解析并构建DOM树、对CSS解析并构建CSSOM(css-object-modal)树
- 合并DOM树、CSSOM树生成Render-Tree(渲染树)
- layout布局:对render-tree的每一个节点确定精确位置与尺寸
- 绘制页面:将render-tree的节点绘制\光栅化到页面上,合并所有图层并显示
- 浏览器遇到<script>时,下载并执行js;
- 通过js操作,修改DOM或样式,会触发浏览器的重绘和重排;
6.断开连接,进行4次TCP挥手
- 客户端发送FIN
- 服务器回复ACK
- 服务器发送FIN
- 客户端回复ACK
断开请求连接2次,断开响应连接2次;
7.性能优化:
- 内联关键CSS
- 图片懒加载
- 减少重绘和重排(使用transform\opcity避免重排)
- 静态资源使用CDN加速资源加载
- 使用缓存策略(
Cache-Control
/ETag)、压缩资源(Gzip/Brotli)- 使用HTTP/2或者HTTP/3