浏览器渲染原理

Posted 2020-09-19

浏览器输入url到页面呈现发生了什么？

---

1：输入url 

浏览器会开启一个线程来处理这个请求，对URL分析判断如果是http协议就按照Web方式来处理，浏览器会从历史记录，书签等地方，找到已经输入的字符串可能对应的 url，然后给出智能提示，让你可以补全url地址。对于 google的chrome 的浏览器，他甚至会直接从缓存中把网页展示出来。

2：域名解析

通过DNS解析获取网址的IP地址，

IP 地址：IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码，通过IP 地址才能确定一台主机位置。服务器本质也是一台主机，想要访问某个服务器，必须先知道它的IP 地址；

域名（DN）：IP地址由四个数字组成，中间用点号连接，在使用过程中难记忆且易输入错误，所以用我们熟悉的字母和数字组合来代替纯数字的IP地址，比如我们只会记住www.baidu.com（百度域名） 而不是220.181.112.244（百度的其中一个IP地址）；

DNS： 每个域名都对应一个或多个提供相同服务服务器的 IP 地址，只有知道服务器IP 地址才能建立连接，所以需要通过DNS 把域名解析成一个IP 地址。

域名与 URL 是两个概念：

域名是一台或一组服务器的名称，用来确定服务器在 Internet上的位置；

URL 是统一资源定位符，用来确定某一个文件的具体位置，

IP 地址与域名不是一一对应的关系：可以把多个提供相同服务的服务器 IP 设置为同一个域名，但在同一时刻一个域名只能解析出一个IP地址；同时，一个IP 地址可以绑定多个域名，数量不限；

DNS查询的两种方式：递归查询和迭代查询。

3：浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接。

拿到域名对应的IP地址之后，浏览器会以一个随机端口向服务器的WEB程序（常用的有httpd,nginx等）80端口发起TCP的连接请求。最终建立了TCP/IP的连接。浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接。

TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接，

（1）第一次握手：建立连接时，客户端A发送SYN包（SYN=j）到服务器B，并进入SYN_SEND状态，等待服务器B确认。

（2）第二次握手：服务器B收到SYN包，必须确认客户A的SYN（ACK=j+1），同时自己也发送一个SYN包（SYN=k），即SYN+ACK包，此时服务器B进入SYN_RECV状态。

（3）第三次握手：客户端A收到服务器B的SYN＋ACK包，向服务器B发送确认包ACK（ACK=k+1），此包发送完毕，客户端A和服务器B进入ESTABLISHED状态，完成三次握手。

完成三次握手，客户端与服务器开始传送数据。

三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”

4：浏览器向 web 服务器发送一个 HTTP 请求

客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据

5：服务器处理请求并返回HTTP报文。

服务器响应消息

HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。

 

6：浏览器收到请求开始解析渲染页面。

浏览器在解析html文件时，会”自上而下“加载，并在加载过程中进行解析渲染。在解析过程中，如果遇到请求外部资源时，如图片、外链的CSS、iconfont等，请求过程是异步的，并不会影响html文档进行加载。

?DOM

俗称节点树，它是浏览器根据HTML结构经过各种处理（特别是容错处理）生成的树，它代表了整个网页的结构。

?CSSOM

样式规则树，它是浏览器分析网页对应的CSS文件生成的树，它跟网页的HTML结构没有任何关系，仅仅是CSS文件的树型结构。要特别注意的是浏览器发现需要下载一个CSS文件时，它会马上停止渲染页面，并且在新的样式规则树未被建立前都不会再进行渲染或者更新页面，也就是CSS会阻塞页面的渲染。因此，必须尽可能精简CSS文件内容以及将CSS文件的link标签放到页面头部。

?Render tree

渲染树，浏览器在DOM树和CSSOM树生成之后融合成为真正用于渲染的树，它的结构跟DOM树一致，但是同时又根据CSSOM树添加了相关的样式信息，浏览器会根据渲染树在页面区域画图，最终形成网页界面。

解析过程中，浏览器首先会解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。

当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。因为JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，

7：连接结束。

HTTP三点注意事项：

• HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
• HTTP是媒体独立的：这意味着，只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
• HTTP是无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。