前端性能优化-重绘和回流

浏览器渲染流程

概述

• 指的是浏览器从网络上或本地加载网页到页面上显示内容的整个过程

特点

• 主要部分是通过浏览器内核来完成，主要参与部分为浏览器渲染引擎和 JavaScript 解析器
• 因为每个浏览器的内核不一致，所以渲染流程大同小异

大概流程

1. 根据 HTML 结构生成DOM树
2. 根据 CSS 生成 CSSOM
3. 将 DOM 和 CSSOM 整合形成 RenderTree
4. 根据RenderTree开始渲染和展示
5. 遇到<script>时，会执行并阻塞渲染