1. CSS和JS在网页中的放置顺序是怎样的？
一般CSS放在head内，JS放在底部。
CSS放在head内，可以保证CSS的下载，CSSDOM树的构建。
JS脚本放在底部，不会妨碍HTML,CSS的下载，DOM树,CSSOM树的构建。
js所依赖的库(比如jquery)放置在js的前面
2. 解释白屏和FOUC
浏览器的白屏与无样式内容闪烁（Flash of unstyled content）,是由于浏览器加载与显示页面方式不同造成的：
IE 会出现白屏现象，这是因为其等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部，将会出现白屏。——样式表在页面中位置并不影响页面中组件的下载时间，但是会影响页面的呈现。 IE 为什么会这样做？因为样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解释完毕之前无需要绘制任何东西，否则，在其准备好之前显示的内容会遇到FOUC问题。
这样IE 就避免了FOUC问题，也就自然的会出现白屏现象。在IE中，将样式表放在文档底部公导致白屏问题的情形有以下几种：
一、在新窗口中打开时
二、重新加载时
三、作为主页打开时
FireFox 当把样式表放在页面底部时，会遇到FOUC问题，因为FF为了用户体验，对所有都是对页面中的组件逐步呈现。
此外，引入样式表时，有两种方式：link和@import
link: <link rel = "stylesheet" href = "styles1.css">
@import:
<style type = "text/css">
@import url("styles1.css");
@import url("styles2.css");
... ...
</style>
一个style块可以包含多个@import规则，但@import规则必须放在所有其他规则之前。使用@import规则需要注意的是：即便把@import规则放在文档的HEAD标签中，可能导致页面组件下载时的无序性，进而导致白屏（对于IE）和FOUC(对于FF)问题的产生。
为了很好的避免白屏和FOUC问题，请遵循以下规则：使用LINK标签将样式表放在文档的HEAD中
3. async和defer的作用是什么？有什么区别
都是用来异步加载script 标签的
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="script.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
详细可以参考MDN
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script
4. 简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
中文版参考链接
网友评论