阅读 65
浏览器的渲染原理

浏览器的渲染原理

本篇博客是作为个人自学记录,如有不足之处,请批评指正。

浏览器拿到HTML&CSS之后,它做了些什么?

  • 根据 HTML 构建 HTML 树(DOM)
  • 根据 CSS 构建 CSS 树(CSSOM)
  • 将两棵树合并成一颗渲染树(render tree)
  • Layout 布局(文档流、盒模型、计算大小和位置)
  • Paint 绘制(把边框颜色、文字颜色、阴影等画出来)
  • Composite 合成(根据层叠关系,展示最终的画面)

举个例子

我在ps创建了3个图层,一个是画板,一个是结构,一个是颜色

  • 首先,现在是一个画板,里面啥也没有

image.png

  • 下一步我把结构加了进来,现在可以看到轮廓了

image.png (别骂了...用鼠标瞎jb画的,我一点美术功底都没有= =)

  • 接下来我把颜色给加了进来

image.png

  • 最后我合并图层

image.png

  • 最终这3个图层就被合并成一张图了

image.png 请问以上3个图层从无到有,再到最后合成,主要做了那些工作?

1:画轮廓

2:配色

3:合成

那我们现在可以先把画轮廓看做是构建HTML树,然后将配色看做是构建CSS树,那最后的合成呢?是不是就是浏览器将各个层级最终的合成?

是的,我们暂时可以这样看成是浏览器的渲染原理,当然这只是一个大概的流程,浏览器做的工作不仅仅这么简单。

但是这里又有疑问了,那到底什么是树?

什么是树?

我们都知道,一棵树,通常都会长出很多分支,脑补一下,这些分支上分别有head标签和body,然后head又分支出link、style,body又分支出p、div等等,那么这这个结构就叫做HTML树木。

下面这张图片是借用谷歌团队写的一篇文章:developers.google.com/web/fundame…

image.png

相信到这里就能大概搞清楚树是什么概念了吧?

同时图片中有 渲染树(render tree),渲染树就是最终用户应该看得到的树。

Layout布局 和 Paint绘制 是什么?

这个很好理解,比如,HTML中的p标签,我们应该把p标签放在哪个位置?然后div又要放在哪个位置?定位在哪?把文档流算出来、把盒模型算出来、计算大小和位置、这些流程就是Layout布局;

但是只做这些是不够的,还得需要绘制颜色,那这里是不是又感觉很像一开始举的ps的例子,把颜色加进了轮廓里?

是的,暂且可以这么认为,例子只是例子,但不是绝对正确的!!!

Composite合成 是什么?

这就是关系到层叠关系,就好像,一个div里,可能会有好多层,浮动有几层,绝对定位有几层,所以浏览器在最后的阶段就是合并这些图层。

那这里,是不是又觉得跟ps这个例子的最后一步很像,是的没错,暂且,可以这么认为。

好了,那么我们就已经简单地了解到了浏览器的基本渲染原理,但当然,浏览器渲染需要做的工作,还有很多很多。

需要了解更多的话,可以看看这篇文章:developers.google.com/web/fundame…

文章分类
前端
文章标签