URL从输入到⻚面显示的过程（详细版）

URL从输入到⻚面显示的过程（详细版）

1. 浏览器中输入网址

2. DNS 解析域名得到 IP 地址
   DNS 解析首先会从你的浏览器的缓存中去寻找是否有这个网址对应的 IP 地址，如果没有就向OS系统的 DNS 缓存中寻找，如果没有就是路由器的 DNS 缓存， 如果没有就是 ISP 的DNS 缓存中寻找。 所以，缓存的寻找过程就是： 浏览器 -> 系统 -> 路由器 -> ISP。 如果在某一个缓存中找到的话，就直接跳到下一步。 如果都没有找到的话，就会向 ISP 或者公共的域名解析服务发起 DNS 查找请求。从本地域名服务器到权威域名服务器 查找的过程是一个迭代查询的过程。

3. 拿到IP地址，TCP 三次握手，建立连接

4. 服务器建立连接之后，返回相应的资源，返回 html 等资源文件

5. 浏览器解析 html 文件，渲染页面。具体过程是：

   5.1 浏览器会将HTML解析成一个DOM树，同时将CSS解析成 CSSOM 树

   5.2 然后再将这俩结合起来，形成 render tree

   5.3 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步进行布局处理阶段，即计算出每个节点在屏幕中的位置。

   5.4 分层：因为现在的页面功能越来越复杂了,如复杂的3d变换,页面滚动,或者只用了z-indexing做z轴排序的,为了更方便的实现这些效果,渲染引擎还需要为特点节点生成专用的图层,并且生成一颗对应的图层树.这些图层叠加在一起构成了页面图像； 一般是 拥有层叠上下文属性的元素被单独提升为一个层，或者 需要裁剪(clip)的地方也会被创建为图层

   5.5 图层树也创建好了之后,渲染引擎才会对图层树中的每个图层进行绘制，渲染引擎把一个图层的绘制分解成一个个小指令,把这些指令按照顺序组成一个待绘制表，图层绘制的输出就这个待绘制表，进入下一阶段

   5.6 栅格化：绘制列表只是用来记录绘制顺序和具体操作的列表,而绘制是由渲染引擎中的合成线程来完成的。
   合成线程按照视口附近的图块优先生成位图,生成位图的操作实际栅格化来执行的.所谓栅格化就是将图块转换为位图,图块是栅格化执行的最小单位.渲染进程维护了一个栅格化的线程池,所有的图块栅格化都是在线程池内进行,通常栅格化过程会有GPU加速生成,使用GPU生成位图的 过程叫做快速栅格化,或者GPU栅格化,生成的位图被保存在GPU内存中。所以这个部分的输出就是图块和位图信息.

6. 合成和显示：一旦所有的图块都被光栅化,合成线程就会生成一个绘制图块的命令-‘drawQuad’,然后将该命令提交给浏览器进程.浏览器进程里面有一个viz的组件,用来接收合成线程发过来的绘制命令,然后根据这个命令将页面内容绘制到内存中,最后将内存显示在屏幕上.

简单总结

注意点

第一次确定节点的大小和位置称为布局，随后对节点大小和位置的重新计算称为重排（回流）

参考文章：
https://blog.csdn.net/abcsxc258/article/details/122269423
https://juejin.cn/post/6995936981351923748