浏览器解析HTML,CSS过程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w770583069/article/details/76014454

每个浏览器都会有自己的呈现引擎,不同内核浏览器之间的解析顺序和方法存在差异,但都是大同小异;

a)      呈现引擎,呈现引擎一开始会从网络层获取请求文档的内容,内容的大小一般限制在8000个块以内,然后进行如下所示的基本流程:

                    i.           Parsing HTML to construct theDOM tree;

                  ii.           Render tree construction;

                 iii.           Layout of the render tree;

                 iv.           Painting the render tree.

b)      呈现引擎将开始解析HTML文档,并将各标记逐个转化成“内容树”上的DOM节点(HTML 解析器的任务是将 HTML 标记解析成解析树)。同时也会解析外部的CSS文件以及样式元素中的样式数据。HTML中的这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树;

c)       呈现树包含多个带有视觉属性(如颜色和尺寸)的矩形,这些矩形的排列顺序就是他们将在屏幕上显示的顺序;

d)      呈现树构建完毕之后,进入“布局”处理阶段,也就是为每个节点分配一个应该出现在屏幕上的确切坐标,下一个阶段是绘制-呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来;需要着重指出的是,这是一个渐进的过程。为了达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上,它不必等到整个HTML文档解析完毕之后,就会开始构建呈现树和设置布局,在不断接收和处理来自网络的其余内容的同时,呈现引擎会将部分内容解析并显示出来。

e)      语法分析和词法分析;

f)       使用JS解释器对JS文件进行解析;

参考:http://www.cnblogs.com/lhb25/p/how-browsers-work.html#The_rendering_engine


猜你喜欢

转载自blog.csdn.net/w770583069/article/details/76014454