浏览器输入URL到渲染过程
1. url转为ip地址 DNS解析, 与web服务器建立连接
DNS是应用层协议,用于将用户提供的主机名解析为ip地址。具体过程如下:
浏览器缓存:当用户通过浏览器访问某域名时,浏览器首先会在自己的缓存中查找是否有该域名对应的IP地址(若曾经访问过该域名且没有清空,缓存便存在)
系统缓存:当浏览器缓存中无域名对应IP则会检查用户计算机系统Hosts文件DNS缓存是否有该域名对应的IP
路由器缓存:当浏览器及系统缓存中均无域名对应IP则进入路由器缓存中检查,以上三步均为客户端的DNS查询
ISP(互联网服务提供商)DNS缓存:当在客户端查找不到域名对应IP地址,则进入ISP DNS缓存中查询
根域名服务器:以上均未完成,则进入根服务器进行查询
顶级域名服务器:顶级域名服务器收到请求后查看区域文件记录,若无则将其管辖范围内主域名服务器的IP地址告诉本地DNS服务器
主域名服务器:主域名服务器接受到请求后查询自己的缓存,如果没有则进入下一级域名服务器进行查找,并重复该步骤直至找到正确记录
保存结果至缓存:本地域名服务器把返回的结果保存到缓存,以备下一次使用,同时将该结果反馈给客户端,客户端通过这个IP地址与web服务器建立链接
2. 与Web服务器建立连接、三次握手
三次握手
客户端 -> SYN -> 服务端 服务端 -> SYN + ACK -> 客户端 客户端 -> ACK + 1 -> 客户端
四次挥手
客户端 -> 发送释放请求FIN -> 服务端 服务端 -> 发送ACK -> 客户端 服务端 -> FIN -> 客户端 客户端 -> ACK + 1 -> 服务端确认并关闭
3. 开始HTTP请求
- HTTP协议
- 报文传输
- 服务端 根据状态码 返回资源
4. 拿到页面资源,开始渲染
- 解析HTML -> DOM树
- 解析CSS -> CSSOM树
- Layout (reflow repaint)
- Render Tree
- GPU绘制 合成图层 显示在屏幕上
- 若遇到Script, async(并行下载并执行js) defer(先下载,等html解析完再执行),一般的script会阻塞页面渲染的
- 等待浏览器操作响应
