浏览器渲染原理
一、获取IP地址:(DNS预解析)
1)查找浏览器缓存,没有则下一步
2)查找系统缓存,查找本机的host文件,没有则下一步
3)查找路由DNS缓存,查找ISP服务商缓存,没有则下一步
4)递归查询,ISP的DNS服务器进行递归查询,没有则本地域名服务器以DNS客户的身份向其他根域名服务器发送查询请求。
5)迭代查询,本地域名服务器采用迭代查询,向根域名服务器查询,有则返回,没有则告诉本地服务器下一步查询域名服务器地址(顶级域名服务器、权限域名服务器)
二、TCP/IP链接:
1)三次握手建立连接:(Seq:Sequence number(顺序号码)、Ack:Acknowledge(确认号码))
1、客户机向服务器发送一个建立连接的请求,并发送syn=1、随机产生seq的数据包到服务器,进入SYN_SEND状态,待服务器响应。
2、服务器接到要确认连接的信号,向客户机发送syn=1,ack=1,ack number=接受的seq数据包+1,随机产生seq的数据包到客户机。
3、客户机接到同意连接的信号,验证ack number是否正确、ack是否1,验证正确则客户机再次发送ack number=服务器seq+1,ack=1,服务器收到确认后则连接成功。
三、浏览器向web服务器发送请求:
1)浏览器根据IP地址和端口号发发起请求。
2)服务器接到请求之后,根据HTTP请求内容决定如何获取HTML文件。
3)服务器将得到的HTML文件发送给浏览器
get请求会产生一个tcp数据包、post请求会产生两个数据包:原因如下:
get请求:浏览器会把headers和data一起发送出去,服务器响应200(返回数据)
post请求:浏览器会把headers先发送出去,服务器响应100,则浏览器再次发送data,服务器响应200(返回数据)
四、浏览器渲染:
1、处理HTML生成DOM树,每个tag节点都是dom树的一个节点,包括js动态创建的节点
2、处理CSS生成CSSDOM树,处理过程会去掉浏览器不能识别的样式
3、两个树合并生成render树,每个节点都有自己的style,不包含隐藏节点,如display:none,而visibility:hidden隐藏的元素会包含,会占有空间
4、对render树进行布局计算,输出结果为盒模型,精确表达每个元素的位置和大小,相对度量单位转换成屏幕上绝对像素位置
5、将render树中每一个节点绘制到屏幕上,称为“绘制”、“栅格化”
五、四次挥手:
1、浏览器向服务器发送断开连接信号。
2、服务器收到请求,服务器说,等一下我还有数据没有发送完成
3、服务器说,我的数据发送完毕,可以断开连接了
4、浏览器:好的,你断开连接吧。