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

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.

 

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

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

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

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

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

2.

 

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

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

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

a)

 

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

b)

 

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

 

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

i. 构建dom树

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

2. 树结构：

a)

 

b) 构建过程：

c)

 

ii. 样式计算

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

a) CSS来源,如图所示

b)

 

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

a)

 

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

a)

 

iii. 布局阶段

1. 创建布局树

a) 构造过程：

b)