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

（1）CSS

对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面，将内容呈现在页面上。

对于Firefox，head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示，会出现FOUC无样式内容闪烁。

对于IE/Edge。未加载完成的<link rel="stylesheet">标签只阻塞其后面的HTML内容显示，而对其前面的HTML内容则不阻塞，所以如果将CSS放在前面head里则和Chrome一样，如果放body里则会出现FOUC无样式内容闪烁。

综上：如果你想让页面不闪烁放在head里，如果你想让页面不白屏放在body里。

（2）JS

如果JS文件很小放在前面head里或后边body闭合标签之前都可以。如果JS文件很大则应该放在后面body的闭合标签之前。

因为在加载 JavaScript时会阻止其他内容的下载，要等到JS文件下载解析完之后才会显示网页内容。若JS文件很大放在前面就会导致加载时间较长，网页会一直白屏。还有一个原因是因为JS一般会涉及到一些DOM操作，所以要等全部的dom元素都加载完再加载JS。

2.为何出现白屏问题与FOUC无样式内容闪烁？

不同的浏览器对于CSS和HTML的处理方式不同，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示（白屏问题）。有的是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改（FOUC无样式内容闪烁）

Firefox、Opere在加载样式表的时候是边加载边渲染。这样既有利也有弊：利在使得页面可以尽快的开始渲染，而无须等待全部的样式表都加载下来之后再开始渲染；而弊端在于之前加载并渲染的样式在后面又重新定义或者修改了布局样式，那么将会造成一定程度上的闪烁（FOUC， 即， Flash of Unstyled Content，无样式内容闪烁），闪烁的程度主要看所 影响的元素的范围和数目。

而IE、Chrome、Safari则是在全部的样式表完全加载下来之后才开始渲染页面样式将内容呈现在页面上，没下载完之前页面是空白的。这样做也同样是有利有弊：利在于可以避免 Firefox、Opera中出现的闪烁的问题（虽然在IE下闪烁是经常的事情），可以确保样式会统一解析并渲染页面；而弊端在于页面全部样式表的加载延迟了页面渲染的时间，如果样式表加载的时间较长，或者加载错误，将会导致页面一直处于空白状态或者无样式状态。

导致白屏的原因：

1. 样式文件放在底部，对于IE浏览器，在某些场景下(新窗口打开,刷新等)页面会出现白屏

2. 使用 @import 标签, 即使 CSS 放入 link, 并且放在头部,也可能出现白屏

3. 把 JavaScript 放入页面顶部也会导致白屏现象，在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载

导致FOUC的原因 :

• 把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式)。对于 Firefox 会一直表现出 FOUC 。

总结：白屏问题与FOUC无样式内容闪烁只能二选一，不可避免。

3、async和defer的作用是什么？有什么区别

1.<script src="script.js"></script>

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是会打断后面HTML的解析，只有等该脚本执行完成后，浏览器才继续解析后面的HTML文档元素。

2.<script defer src="myscript.js"></script>

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

3.<script async src="script.js"></script>

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

然后从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

下图可以非常好的表示这个过程的差别，其中：蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

Paste_Image.png

上图告诉我们以下几个要点：

1. defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）

2. 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的

3. 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的。defer表示脚本可以延迟到文档完全被解析和显示之后在执行。defer和async都是只对外部js脚本有效，对嵌入脚本无效。

4. async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。async表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。

5. 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics.

4.简述网页的渲染机制

(1) 解析 HTML 标签, 构建 DOM 树

(2) 解析 CSS 标签, 构建 CSSOM 树

(3) 把 DOM 和 CSSOM 组合成 渲染树 (render tree)

(4) 在渲染树的基础上进行布局, 计算每个节点的几何结构

(5)把每个节点绘制到屏幕上 (painting)