进阶1

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

css放在顶部head标签内；js会阻塞后面内容的展现并阻止其后的下载，所以放置在body标签最后。

2.解释白屏和FOUC

白屏问题

• 如果把样式放在底部，在某些场景（新窗口打开，刷新等）页面会出现白屏。因为浏览器渲染是等html和css全部加载完成后再绘制到浏览器上，样式放在底部加载时间会过长，不是逐步展现，所以出现白屏。
• 如果使用@import 标签，即使css放入link，并且放在头部，也可能出现白屏。
• 把js放在顶部也会出现白屏。

FOUC (无样式内容闪烁）
如果样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象（逐步加载无样式的内容，等css加载后页面突然展现样式的现象），对于Firfox会一直变现出FOUC。出现原理：当样式表加载要晚于其渲染的元素加载时，会先出现没有样式的内容，等到加载到样式表时，浏览器会重新渲染次页面，从而出现FOUC现象。

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

async和defer能使加载后续文档元素的过程和script.js的加载并行进行（异步）。
区别：
defer：脚本的执行要在所有元素解析完成之后，DOMContenloaded时间出发之前。有顺序
async:不保证顺序

4.简述网页的渲染机制

1.解析HTML标签，构建DOM树；
2.解析css标签，构建CSSOM树；
3.把DOM树和CSSOM树组合成渲染树（render tree）；
4.在渲染树的基础上进行布局，计算每个节点的几何结构；
5.把每个节点绘制到屏幕上（painting）。

5

<a href="http://www.jianshu.com/p/eaf952815f07">博客</a>