浏览器机制
浏览器渲染机制
1. 获取服务器数据
1.1 发起请求
用户通过在地址栏输入一个 URL、点击一个链接、提交表单或者是其他的行为。
1.2 DNS查询
查找资源的位置，根据导航传进来的值，去找映射到的IP值，如果第一次访问这个网址的话，就要进行DNS查询。
浏览器会向DNS发起查询请求，最终得到一个IP，第一次请求之后，这个IP就会存储到本地，之后就可以直接在本地获取
—当一个用户使用了移动网络，每一个 DNS 查询必须从手机发送到基站，然后到达一个认证的 DNS 服务器。—
1.3 TCP握手
获取到ip之后，浏览器会通过tcp的三次握手与服务器建立连接。
在浏览器和服务器通过上层协议 HTTPS 发送数据之前，可以协商网络 TCP 套接字连接的一些参数。
TCP 的“三次握手”技术经常被称为“SYN-SYN-ACK”——更确切的说是 SYN、SYN-ACK、ACK——因为通过 TCP 首先发送了三个消息进行协商，然后在两台电脑之间开始一个 TCP 会话。
1.4 TLS协商
对于通过 HTTPS 建立的安全连接，还需要另一次 “握手”。这种握手，或者说 TLS 协商，决定使用哪种密码对通信进行加密，验证服务器，并在开始实际数据传输前建立安全连接。
2. 响应
当与服务器建立连接之后，浏览器就代表用户发送一个初始的 HTTP GET 请求。
2.1 拥塞控制｜TCP慢启动
为了平衡传输段的数量，TCP 慢启动算法用于逐渐增加传输数据量，直到确定最大网络带宽，并在网络负载较高时减少传输数据量。
3. 解析
一旦浏览器收到数据的第一块，它就可以开始解析收到的信息。“解析”是浏览器将通过网络接收的数据转换为 DOM 和 CSSOM 的步骤，通过渲染器把 DOM 和 CSSOM 在屏幕上绘制成页面。
3.1 创建DOM树
第一步是处理 HTML 标记并构造 DOM 树，浏览器构建 DOM 树时，这个过程占用了主线程。html 元素是第一个标签也是文档树的根节点
当解析器发现非阻塞资源，例如一张图片，浏览器会请求这些资源并且继续解析。当遇到一个 CSS 文件时，解析也可以继续进行，但是对于 script 标签（特别是没有 async 或者 defer 属性的）会阻塞渲染并停止 HTML 的解析。
预加载扫描仪 请求 CSS、JavaScript 和 web 字体这些内容，它将在后台检索资源，以便在主 HTML 解析器到达请求的资源时，它们可能已经在运行，或者已经被下载。预加载扫描仪提供的优化减少了阻塞。
3.2 创建CSSOM树
第二步是处理 CSS 并构建 CSSOM 树。因为创建 CSSOM 的总时间通常小于一次 DNS 查询所需的时间。
3.3 JavaScript 编译
在解析 CSS 和创建 CSSOM 的同时，包括 JavaScript 文件在内的其他资源也在下载（这要归功于预加载扫描器）。JavaScript 会被解析、编译和解释。脚本被解析为抽象语法树。有些浏览器引擎会将抽象语法树输入编译器，输出字节码。这就是所谓的 JavaScript 编译。
4. 渲染
包括样式、布局、绘制，在某些情况下还包括合成。
4.1渲染树
渲染树：第三步是将 DOM 和 CSSOM 组合成渲染树。
display：none的节点不会出现在渲染树中，visibility: hidden 会出现在渲染树里。
4.2 布局
第四步是在渲染树上运行布局。布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程。
回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。
4.3 绘制
最后一步是将各个节点绘制到屏幕上
5. 交互
6. 回流和重绘
浏览器使用流式布局模型 (Flow Based Layout)。
浏览器会把HTML解析成DOM，把CSS解析成CSSOM，DOM和CSSOM合并就产生了Render Tree。
回流：布局引擎会根据各种样式计算每一个盒子在页面上的大小和位置。
开销大，回流必定会重绘，页面首次渲染，元素尺寸，字体大小，浏览器窗口，元素位置，元素内容量，删除或者添加dom元素，伪类都会发生回流
重绘：根据计算好的大小和位置在页面上绘制每一个盒子
开销小，样式如修改颜色，修改visibility会引起重绘
避免
避免使用table布局。
尽可能在DOM树的最末端改变class。
避免设置多层内联样式。
将动画效果应用到position属性为absolute或fixed的元素上。
避免使用CSS表达式（例如：calc()）