1.CSS和JS在网页中的放置顺序是怎样的？
html是一种结构松散的文档类型，理论上CSS与JS可以放在网页的任何地方，但由于网页的渲染机制，避免显示（白屏、FOUC）与加载（阻塞）的问题，则CSS与JS的放置有一定的规则：CSS通过link标签引入，放置在文档顶部，<head>标签内；而JavaScript放置在页面底部，通过<script>标签引入，放置在body的闭合标签之前。
2.解释白屏和FOUC
- 白屏：由于浏览器会将html文件解析为DOM树，将CSS解析为CSSOM树，然后将它们合并成render渲染树，最后根据渲染树绘制网页，如果把样式放在底部,浏览器将等到CSS加载完成时才绘制网页，在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现；如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
- FOUC：如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).由于 Firefox 的渲染机制（会逐步加载无样式内容），Firefox会一直表现出 FOUC 。
3.async和defer的作用是什么？有什么区别
由于浏览器加载JS脚本时，会禁止并发阻塞后面内容的呈现与其后组件的下载。于是有了async与defer来解决这个问题。
- async: 在加载和执行JS脚本时会与后续文件的加载和渲染并行进行（异步）。
- defer：加载JS脚本后面的文档元素过程将和JS脚本的加载异步进行，但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
4.简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
渲染流程图
网友评论