1.CSS和JS在网页中的放置顺序是怎样的？
从理论上来说：因为HTML又是一种相对松散的文档类型，加上浏览器的容错性又非常高，所以CSS和JS可以放在页面内的任何一个位置，甚至可以放在<!DOCTYPE html>的外面！
从实际角度来说:我们还是习惯于把CSS放在<head>标签内部，JS放在<body>标签的最后并用<script>标签来包裹。
当然这样做是有原因的：
如果把CSS放在底部，在某些浏览器中的就会出现白屏的现象，因为大部分浏览器的绘制过程都需要html和CSS同时加载完毕才能进行绘制。
JS则更加霸道，因为JS是阻塞型的，解析器遇到<script>标记时立即解析并执行脚本。文档的解析将停止，直到脚本执行完毕。只要它放在哪里哪里就会被阻塞无法继续渲染，必须等待JS加载完毕才可以，所以大多数的情况下我们都把JS放在文档的最后，这样做的话浏览器在渲染完毕以后JS也就基本加载完毕，不影响用户的体验。
2.解释白屏和FOUC
白屏和FOUC其实是两种渲染机制所固有的特性。
内核以Blink、Webkit、Trident为主的浏览器认为：样式和内容没有共同加载完毕是没有办法去进行绘制的，为了避免二次渲染出现无样式的内容闪烁它们都选择了白屏。
具体表现：如果html内容很多，浏览器处理请求、加载需要较长时间，会出现浏览器一段时间内无内容呈现给用户，就是典型的白屏效果。
内核以Gecko为主的浏览器则认为：比起样式，用户更在意的是内容，所以它们选择优先呈现出加载完毕的内容，等样式加载完毕以后再次进行渲染。
具体表现：无样式内容闪烁就是随着页面的不断刷新，样式逐渐的展示出来。
3.async和defer的作用是什么？有什么区别
async和defer也可以达到不阻塞渲染的效果；
defer:脚本延迟到文档解析和显示后执行，有顺序；
async:不保证顺序
（1）带有 defer 属性的标签可以放置在文档的任何位置。对应的 JavaScript 文件将在页面解析到标签时开始下载，但不会执行，直到 DOM 加载完成，即onload事件触发前才会被执行。当一个带有 defer属性的 JavaScript 文件下载时，它不会阻塞浏览器的其他进程，因此这类文件可以与其他资源文件一起并行下载。
但是，defer 属性只被 IE 4 和 Firefox 3.5 更高版本的浏览器所支持，所以它不是一个理想的跨浏览器解决方案。在其他浏览器中，defer属性会被直接忽略，因此``标签会以默认的方式处理，也就是说会造成阻塞。然而，如果您的目标浏览器支持的话，这仍然是个有用的解决方案。
（2）async的作用和 defer一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。
但是，在有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。
4.简述网页的渲染机制
（1）解析 HTML 标签, 构建 DOM 树
（2）解析 CSS 标签, 构建 CSSOM 树
（3）把 DOM 和 CSSOM 组合成 渲染树 (render tree)
（4）在渲染树的基础上进行布局, 计算每个节点的几何结构
（5）把每个节点绘制到屏幕上 (painting)
当浏览器从服务器接收到了html文档，并把html在内存中转换成DOM树，在转换过程中如果发现某个节点上引用了CSS或者image，就会再发一个request去请求CSS或image，然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就可以了。但当引用了JS的时候，浏览器发送一个JS request就会一直等待该request的返回。
网友评论