浏览器的工作原理

1.用户输入一个url、点击一个链接、提交一个表单。
2.DNS查找
3.tcp三次握手，让两端尝试进行通信在发送数据前，SYN,SYN-ACK,ACK,
4.如果是https请求，进行TLS协商。
TCP慢开始/14kb规则：接受到第一个包的数据内容通常是14kb，慢慢的主次增加达到阈值。
拥塞控制可以确保服务器发送的太快，客户端来不及接受而不被丢弃（拥塞控制算法使用这个发送包和确认帧流来确定发送速率）。

5.解析数据，将数据转换为DOM和CSSOM，通过渲染器把DOM和CSSOM在屏幕上绘制页面。一般初始页面的数据都在那14kb里面。
构建DOM树：浏览器发现非阻塞资源，如图片，浏览器会继续请求解析，但是当碰到script标签会阻塞渲染并停止HTML（script没有async、defer属性）
JavaScript被解释、编译、解析和执行。脚本被解析为抽象语法树。一些浏览器引擎使用”Abstract Syntax Tree“并将其传递到解释器中，输出在主线程上执行的字节码。这就是所谓的JavaScript编译。
6.渲染页面：渲染步骤包括样式、布局、绘制，在某些情况下还包括合成。在解析步骤中创建的CSSOM树和DOM树组合成一个Render树，然后用于计算每个可见元素的布局，然后将其绘制到屏幕上。在某些情况下，可以将内容提升到它们自己的层并进行合成，通过在GPU而不是CPU上绘制屏幕的一部分来提高性能，从而释放主线程。
style：第三步是将DOM和CSSOM组合成一个Render树，计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。
Layout（布局）：第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流。在我们的示例中，假设初始布局发生在返回图像之前。由于我们没有声明图像的大小，因此一旦知道图像大小，就会有回流。
Paint（绘制）：最后一步是将各个节点绘制到屏幕上，第一次出现的节点称为first meaningful paint。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。浏览器需要非常快地完成这项工作。
7.交互：一旦主线程绘制页面完成，你会认为我们已经“准备好了”，但事实并非如此。如果加载包含JavaScript（并且延迟到onload事件激发后执行），则主线程可能很忙，无法用于滚动、触摸和其他交互。