浏览器渲染机制

一、CSS和JS在网页中的放置顺序是怎样的？

推荐的放置顺序是将css通过链接引入，放在head标签内部；而JS放在body的底部。否则会出现白屏或者FOUC。

html引入css有四种方法。
1、内嵌式，就是把css的style放在标签内部；
例如：

2、内部引用，把样式写在标签内部，写在中；
例如：

3、外部引用，外部引用有两种方式，一是用过标签链接；二是通过@import导入。
标签放在内部；
例如：

@impot是属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
例如：
@import url(style.css);
参考

二、解释白屏和FOUC

首先出现这两种情况的原因是：
1、link标签放在html底部，导致css最后下载。
2、使用@import引入css文件，即使位置在html顶部。因为@import是放在css的顶部，同样是在css中，当解析css遇到@import，又会去下载@import引入的css，导致页面组件下载时的过程较长。

原因的机制是相同的，我们讨论link标签放在html底部。以Chrome和Firefox浏览器为例，这两者内核不同，会出现不同的现象。
　　Chrome是把css解析成CSSOM树，再去与html的DOM树结合，最后绘制渲染书到显显示屏。从用户打开网页到出现内容这段时间，浏览器是没有内容显示的，所以css下载相比于html解析晚，就会出现白屏。

另一个出现白屏的原因是将脚本放在html顶部。网页文档下载完成后，紧接着就开始下载网页中的组件了（图片、样式表文件、脚本），为了更快的显示网页内容，浏览器会并行下载这些组件。但是下载脚本时，并行下载是被禁用的。

脚本会阻塞后面内容的呈现和脚本会阻塞其后组件的下载。也就是说，下载脚本时，浏览器不会启动其他的下载。因此浏览器会等待，以确保页面能正确的布局。当然并不所有的脚本都会使页面出现白屏，当使用异步加载脚本时或者脚本放在html底部就会防止这种情况。

Firefox是页面逐步加载的，文字首先显示，然后是图片。最后样式表正确地下载并解析。当link放在底部，由于在文字加载时还没有加载css，这时候html是以一种浏览器默认的样式显示在屏幕。等到css解析完成之后，再去与html的DOM树结合一次，再一次渲染，最后出现再出现在屏幕上。所以从html内容第一次出现在屏幕，到第二次出现，就会出现页面闪烁。

当把link放在html顶部，就可以早早的下载css，节省加载时间。

三、异步加载：async和defer的作用

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

四、简述网页的渲染机制

1、渲染引擎解析html，并将html标签转化为DOM树节点。
2、渲染引擎解析外部或者style标签的样式信息为CSSOM树。
3、CSSOM树和DOM 树构建渲染树。这个时候的渲染树是由一些包含有颜色和大小等属性的矩形组成。他们将按照一定的顺序显示在屏幕上。
4、布局渲染树，它将确定每个节点在屏幕上的确切坐标。
5、绘制渲染树，即遍历渲染树，并使用UI后端层绘制每个节点。
这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
参考资料