前端面试浏览器是如何渲染页面的，可以从以下几个步骤进行分析：

解析 HTML 文件，创建 DOM 树

1.用户输入一个URL的时候，浏览器会发送一个请求，请求URL对应的资源。

2.浏览器的HTML解析器会将这个文件解析，并且构建成一棵DOM树。

3.自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加 载）。

解析 CSS

1.在构建DOM树的时候，遇到JS和CSS元素，HTML解析器就换将控制权转让给JS解析器或者是CSS解析器。

优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

构建渲染树

1.JS解析器或者是CSS解析器解析完这个元素时候，HTML又继续解析下个元素，直到整棵DOM树构建完成

2.DOM树构建完之后，浏览器把DOM树中的一些不可视元素去掉，然后与CSSOM合成一棵render树。

3.将 CSS 与 DOM 合并，构建渲染树（Render Tree）

布局和绘制

1.接着浏览器根据这棵render树，计算出各个节点(元素)在屏幕的位置。这个过程叫做layout，输出的是一棵layout树。

2.布局和绘制，重绘（repaint）和重排（reflow）

3.最后浏览器根据这棵layout树，将页面渲染到屏幕上去。

在渲染过程中，浏览器会根据HTTP响应中的编码方式（通过是UTF8），解析字节数据，得到一些字符，然后根据这些字符来渲染页面。

#挑战30天在头条写日记#