浏览器如何渲染网页
一、了解
要了解浏览器渲染页面的过程,首先得知道一个名词——
关键路径渲染
。关键渲染路径(Critical Rendering Path)是指与当前用户操作有关的内容。例如用户在浏览器中打开一个页面,其中页面所显示的东西就是当前用户操作相关的内容,也就是浏览器从服务器那收到的HTML,CSS,JavaScript等相关资源,然后经过一系列处理后渲染出来的web页面。
浏览器渲染的过程主要包括以下五步:
① 浏览器将获取的HTML文档解析成DOM树
② 处理CSS标记,构成层叠样式表模型CSSOM(CSS Object Model)
③ 将DOM和CSSOM合并为渲染树(rendering tree)将会被创建,代表一系列将被渲染的对象
④ 渲染树的每个元素包含的内容都是计算过的,它被称之为布局layout。浏览器使用一种流式处理的方法,只需要一次pass绘制操作就可以布局所有的元素
⑤ 将渲染树的各个节点绘制到屏幕上,这一步被称为绘制painting
- 需要注意的是,以上五个步骤并不一定一次性顺序完成,比如DOM或CSS被修改时,亦或是哪个过程会重复执行,这样才能计算出哪些像素需要在屏幕上进行重新渲染。而在实际情况中,JavaScript和CSS的某些操作往往会多次修改DOM或者CSS。