浏览器工作的后续

一： HTML代码（response body 部分） 构建成 DOM 树：

  • 字符流，经过状态机的处理，变成 词（token）

    绝大多数语言的 词法部分，都是用状态机来实现的

  • 词（token），通过栈，来构建 DOM 树。

    HTML 有很强的容错能力，如果是 XHTML（有严谨的语法格式），那这个过程就会轻松很多。

二：把 CSS 属性，添加到 DOM 树上：

  • 并不上把 DOM 全构建完，再来添加 CSS 属性的。 浏览器的整个过程都是一个流式处理的过程。
  • CSS 也是一门语言，需要经过词法分析和语法分析的步骤，变成计算机可以理解的结构。 这部分涉及到 编译原理 里的内容。

三： 排版

排版： 浏览器的里文字、图片、表格等等，确定他们位置的这个过程。

在这之前的工作是可以流式处理的，产出的是一个一个的元素。但在排版的时候，就需要拿到全部元素了。

  • 最基本的排版方式就是 正常流排版。跟我们平时书写的方向一致。

  • 浏览器的文字排版遵循工人的文字排版规范，这是一个很复杂的系统。

    规定了行模型 和 文字在行模型的排布，行模型规定了行顶、行底、文字区域、基线等对齐方式。

    英语本上的四条线就是一个简单的行模型。

  • 浏览器还支持元素和文字的混排。元素占据一个矩形区域，允许边框、边距、留白。

    这个就是我们所说的 盒模型。

  • 在正常流上，元素还支持 绝对定位元素、浮动元素。

    绝对定位元素：从正常流中抽离出来，不参加排版计算。 由 left、top确定位置。需要逐层找到其父级的 position 非 static 元素。

    浮动元素：在正常流中向左或向右移动到边界，占据排版空间。

  • 还有其他的用的较多的 flex 排版。

四： 渲染、绘制

根据之前工作得到的样式信息、元素的位置、大小信息。为每个元素在内存中渲染他的图形，并且绘制到相应的位置上去。

  • 渲染， render。

    在图形学中指： 把模型变成位图的过程。

    位图： 内存里的一张二维表。把每一张图片的每一个像素对应的颜色保存进去。

    位图信息是 DOM 树中占据浏览器内存最多的信息，最内存优化时，主要考虑这里。

    图形的渲染：

    盒的背景、边框、SVG元素、阴影等特性，都是需要绘制的图形类。

    需要一个底层库来支持。操作系统一般都会提供，比如 Android 里有 Skia，Windows平台有 GDI。

    浏览器的实际实现会把阴影作为一个独立的盒来处理。

    ​

    文字的渲染：

    也需要底层库来支持，叫字体库。 常用的是 Freetype，C++编写的开源字体库。

    字体库可以读取字体文件、根据字符的码点抽取出字形。

    字形分为，

    像素字形：6px、8px这样的小尺寸用像素字形。
    矢量字形：大尺寸用矢量字形。

  • 合成，compositing

    是可选的步骤。 主要是对性能的一个考量。

    渲染不会把子元素渲染到位图上，合成就是把一部分子元素渲染到合成的位图上面。

    那要怎么选呢，就是“猜测“可能变化的元素，把他排除到合成之外。

  • 绘制

    绘制： 位图或合成层，最终绘制到屏幕上，变成肉眼可见的图像。

    浏览器只需要位图交给操作系统来处理即可。一般显示的位图位于显存中。

    一种 too young too simple 的方法;

    之前拿到了每个元素的位置，也进行了合成，就根据 z-index 把他们依次绘制到屏幕上。

    想一个情形：滑动鼠标。每次移动都要重新绘制，否则，就会有残影。

    ​

    计算机图形学中，使用”脏矩阵“算法。

    就是把屏幕均匀地分成了若干个矩阵。每次需要重新绘制时，只绘制他所影响到的几个矩形区域即可。

    ​