浏览器渲染原理

qwq
220 阅读5分钟

渲染流程

81a87a7aea5d2a649feddd59bf07597.png HTML解析器 将 html文本 解析为DOM树，DOM树中会有一些资源请求，CSS解析器将css解析为CSS对象模型(CSSOM)，两个线程，并行执行，如果有JS资源请求，请求回来后交给JS执行引擎，如果其中有DOM操作会对DOM进行操作,当DOM树和CSSOM树解析完成会合成渲染树，对于渲染树要对其进行遍历计算布局(尺寸大小位置)，然后将计算好的渲染树进行绘制，显示

HTML解析器

解析HTML文档，将各个HTML元素逐个转化成DOM节点，从而生成DOM树。

CSS解析器

将CSS转化为对象，将这些CSS对象组装起来，构建CSSOM树。 DOM 树和 CSSOM 树都构建完成以后，浏览器会根据这两棵树构建出一棵渲染树 渲染树构建完毕之后，元素的位置关系以及需要应用的样式就确定了，这时浏览器会计算出所有元素的大小和绝对位置。

计算布局采用哪种递归算法？

深度优先遍历， 有些父节点没有宽高，需要根据子节点撑开，最后渲染到页面上是根据盒子模型渲染的

页面什么时候进行绘制？

页面布局完成之后，浏览器会将根据处理出来的结果(渲染树)，把每一个页面图层转换为像素，并对所有的媒体文件进行解码。

DOM树构建

<html>
    <link rel="stylesheet" href='/a.css'>
    <body>
        <p>hello world</p>
        <script src='/a.js’></script>
    </body>
</html>

b8a829e7fd1ebcb67dbea690d1112c3.png

0df35f1b6bc073495178cd52aa233a8.png

82d3767594d7523a505d6b4cc767430.png html字符串 》 分词器 》 token流 》 栈 》 DOM树

如果遇到script节点，之前的csslink在没解析完之前是否会阻塞javascript执行? 会，因为js 可能会操作css,必须等css 资源加载结束解析完成，css解析会影响节点样式

tokens流的作用是什么?

把HTML的关键词进行分离，降低DOM生成的复杂度

CSSOM 的构建

DOM解析和CSS解析会相互阻塞吗?

CSSOM 树和 DOM 树是独立的两个数据结构，它们并没有一一对应关系，浏览器在构建 DOM 树的同时，如果样式也加载完成了，那么 CSSOM 树也会同步构建。

CSSOM数据结构 c8a119c2085546a018bc21cf52ebf1c.png

样式的标准化过程 image.png

哪类样式可以继承，哪类样式不可以继承，为什么?

可继承样式特征:

  1. 不影响布局和尺寸。
  2. 只影响外观。
  3. 可以使用inherit强制继承。
    例外: font-size、line-height.

不可继承样式特征:

  1. 影响布局和尺寸。

样式的标准化主要干了什么事情,如何验证? 把非标准化的样式转化为标准化的样式，如：em > px,color > rgba

渲染树的构建

###什么时候进行渲染树的构建？ 在 DOM 树和 CSSOM 树都解析完成之后，就会进入渲染树的构建阶段。

DOM树与CSSOM树如何进行结合？

遍历整个 DOM 树，然后在CSSOM 树里查询到匹配的样式，

什么是渲染树？

渲染树就是 DOM 树和 CSSOM树的结合，会得到一个可以知道每个节点会应用什么样式的数据结构。

<html>

<head>
    <style>
        body {
            color: □#fff;
        }

        .header {
            width: 100px;
            height: 50px;
            background: red;
        }

        .content {
            font-size: 25px;
            line-height: 25px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="header">
    </div>
    <p style="color: blue" class="content"><span>hello world</span>
    <p style="display: none;">哈哈</p>
    </p>
</body>

</html>

image.png

页面布局注意完成哪些工作？

  1. 计算DOM节点的样式
  2. 应用盒模型计算节点的大小和位置
  3. 绘制大小和边框

绘制阶段的工作内容是什么

  1. 遍历渲染树对节点进行分层，形成layer树。
  2. 合成线程会将每个图层分割为大小固定的图块，
  3. 将绘制指令组合成一个列表。

哪些操作会导致分层？

will-change: transform, opacity;position:fixed, absolute + zIndex等操作，分层可以减少回流 1.css动画在独立图层中进行，不会引起回流， 2.css动画是由GPU硬件加速完成的性能很高。

绘制完成后如何显示网页？

  1. 按照绘制列表为每个图层的分块生成图片
  2. 将不同图层分块的图片合成一个分块
  3. 根据优先显示级别将图片输送到显卡的缓冲区中
  4. GPU渲染网页

造成重排和重绘的最直接原因是什么?

渲染树的改变是造成重排和重绘最直接的原因!

什么是重排？

当我们的操作引发了 DOM 树中几何尺寸的变化(改变元素的大小、位置、布局方式等)这时渲染树里有改动的节点和它影响的节点都要重新计算。这个过程就叫做重排，也称为回流。

重排的本质是什么？

凡事能够引起几何属性的重新计算就是重排!

哪些会影响重排？

  1. 页面首次渲染。
  2. 浏览器窗口大小发生变
  3. 元素的内容发生变化
  4. 元素的尺寸或者位置发生变化
  5. 元素的字体大小发生变化
  6. 查询某些属性或者调用某些方法

什么是重绘？

当对 DOM 的修改导致了样式的变化但未影响其几何属性(比如修改颜色背景色)时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式(会跳过重排环节)，这个过程叫做重绘

哪些属性会影响重绘？

color, visibility, opacity, backgroundcolor, box-shadow等。

avatar
文章
阅读
粉丝