重学前端-总结：14、浏览器：一个浏览器是如何工作的？（阶段五）

重学前端-总结：14、浏览器：一个浏览器是如何工作的？（阶段五）

浏览器处理过程：

• URL 变成字符流，
• 把字符流变成词（token）流，
• 把词（token）流构造成 DOM 树，
• 把不含样式信息的 DOM 树应用 CSS 规则，变成包含样式信息的 DOM 树
• 根据样式信息，计算了每个元素的位置和大小。

渲染

浏览器中渲染这个过程：把每一个元素对应的盒变成位图。这里的元素包括 HTML 元素和伪元素，一个元素可能对应多个盒（比如 inline 元素，可能会分成多行）。每一个盒对应着一张位图。

渲染过程是非常复杂的，可以分成两个大类：图形和文字。

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

• 文字
  也需要用底层库来支持，叫做字体库。字体库提供读取字体文件的基本能力，它能根据字符的码点抽取出字形。目前最常用的字体库是 Freetype，这是一个 C++ 编写的开源的字体库。

合成

合成概念

合成是英文术语 compositing 的翻译，这个过程实际上是一个性能考量，它并非实现浏览器的必要一环。

合成的过程

为一些元素创建一个“合成后的位图”（我们把它称为合成层），把一部分子元素渲染到合成的位图上面。

合成优化
合成是一个性能考量，那么合成的目标就是提高性能，根据这个目标，我们建立的原则就是最大限度减少绘制次数原则。

绘制

绘制是把“位图最终绘制到屏幕上，变成肉眼可见的图像”的过程

CSS 性能优化，应该尽量避免"重排"和"重绘"

因为，实际上，“绘制”发生的频率比我们想象中要高得多。我们考虑一个情况：鼠标划过浏览器显示区域。这个过程中，鼠标的每次移动，都造成了重新绘制，如果我们不重新绘制，就会产生大量的鼠标残影。

设置合适的矩形区域大小，可以很好地控制绘制时的消耗。设置过大的矩形会造成绘制面积增大，而设置过小的矩形则会造成计算复杂。