说说页面渲染的过程

浏览器在收到 HTML, CSS, JS 文件后，它是如何把页面呈现到屏幕上的？

下图对应的就是WebKit渲染的过程。

浏览器是一个边解析边渲染的过程：

DOM > CSSOM > 渲染树 > 布局 > 绘制

① 浏览器解析HTML文件构建DOM树，然后解析CSS文件构建CSS规则树

② DOM树和CSS规则树解析完成后，合成渲染树（Render Tree）

③ 等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上（重排和重绘）。

HTML：理解成一个框架模型，经历：字节>字符>Token>节点>DOM

• HTML解释器：解释HTML语言的解释器，本质是将HTML文本解释成DOM树（文档对象模型）。

CSS：理解成装修，经历：link标签>字节>字符>Token>节点>CSSOM

• CSS解释器：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。

渲染树：任务是匹配DOM和CSSOM的节点，并且捕获可见内容

布局：意思就是获取渲染树的结果、节点位置和大小，是依据盒子模型来进行的

• 布局：将DOM和CSS样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型即渲染树。
• JavaScript引擎：JavaScript可以修改网页的内容，也能修改CSS的信息，JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去，从而改变渲染的结果。

绘制：把渲染树以像素的形式绘制在页面上

CSSOM不能部分解析，DOM可以部分解析

总结：

浏览器发送请求以后，服务器或者本地返回给浏览器HTML文件，这个时候第一步就是解析HTML文件，并且构建DOM树。

在解析HTML文件的时候遇到了link标签，浏览器就去请求CSS文件，请求CSS文件的同时也继续解析HTML文件。

此时遇到了script标签，浏览器就去请求JS文件，服务器或者本地就会陆续返回CSS和JS文件，实际操作中会先得到CSS还是JS是要看具体情况的。

如果先返回并且解析完成JS文件也是会发生阻塞，我们不能先执行JS文件，必须等到CSSOM构建完成了才能执行JS文件。（因为渲染树是需要DOM和CSSOM构建完成了才能构建，而且JS是可以操作CSS样式的）所以这一步是解析CSS文件构建并且CSSOM。

JS是会阻塞HTML解析的，因为JS既可以操作DOM，又可以操作CSSOM，如果不等JS下载解析执行完再构建DOM，那有可能导致网页的有些内容出现了又消失。如果JS设置了async，也就是异步执行，那就不会阻塞HTML解析。

JS执行完成之后，就正常了，构建DOM树以及构建渲染树。然后进行布局和绘制。

 

注意：

浏览器在解析过程中，如果遇到请求外部资源时，如图像,iconfont,JS等。请求过程是异步的，并不会影响HTML文档进行加载。但是当文档加载过程中遇到JS文件，HTML文档会挂起渲染过程，不仅要等到文档中JS文件加载完毕还要等待解析执行完毕，才会继续HTML的渲染过程。

html文档渲染过程，css文件和js文件的下载，是否会阻塞渲染？- 题目详情 - 前端面试题宝典

html和css中的图片加载与渲染规则是什么样的？- 题目详情 - 前端面试题宝典

原因是因为JS有可能修改DOM结构，这就意味着JS执行完成前，后续所有资源的下载是没有必要的，这就是JS阻塞后续资源下载的根本原因。CSS文件的加载不影响JS文件的加载，但是却影响JS文件的执行。JS代码执行前浏览器必须保证CSS文件已经下载并加载完毕。

绘制这个过程比较复杂，涉及到两个概念: reflow(重排)和repain(重绘)。

说说你对重绘和重排的理解，以及如何优化？_小草莓蹦蹦跳的博客-CSDN博客

简述 html 页面渲染过程- 题目详情 - 前端面试题宝典