---
title: 浏览器的组成
date: 2020-11-20
author: ac
tags: 
 - JavaScript
categories:
 - Web
---

> 浏览器加载网页时，会去加载和执行JavaScript脚本和CSS样式文件实现网页各种动态效果。

<!-- more -->

## 浏览器的组成

核心两大部分：渲染引擎和JavaScript解释器（JavaScript引擎），它们是互斥的不能同时运行。

### JavaScript 引擎
主要作用是，读取网页中的 JavaScript 代码，对其处理后运行。	
JavaScript 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。

- 优点：是运行和修改都比较方便，刷新页面就可以重新解释；
- 缺点：是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言。

脚本的执行顺序由它们在页面中的出现顺序决定,这是为了保证脚本之间的依赖关系不受到破坏。

通常会将脚本文件都放在网页尾部加载，因为正常的网页加载流程：

1. 浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
2. 解析过程中，浏览器发现`<script>`元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
3. 如果`<script>`元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
4. JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。

> 浏览器一般有限制，同时最多下载6～20个资源，即最多同时打开的 TCP 连接有限制，这是为了防止对服务器造成太大压力。如果是来自不同域名的资源，就没有这个限制。所以，通常把静态文件放在不同的域名之下，以加快下载速度。

**JS脚本的加载**

浏览器加载JS脚本主要通过`<script>`标签来加载和解析外部脚本或嵌入的JS代码。

`<script>`标签可以添加一些属性来调节脚本的加载。

- defer属性：浏览器发现`<script>`标签有defer属性会继续往下解析HTML，同时并行下载脚本，等解析完HTML页面后，再执行下载好的JS代码
- async属性：浏览器发现`<script>`标签有defer属性会继续往下解析HTML，同时并行下载脚本，等到下载完后，如果HTML页面没有解析完会暂停，开始执行下载的脚本，等执行完再恢复解析HTML页面。

对于type属性是`<script>`标签来指定脚本类型的，值为：`text/javascript`(默认)或`application/javascript`。如果是其它值，浏览器不会执行其中的代码。



### 渲染引擎

主要作用是，将网页代码渲染为用户视觉可以感知的平面文档。

 不同的浏览器有不同的渲染引擎：

- `Firefox：Gecko `引擎
- `Safari：WebKit` 引擎
- `Chrome：Blink `引擎
- `IE: Trident `引擎
- `Edge: EdgeHTML` 引擎

渲染引擎处理网页，通常分成四个阶段（**渲染机制**）：

1. 解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
2. 对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
3. 布局：计算出渲染树的布局（layout），流式布局模型（Flow Based Layout）
4. 绘制：将渲染树绘制到屏幕。

以上四步并非严格按顺序执行，往往第一步还没完成，第二步和第三步就已经开始了。所以，会看到这种情况：网页的 HTML 代码还没下载完，但浏览器已经显示出内容了。

有了 `RenderTree`，就知道了所有节点的样式，然后计算它们在页面上的大小和位置，最后把节点绘制到页面上。



### 重流|重绘

渲染树转换为网页布局，称为“布局流”（flow）；布局显示到页面的这个过程，称为“绘制”（paint）。它们都具有阻塞效应，并且会耗费很多时间和计算资源。

页面生成以后，脚本操作和样式表操作，都会触发“重流”（reflow）和“重绘”（repaint）。用户的互动也会触发重流和重绘，比如设置了鼠标悬停（`a:hover`）效果、页面滚动、在输入框中输入文本、改变窗口大小等等。

> 重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流。比如改变元素颜色，只会导致重绘，而不会导致重流；改变元素的布局，则会导致重绘和重流

**如何较少重绘和重流**

1. 使用 transform 替代 top 
2. 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回 流（改变了布局 
3. 避免使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。 
4. 尽可能在 DOM 树的最末端改变 class，重流是不可避免的，但可以减少其影 响。尽可能在 DOM 树的最末端改变 class，可以限制了重流的范围，使其影响 尽可能少的节点。 
5. 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽 量少的添加无意义标签，保证层级扁平。
6. 将动画效果应用到 position 属性为 absolute 或 fixed 的元素上，避免影响其他元 素的布局，这样只是一个重绘，而不是重流。

### 浏览器优化

现代浏览器大多都是通过**队列机制**来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（即 16.6ms）才会清空队列，但当你获取布局信息的时候，队列中可能有会影响这些属性或方法返回值的操作，即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值。 

**主要包括以下属性或方法：** 

1. offsetTop、offsetLeft、offsetWidth、offsetHeight 
2. scrollTop、scrollLeft、scrollWidth、scrollHeight 
3. clientTop、clientLeft、clientWidth、clientHeight 
4. width、height 
5. getComputedStyle() 
6. getBoundingClientRect() 

所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。



### 参考文章

[1] 浏览器环境概述 https://wangdoc.com/javascript/bom/engine.html