输入URL到浏览器的解析过程
前置知识
nslookup baidu.com：获取百度的IP地址ipconfig /all：获取本地IP的信息ipconfig /displaydns：获取本地缓存的IP地址和域名的映射关系- 本地配置IP地址和域名映射(hosts)：C:\Windows\System32\drivers\etc\的hosts文件
- 本地DNS服务器配置：控制面板-网络和Inertnet-网络连接-WLAN(连网)-网络/Inernet协议版本4(TCP/IPv4)-属性/常规,可选择自动获取或者自定义服务器地址。
过程关键点
- URL解析
- 缓存检查
- DNS 解析：将域名解析成 IP 地址；
- TCP 连接：TCP 三次握手；
- 发送 HTTP 请求；
- 服务器处理请求并返回 HTTP 的报文；
- 浏览器解析渲染页面；
- 断开连接：TCP 四次挥手；
浏览器输入域名-获取IP地址
- 查看本地缓存是否有映射，如果有直接返回IP地址，否则下一步
- 查看本地hosts，有就返回IP地址，否则下一步
- 发送请求到DNS服务器，有就返回IP地址，否则浏览器显示域名解析失败
解析html
- 加载html(构建dom树)并渲染html(构建render树-给浏览器渲染)页面
- 当遇到.css样式文件,会暂停html的渲染，去请求css文件(注意这里是暂停html的render，并没有停止dom的构建，原因：css的执行可能会影响html的布局即dom树的layout阶段，为了减少重排重绘)【css阻塞】
- 服务器返回css文件，并进行解析css，然后继续渲染html
- 当遇到img，向服务器发送请求。异步的，不阻塞后面代码的执行
- 服务器返回了图片资源，由于图片会影响页面布局，因此浏览器会重新布局并渲染那部分的代码
- 当碰到同步js文件，停止所有的加载和渲染，然后去加载js文件并执行【js阻塞】
- 所有html，css，js加载并渲染完，页面就执行完了
页面渲染的过程
- 解析html，构建dom树
- 构建render树(渲染树)
- 布局render树(layout)
- 渲染render树
相关知识 (opens new window)