# 浏览器的渲染机制

一个网页是有三部分组成：html，css和javascript

• Html: 网页元素内容
• CSS: 控制网页样式
• JavaScript：操作网页内容，实现功能或者效果

浏览器引擎（browser engine）中渲染引擎（render engine）负责显示请求内容。如果请求的内容是html，它就负责解析html和css样式，并在浏览器中显示出来。它的主要工作流程如下图：

Webkit引擎主要流程

Webkit是一个开源渲染引擎，作为Linux平台的引擎启动，并由Apple修改以支持Mac和Windows.Safari和Chrome都使用的Webki引擎

总的来说有5个步骤：
1、解析html 文件，创建DOM 树，文档标签为DOM树的节点
2、解析外部样式css文件和内联样式数据，构建 CSSOM 树
3、把 DOM 和 CSSOM 组合成 渲染树 (render tree)
4、在渲染树的基础上进行布局, 计算每个节点的几何结构
5、遍历Render tree ，把每个节点绘制到屏幕上 (painting)

白屏和FOUC（无样式内容闪烁）

白屏和FOUC是在网络不稳定时打开浏览器网页会发生的常见现象。不过，这并不是bug，是由于浏览器的解析渲染机制导致的。

白屏：浏览器在只有当文档全都加载完毕时，才会开始渲染界面，而在加载时，界面由于没有经过任何渲染，什么都不显示，这时候会有一种“白屏”的感觉。（IE、Chrome浏览器）
导致白屏的原因：
(1)样式文件放在底部，对于IE浏览器，在某些场景下(新窗口打开,刷新等)页面会出现白屏
(2)使用 @import 标签, 即使 CSS 放入 link, 并且放在头部,也可能出现白屏
(3)把 JavaScript 标签放入页面顶部也会导致白屏现象，在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载

FOUC：无样式内容闪烁。浏览器在加载文档时会一边解析html文档和css文档，一边渲染界面，当之前渲染过的样式在后面方生了改变或者重新定义，会引起回流和重绘制。界面渲染效果发生改变，会有一种界面闪烁改变的感觉。
（FireFox浏览器）
导致FOUC的原因 :
把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)。对于 Firefox 会一直表现出 FOUC 。

加载异步

对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载，而且直到JavaScript加载，解析，执行完成浏览器才会继续解析下面的文件。这也是为什么javascript标签应该放到页面底部的原因。所以我们需要解决JavaScript同步加载的问题，让他实现异步加载，这样就不容易出现问题。

async:页面的加载和渲染和js的加载、执行并行进行.

defer:加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
区别：async 是只要加载完成就执行，不存在执行顺序，而defer规定js的执行必须是在文档解析和显示完成之后。