浏览器渲染原理 渲染树和页面渲染

Posted 凯尔Grant

tags:

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

来自:https://blog.csdn.net/qq243541844/article/details/51922947

【浏览器渲染原理】 渲染树和页面渲染

  • 我们主要讨论以下列出的几个问题:
  • 什么是渲染树?和DOM树及CSSOM树有什么关系?
  • 渲染树是如何形成的?
  • 浏览器渲染顺序问题

1.什么是渲染树?和DOM树及CSSOM树有什么关系?

首先我们得先了解一下渲染的基本步骤 
当用户请求的资源通过浏览器网络层到达渲染引擎后。渲染工作就会开始。 
第一步:浏览器解析html文档和解析CSS样式表形成DOM树和CSSOM树 
第二步 : 结合DOM树和CSSDOM树形成 render树。 也就是我们所说的渲染树。渲染树 
第三步: 浏览器在render树内对每个render节点进行布局处理,计算出每一个元素的大小和位置。确定其在屏幕上的位置 
第四步:绘制。通过遍历render树将实际的像素显示到屏幕上

以上的步骤是一个渐进的步骤,但是为了提高用户体验,浏览器并不会等待所有html文档加载完成之后才建立渲染树并渲染。 他会在从网络层获取html文档的同时把已经接收到的局部内容先渲染出来


2.渲染树是如何形成的? 
基于DOM树的一些可视化的节点,WebKit根据需要来创建相应的RenderObject节点,这些节点也构成了一颗树,称为render树。

Render树是基于Dom树建立起来的新的一棵树,Render节点和Dom节点并不是一一对应。所以什么情况下需要建立新的render节点呢? 
- DOM树document节点 
- DOM树种的可视化节点 
- 某些情况下建立匿名的render节点 
有一个问题就是什么算可视化节点呢? 
比如 Html,Body,Div,P等就是可视化结点, 而非可视化节点就是 Head, Meta, Script等。 
比如一个DIV的display属性是none,那么它就是非可视节点。 
但是注意. 如果DIV的visibility属性是hidden,它是可视节点。 
这是一个细节需要注意。 
什么情况下建立匿名的render节点? 
RenderBlock用来是用来表示块级元素, 为了处理上的方便,某些情况下需要建立匿名的RenderBlock对象,因为RenderBlock的子女必须都是内嵌的元素或者都是非内嵌的元素。所以,当它包含两种元素的时候,那么它会为相邻的内嵌元素创建一个块级RenderBlock节点,然后设置该节点为自己的子女并且设置这些内嵌元素为它的子女。


浏览器的渲染顺序问题(摘抄)

1.浏览器加载和渲染html的顺序

1、IE下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)

3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。阻塞加载

5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数

2. JS的加载

2.1 不能并行下载和解析(阻塞下载)

2.2 当引用了JS的时候,浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转,浏览器为了防止出现JS修改DOM树,需要重新构建DOM树的情况,所以 就会阻塞其他的下载和呈现.

以上是关于浏览器渲染原理 渲染树和页面渲染的主要内容,如果未能解决你的问题,请参考以下文章

网页渲染过程

前端性能优化成神之路—前端页面渲染流程

浏览器渲染的工作流程和图片加载与渲染规则

前端技能树,面试复习第 40 天—— 浏览器原理:浏览器渲染原理,如何优化渲染过程

浏览器 DOM 树和渲染树有啥区别

浏览器渲染页面的原理及流程