1、CSS和JS在网页中的放置顺序是怎样的？
- CSS代码放置于
head中用style包裹，这有由于浏览器的渲染顺序所决定的，防止IE中出现白屏的情况。 - JS放置一般是在
body闭合标签之前，因为JS一般会涉及到一些DOM操作，所以要等全部的DOM元素都加在完才继续加在JS。还有一个因素是相对于页面中的CSS和图片，JS代码是会造成堵塞的，而CSS和图片则可以同步加载，但是JS要执行完一个后才能执行后续的内容，这样容易造成蓝屏的情况。
2、解释白屏和FOUC
- 白屏的根本原因是页面的请求过长而造成的；
如果把样式放在网页底部，对于浏览器来说在某些场景下页面会出现白屏而不是出现内容逐步展现的现象。
这是因为浏览器渲染时必须获得DOM树和CSSOM树后才能组合成渲染树，再在此基础上把每个节点绘制到屏幕上。由于把样式放在了底部，虽然浏览器构建了DOM树，但因为没有及时构建CSSOM树，因此浏览器是不会渲染网页的，这时就会造成白屏。
如果使用@import标签，也会出现白屏，因为它会向外请求样式，请求期内也不会构建CSSOM树。 - FOUC：Flash of Unstyled Content，无样式内容闪烁。是指如果把样式放在底部，对于某些浏览器，在某些场景下会出现逐步加载无样式的内容，等CSS加载后页面突然展现样式的现象。尤其是火狐浏览器，因为其渲染机制，如果把CSS放在底部会一直表现出FOUC。
3、async和defer的作用是什么？有什么区别
- 它们的作用主要是作用于script标签。对于没有这两个关键字的脚本标签，浏览器会立即加载并执行指定的脚本，即在渲染该script标签之下的文档元素之前，不等待后续载入的文档元素，读到就加载并执行。
- async: 加载和渲染后续文档元素的过程将和脚本的加载于执行并行进行（异步），但不保证顺序。
- defer：加载后续文档元素的过程和脚本的加载并行进行（异步），但脚本的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。它让脚本延迟到文档解析和显示后执行，保证加载的顺序。
4、简述网页的渲染机制
- 简单的说渲染过程主要是以下步骤：
1、解析HTML
2、构建DOM树
3、DOM树和CSS样式进行附着构造呈现树
4、布局
5、绘制
详细的内容可以参考该网页：http://taligarsiel.com/Projects/howbrowserswork1.htm
网友评论