深入浏览器内部谈性能优化

ゝ一纸荒年。 2023-02-24 11:25 27阅读 0赞

1. **浏览器发展历史**

a. 1995 年，美国网景公司因“网景浏览器”的发布而快速崛起

b. 同年，微软发布windows95，捆绑IE

c. 2002年，微软占据了浏览器市场80%的份额

2. **浏览器三大进化路线（Web应用能做的事以及未来发展趋势）**

a) 应用程序Web化，如：视频、音频、游戏

b) Web应用移动化，如：谷歌新推出的PWA方案

c) Web操作系统化，如，SOA，WebAssembly

3. **学习浏览器的重要性**

a) 准确评估 Web 开发项目的可行性

i. 技术选型

ii. 方案规划

b) 从更高维度审视项目

i. 用户体验

ii. 整体观感

c) 在快节奏的技术迭代中把握本质

i. 脚本执行速度

ii. 前端模块化开发

4. **进程与线程**

a) 概念

i. 线程：用来处理程序任务，不能单独存在

ii. 进程：即是一个程序运行的实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

iii. 线程图解如下：

iv.

![深入浏览器内部谈性能优化][format_png]

v. **线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率**

b) 进程与线程的四大特点

i. 进程中的任意一线程执行出错，都会导致整个进程的崩溃。

ii. 线程之间共享进程中的数据

1. 如图：线程之间可以对进程的公共数据进行读写操作

![深入浏览器内部谈性能优化][format_png 1]

iii. 当一个进程关闭之后，操作系统会回收进程所占用的内存

iv. 进程之间的内容相互隔离

5. **渲染流程：HTML+CSS+JS是如何渲染成页面的？**

![深入浏览器内部谈性能优化][format_png 2]

从上图可以看出，左边的HTML、CSS、JS经过中间渲染模块的处理，变成了用户在屏幕上看到的元素

![深入浏览器内部谈性能优化][format_png 3]

由于渲染机制过于复杂，所以渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做**渲染流水线。**如图：

![深入浏览器内部谈性能优化][format_png 4]

c) 按照渲染的时间顺序，流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

i. **构建dom树**

1. 原因：浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树

2. 树结构：

![深入浏览器内部谈性能优化][format_png 5]

b) 构建过程：

![深入浏览器内部谈性能优化][format_png 6]

ii. **样式计算**

1. 将CSS转化成浏览器能够理解的结构

a) CSS来源,如图所示

![深入浏览器内部谈性能优化][format_png 7]

2. 转换样式表中的属性值，使其标准化

![深入浏览器内部谈性能优化][format_png 8]

3. 计算出 DOM 树中每个节点的具体样式

![深入浏览器内部谈性能优化][format_png 9]

iii. **布局阶段**

1. 创建布局树

a) 构造过程：

![深入浏览器内部谈性能优化][format_png 10]

[format_png]: /images/20230209/5bc84993fe8f457f818bbd98fc156a03.png
[format_png 1]: /images/20230209/9409f36575c7497494e295c6d502ce70.png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cDovL3A2LXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS9hZjI1YmRkZDFhOGU0NzVkOGI2NjkwODExNDNjY2I1MQ?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS85MDJmZjYzMTQ0NDU0NDY4ODY3MDJlMTYwMjZjNjRlNw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cDovL3AzLXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS81NmE4NWZiNmNmYzA0ZDBlYjI5Y2IxODBkYjIxNzNmNA?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cDovL3AxLXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS9mMzcyOWYxNmYxNTQ0NDIwYTMzOTBhZTE2YzBkMGZhNQ?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cDovL3AzLXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS82MjFlNTFjZDM4MGI0MjBjYWM1OGUxMzBkMWIzZTgwZQ?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cDovL3A2LXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS9lZjdmNTQzMTg4ZTA0OGRkYWEzYzU5NzVjYjFjMWY1NA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cDovL3AzLXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS8yM2JhOGZhYTUxZmM0NWZmODBhMWRlNTE1MmU0Y2MxMw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cDovL3A2LXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS9lYmQwZDk3M2YxN2Y0MDg5OTA4N2Q1MzQ3ODA3NjQ3Mg?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cDovL3A2LXR0LmJ5dGVpbWcuY29tL2xhcmdlL3BnYy1pbWFnZS81YjJkYzk4ODU2MjY0ZGZkODhkMzgxZjliMjhlMGZjZQ?x-oss-process=image/format,png