URL输入地址栏到网页渲染出来发生了什么?

286 阅读3分钟

1.URL解析

   ①地址解析和编码

​   ②HSTS(HTTP严格传输安全协议)

  ​ ③缓存检查

2.DNS解析

​ ①首先读取浏览器的DNS缓存

​ ②如果没有查询到浏览器缓存,就读取本地hosts文件

​ ③如果还没查询到就读取本地解析器缓存

​ ④如果还没查询到,就读取本地DSN服务器缓存

​ ⑤如果以上都没查询到就用递归搜索域名下的DNS

​ 如网址为:blog.baidu.com

​ 先在.com域名下查找DNS解析

​ 然后再.baidu域名下查找DNS解析

​ 最后在blog下查找DNS解析

​ 假如以上都没查到就会报错,找不到该网址。

3.TCP三次握手

​ 第一次握手:浏览器发起,告诉服务器自己要发送请求

​ 第二次握手:有服务器发起,通知浏览器自己已经准备就绪

​ 第三次握手:有浏览器发起,告诉浏览器自己准备发送请求

​ seq:序号

​ ack:确认号

​ ACK:确认序列号

​ SYN:发送一个新的连接

​ FIN:释放一个新的连接

4.发送HTTP请求,服务器处理请求,返回相应结果

5.TCP四次挥手

​ 第一次挥手:由浏览器发起,告诉服务器自己请求发送完毕,浏览器可以关闭

​ 第二次挥手:由服务器发起,通知浏览器,已经接收完毕你的请求,准备关闭了

​ 第三次挥手:由服务器发起,通知浏览器,发送给你的东西已经发送完毕,你可以关闭了

​ 第四次挥手:有浏览器发起,通知服务器,已经接收完毕服务端发送的数据,我要关闭了

6.浏览器渲染

总体渲染步骤:

从服务器获取文件流(进制编码内容)

1.浏览器首先会把16进制的字节信息编译为“代码字符串”

2.按照W3C规则进行字符解析,生成对应的Tokens,最后转换为浏览器内核可以识别渲染的DOM节点

3.按照节点最后解析为对应的DOM树 TREE/CSSOM TREE

浏览器渲染过程:

​ ①构建DOM树:在CSS资源还没有请求回来之前,先生成DOM树(DOM的层级关系/节点关系)

 ②构建CSSOM树:当所有的CSS请求回来之后,浏览器按照CSS的导入顺序依次进行渲染,最后生成CSSOM树

​ 如果一个CSS资源请求事件过长,浏览器会先把渲染好的呈现出来

③构建RENDER树:把DOM树和CSSOM树结合在一起,生成有样式,有结构的RENDER TREE渲染树

​ ④浏览器按照渲染树,在页面中进行解析,计算元素在设备视口中的大小和位置进行布局或者重排/回流,再根 据渲染树以及回流得到的几何信息,得到节点的绝对像素进行重绘

渲染过程中的问题:

​ 1.在页面渲染时,遇到link,浏览器会派发一个新的线程(HTTP线程)去加载资源文件,与此同时GUI(浏览器渲染线程)会继续向下渲染代码,不论CSS是否请求回来,代码继续(link不会阻碍浏览器渲染)

​ 2.在页面渲染时遇到@import GUI渲染线程会暂时停止渲染,去服务器加载资源文件,资源文件没有回来之前,是不会继续渲染的(@import会阻碍浏览器的渲染)

​ 3.如果是行内样式style GUI直接渲染

​ 4.script标签也会阻碍GUI的渲染,一般可以把js文件放在页面尾部

注意:第五和第六步是同时进行,两个线程同时处理