浏览器是如何渲染页面的？

Posted 2020-10-03

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器是如何渲染页面的？相关的知识，希望对你有一定的参考价值。

带着疑问搜索了好多文章，大概总结下，有错误的地方望指正。

共4点（解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树）：

1）解析html(若有压缩则首先进行解压处理)以构建DOM树；

2）DOM树与 css样式构建render树（渲染树）；

由于浏览器采用自上而下的方式解析，在遇到【样式（link）】与【脚本文件（script）】这两种元素时都会阻塞浏览器的解析（原因：script脚本执行过程中可能会修改html界面（如document.write函数）；DOM节点的CSS样式会影响js的执行结果），所以样式与脚本的先后顺序会影响到浏览器的解析过程。

外部样式与外部脚本执行顺序：

外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕
外部脚本可与外部样式并行加载，但直到外部样式加载完毕，外部脚本才开始执行
外部脚本含有async（异步）属性（IE下为defer），则外部样式不会阻塞该脚本的加载与执行

3）布局；

浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

4）绘制；

布局完成后，便是将呈现树绘制出来显示在屏幕上。对于每一个呈现树节点来说，主要绘制顺序如下：

a.背景颜色

b.背景图片

c.边框

d.子呈现树节点

e.轮廓

举个简单的栗子（摘抄）

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行javascript代码的＜script＞标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了＜/html＞的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

包含在栗子中有2个知识点 reflow(回流) 与 repaint(重绘)：

reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。

reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

主要参考文档：