浏览器是如何渲染(显示)网页的

接着上一篇文章所说的关于浏览器方面的知识，今天来说一下浏览器是如何渲染页面的，这是学前端必须要掌握的知识

浏览器渲染页面可以分为六个步骤

1.先将html里面代码从上往下进行加载解析，并且在过程中进行渲染，如果在过程中碰到一些需要请求的外部资源，如 图片，视屏，外部链接的css，js等资源，那么又会重新连接过去请求对应的外部资源，但是这一个过程是异步的

渲染过程中主要由浏览器内核来完成，不同内核渲染方式稍有不同

内核大致可以分为两个引擎：渲染引擎和js引擎

2.渲染引擎解析（解析可以理解为是浏览器不认识代码，就是将浏览器不认识的东西转换成浏览器能认识的东西）HTML文件，构建DOM tree（DOM树，我们可以理解为一种由HTML中的标签，文本节点和属性所组成的一种树结构数据）

3.解析CSS文件构建CSSOM tree(CSSOM树) 注意：渲染引擎它不能直接解析css的代码，所以需要转换成对应的CSSOM树

4.结合DOM tree和CSSOM tree生成Render tree（渲染树）

5.进行layout（布局）处理阶段，也就是将Render tree里面的东西进行一个布局，可以理解为将Render tree分配到屏幕上的某一位置，给每一个元素分配对应的屏幕坐标，只是分配的坐标并没有展示出来

6.绘制阶段，渲染引擎遍历循环Render tree将每一个节点绘制到屏幕上，需要知道这个绘制过程是渐进式的(就是说网页并不是全部绘制完成一下子出来，这样用户体验不是很好了，它是边解析边绘制的)

补充：最终JS引擎解析JS相关代码和执行

回流和重绘

再说回流和重绘之前先说一下布局，所谓布局就是页面第一次确定DOM位置大小等一些信息的时候叫布局, 布局是需要计算的，根据需求来计算

回流 ：在第一次的基础上布局会得到一些布局的基础信息(如元素的大小位置...)，后面通过一些代码对这些信息进行了修 改，那么就会重新计算这些布局信息，这个过程叫回流

重绘：所谓重绘就是重新绘制意思，也就是浏览器在第一次渲染以后还会绘制，后期如果去修改了元素的大小，位置，颜色等，它就会重绘
注意：回流以后会重新绘制