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

╰半橙微兮° 2021-09-28 05:44 265阅读 0赞

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

浏览器处理过程：

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

## 渲染 ##

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

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

*  图形  
    盒的背景、边框、SVG 元素、阴影等特性，都是需要绘制的图形类
 *  文字  
    也需要用底层库来支持，叫做字体库。字体库提供读取字体文件的基本能力，它能根据字符的码点抽取出字形。目前最常用的字体库是 Freetype，这是一个 C++ 编写的开源的字体库。

## 合成 ##

合成概念

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

合成的过程

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

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

## 绘制 ##

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

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

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

设置合适的矩形区域大小，可以很好地控制绘制时的消耗。设置过大的矩形会造成绘制面积增大，而设置过小的矩形则会造成计算复杂。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/5f03ebefcb294fcaba43bf0bf09ddf41.png