(一)浏览器如何渲染页面

1.浏览器引擎（或叫浏览器内核）

浏览器具有两个引擎渲染引擎，JS引擎。

渲染引擎：用来解析HTML和CSS。

JS渲染引擎：用来执行JS代码。

浏览器引擎对照表如下：

浏览器	渲染引擎	JS引擎
Google Chrome	Blink	V8
Mozilla Firefox	Gecko	SpiderMonkey
Safari	Webkit	JavaScriptCore
Edge	Blink	V8

2.渲染引擎工作流程

说明：渲染引擎对请求的HTML进行解析，经过语法分析和词法分析将其转为DOM Tree。遇到css则对样式文件进行解析（不会阻塞HTML进行解析），将其转为CSSOM Tree。解析完毕后将DOM Tree和CSSOM Tree合并为Render Tree，由布局引擎对Render Tree进行布局，比如元素大小，位置等。再由绘制引擎对其绘制最后显示。

渲染引擎和JS引擎同时只能执行一个

1. 在解析过程中遇到普通引入的js文件则会停止HTML解析,而是下载js文件并立即交由JS引擎执行，执行完毕，则继续交由渲染引擎继续解析HTML。
2. 在解析过程中遇到async引入的js文件则下载js文件,下载过程中不会阻塞HTML解析,下载完毕则立即交由JS引擎执行，执行时会停止HTML解析，执行完毕，则继续交由渲染引擎继续解析HTML。
3. 在解析过程中遇到derfer引入的js文件则下载js文件,下载过程中不会阻塞HTML解析,下载完毕也不会立即执行，而是等到html解析完毕后在交由JS引擎执行。