目录
Document Object Model (DOM)
CSS Object Model (CSSOM)
Render Tree
Rendering Sequence
Layout operation
Paint operation
Compositing operation
界面渲染顺序图
Browser engines
Rendering Process in browsers
Parsing and External Resources
Parser-Blocking Scripts
Render-Blocking CSS
Document’sDOMContentLoadedEvent
Window’sloadevent
有时候我们在使用某个网站的时候会出现影响用户体验的共性问题,例如:网站加载速度过慢、一直在等待文件的加载、加载出来了界面却没有样式等。为了避免开发人员开发这种网站,我们需要深入理解浏览器渲染界面的生命周期。
Document Object Model (DOM)
首先我们需要理解什么是DOM,浏览器向服务器发送请求获取HTML数据,服务器以二进制字节流的形式向浏览器返回HTML文本,这个response的header中有这样的attribute:Content-Type:text/html;charset=UTF-8。text/html是一种MIME Type,它告知浏览器这种MIME Type是HTML Document。charset=UTF-8告知浏览器该MIME Type文件需要使用UTF-8的编码方式解码。根据这些信息,浏览器就能将二进制字节流转化为我们看到的HTML Document。
如果丢失response header中的text/html,浏览器就不能理解怎样处理该MIME Type,这个时候二进制字节流将会被渲染普通文本格式。但是如果一切正常,经过浏览器对该MIMET Type文件的转化,典型的HTML Document最终看起来会是这样:
Rendering Test
Hello World!
This is a sample paragraph.
在上面的代码段中,该网页依赖于为网页提供样式的style.css和为网页提供操作的main.js。在style.css添加一些炫酷的样式,我们的网页看起来如下图所示:
但是问题仍然存在啊,浏览器是怎样将平平无奇的只包含文本的HTML文件渲染成如此炫酷的界面呢?为了解决这个问题我们需要从DOM、CSSOM、Render Tree入手。
无论何时浏览器解析HTML代码,遇到HTML、body、div等元素,他都会创建与之对应的JavaScript Node对象浏览器打不开单个网址,最终所有的元素都会被转化为JavaScript对象。由于每个HTML元素都有不同的属性,因此将通过不同的类(构造函数)创建Node对象。例如:div对应的Node对象HTMLDivElement继承自Node类,我们可以使用chrome的DevTools来做如下测试:
浏览器为每个元素创建完对象之后,它将会为这些Node对象创建一个树形结构。由于在HTML文档中元素之间互相嵌套,所以浏览器需要复制文档中的元素但是使用之前创建的Node对象来创建树形结构。这个步骤将有助于浏览器在整个生命周期内有效地呈现和管理网页。
这就是DOM Tree。其结构如上图所示。
DOM Tree最顶端的元素是html,其分支是元素在文档中出现和嵌套来显示的。不论什么时候解析到HTML元素,浏览器都会创建与之对应的Node对象。
DOM节点并不一定总是HTML元素。 当浏览器创建DOM树时,它还将诸如注释,属性,文本之类的内容另存为树中的单独节点。 但为简单起见,我们仅考虑HTML元素(又称为DOM元素)的DOM节点。想要了解DOM节点类型可以参考这里
DOM Tree通过实例对象的七个属性描述节点之间的关系,构成层次结构
1) ownerDocument属性: 该属性指向整个节点树中的文档节点
2) parentNode属性: 该属性指向节点树中该节点的父节点
3) previousSibling属性: 该属性指向节点树中该节点的左兄弟节点
4) nextSibling属性: 该属性指向节点树中该节点的右兄弟节点
5) childNodes属性: 该属性指向节点树中该节点的子节点NodeList集合
6) firstChild属性: 该属性指向节点树中该节点的子节点NodeList集合中的第一个字节点
7) lastChild属性: 该属性指向节点树中该节点的子节点NodeList集合中的最后一个字节点
可以通过Chrome DevTools来观察节点之间的继承关系:
JavaScript不知道什么是DOM,DOM不是JavaScript规范的一部分。DOM是浏览器提供的高级Web API,用于高效地呈现网页并将其公开显示给开发人员,以便开发者动态操纵DOM元素。
使用DOM API开发人员可以对HTML元素进行增删改查的操作,可以在内存中创建或者拷贝HTML元素,在不渲染DOM Tree的情况下操作HTML元素。这使开发人员能够构建具有丰富用户体验的高度动态的网页。
CSS Object Model (CSSOM)
当我们设计网站的时候,我们需要将其设计地尽善尽美。为了达到这个目标我们在HTML元素上提供一些样式。在本页面中我们使用的是Cascading Style Sheets(级联样式)。使用CSS选择器我们能够定向操纵目标元素的样式。
外部CSS文件、通过内嵌CSS样式、在HTML元素上使用style属性、使用JavaScript 应用在HTML元素上的方法是不同的,但是最终浏览器繁琐地将CSS样式应用在DOM元素上。
在构建好DOM Tree之后浏览器打不开单个网址,浏览器会加载所有的CSS样式(外部CSS文件,内嵌样式,行内style属性,用户代理样式等)来构建一个CSSOM。CSSOM是一个树形结构的CSS对象模型。
CSSOM Tree上的每一个节点都会保存CSS样式信息,最终会被应用DOM Tree的目标元素上。CSSOM不包含无法在屏幕上显示的、
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论