浏览器向服务器发起请求
- 浏览器从 DNS 服务器得到域名对应的 IP 地址
- 浏览器向这个 IP 地址对应的服务器发送请求
- 服务器接收、处理请求并返回内容（响应）
- 浏览器下载响应内容
浏览器渲染过程
- 根据 HTML 构建 HTML 树（DOM）
- 根据 CSS 构建 CSS 树（CSSOM）
- 将 DOM 和 CSSOM 合并成一个“渲染树”（Render Tree）
- 根据 Render Tree 来布局（Layout），计算文档流、盒模型、大小和位置等
- 将各个节点绘制（Paint）到屏幕上；（文本、颜色、图像、边框和阴影等）
- 根据层叠关系合成（Composite）展示画面
浏览网页看起来可能很简单，但实际上浏览器需要完成相当多的工作。如果 DOM 或 CSSOM 被修改，浏览器只能再执行一遍以上所有步骤，以确定哪些像素需要在屏幕上进行重新渲染。
使用浏览器开发者工具查看浏览器绘制状态
- 点击开发者工具任意Tag
- 按 ESC 弹出另一工具栏
- 左边菜单栏添加
Rendring- 勾选
Paint Flashing
如何更新样式
一般采用JS更新，例如：
div.style.background ='red'
div.style.display ='none'
div.classList.add ('red')
div.remove()
等等
复制代码浏览器在实现视觉变化时，通常有三种方式：
【1】全走
JS / CSS > 样式 > 布局 > 绘制 > 合成
例：div.remove()会触发当前元素消失，布局发生改变，其他所有元素重新布局（Layout），任何受影响的部分都需要重新绘制，而且最终绘制的元素需进行合成。
【2】跳过Layout
JS / CSS > 样式 > 绘制 > 合成
例：修改背景颜色、文字颜色或阴影等，不会影响页面的布局，浏览器会跳过布局（Layout），直接绘制（Paint）+合成（Composite）。
【3】跳过Layout和Paint
JS / CSS > 样式 > 合成
例：改变transform等，浏览器直接跳到合成（Composite）。
以上三种方式，第三种所消耗的性能最少。
想要知道CSS什么属性触发了什么流程，可以到 CSS Triggers 查询