1、CSS和JS在网页中的放置顺序是怎样的？
CSS 放在<header></header>里，
因为网页的渲染机制是当css和加载好的这部分HTML，组合成渲染树的，这样才开始
在屏幕上绘制。而如果放在底部的话，加载多内容的HTML会耗费很长的时间，会有白屏
现象。
JS 放在body标签的最底部
一个网页是先要有HTML和CSS，之后才需要JS。同时如果把JS放在头部，会阻塞后面内容的加载。因而放在最底部。
2、解释白屏和FOUC
白屏：
（1） 如果把样式放在底部，对于IE浏览器，在某些场景下页面会出现白屏，而不是内容逐步展示。
如果把样式放在底部。因为先加载HTML，需要等待时间，这个时候屏幕上是什么都看不到的，之后加载css也是需要时间的。于是就出现白屏。HTML的内容越多，等待时间越长。
（2）如果使用@import标签，即使CSS放入link，并且放在头部，也可能出现白屏。
使用@import 并不会立即加载到CSS，和样式放在底部是一样的效果
（3）如果将JS放在头部也会导致白屏现象。
JS会阻塞后面内容的呈现，会禁用并发，阻止其他内容的下载。
FOUC：如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等）会出现FOUC现象，（逐步加载无样式的内容，等CSS加载页面突然展现样式）.对于Firefox会一直表现出FOUC。
3、async和defer的作用是什么？有什么区别？
async: 加载后续文档元素的过程将和script.js的加载并行进行（异步）
defer: 加载后续文档元素的过程将和script.js的加载并行进行（异步）但script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。
defer: 脚本延迟到文档解析和显示后执行，有顺序。
async: 不保证顺序。
4、简述网页的渲染机制。
（1）解析HTML标签，构建DOM树
（2）解析CSS标签，构建CSSOM树
（3）把DOM和CSSOM组合成 渲染树 （render tree）
（4）在渲染的基础上进行布局，计算每个节点的几何结构把每个节点绘制到屏幕上
网友评论