浏览器中输入url，到页面呈现出来，到底发生了什么

输入url然后DNS解析

首先需要找到这个url域名的服务器ip，即dns解析。是浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录的顺序是浏览器缓存->系统缓存->路由器缓存，缓存中没有就查找系统的hosts文件中是否有记录，如果没有就查找DNS服务器，得到服务器ip地址后。

建立TCP连接

tcp的三次握手很详细
https://blog.csdn.net/qq_44786519/article/details/108709553

浏览器根据这个ip以及相应的端口号，构造http请求，并发出。

这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个http请求分装在一个tcp包中，

服务器相应HTTP请求并返回报文

这个tcp包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来做出相应，返回相应的html给浏览器。

将html文档绘制成DOM树

因为html是一个树形结构，浏览器根据这个html来创建DOM树，

• DOM树在构造过程中可能会被css和js的加载阻塞（所以推荐js代码放在html代码后面）
• display：none的元素，注释。script标签上的东西也会在dom树中

css解析，构造层叠样式表模型（CSSOM）

• css解析和DOM 解析可以同时进行
• css解析和script执行互斥
• 在webkit内核中进行script执行优化，只有在js访问CSS时才会发生互斥

将DOM树和CSSOM合并成渲染树（render tree）

这里主要做的是排除非视觉节点，

• render tree和DOM tree不完全对应
• display：none和scripe和meta等非视觉元素不在Render tree中
• visibility：hidden的元素在render tree

布局（layout）

在渲染树的每个元素包含的内容都是经过计算的，这就叫做布局，浏览器使用流式布局的方法，只需一次绘制就可以布局所有的元素。
布局阶段从render tree的根节点开始遍历，每一个节点都是一个渲染对象有宽高，位置，背景等等信息。

• 布局阶段输出的就是我们常说的盒子模型，可以精确的确定每个元素在屏幕中的确切位置和大小

• 其中float（浮动），absoulate，fixed布局会发生位置偏移

• 所谓的脱离文档流就是脱离render tree

render tree（渲染树）的绘制（也就是所说的渲染页面）

就是将render tree的各个 节点绘制到屏幕中绘制阶段遍历render tree，异步渲染器的paint方法在屏幕上显示他的内容。绘制是由浏览器的UI后端组件完成。
在html文件中会有图片，视频，音频等资源，在解析DOM时候，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是4-6个，当然那这些请求中我们还需要关注的就是缓存，也是前端新能优化的一部分，强缓存和协商缓存。