1.CSS和JS在网页中的放置顺序是怎样的？
CSS 放在<header>标签里面。保证浏览器首先加载外部链接的css样式的同时继续解析html标签。如果放在底部的话，对于IE浏览器，某些场景下（打开新的窗口，刷新页面）时会出现白屏，而不是逐步展现内容；
JS 放在body标签的最底部。保证浏览器在加载完页面内容后再加载脚本。JS是用来操作页面元素，如果不放在最后，运行到JS时候，就会报错，同时脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载；
2.解释白屏和FOUC
- 白屏现象：
- 如果把样式放在底部，对于ie浏览器，在某些场景下(新窗口打开，刷新等)，页面会等到html加载完再进行加载css样式，会出现白屏，而不是内容逐步呈现。
- 如果使用@import标签，即使css放入link，并且放在头部，也有可能白屏
- 脚本会阻塞后面内容的呈现和下载,所以js放置在head中也会导致白屏的可能.外部脚本加载过长(比如一直无法下载完成),就会出现出现网页暂时失去响应
- FOUC(Flash of Unstyled Content) 无样式内容闪烁：
- 逐步加载无样式内容，等css加载好以后页面突然展现的样式。也就是说浏览器现在加载没有样式的内容，突然解析到css样式了，就会对页面重新渲染，这个时候就会出现FOUC现象。在ie中如果把样式放在底部，在某些场景下(点击链接、输入URL、使用书签进入等等)，会出现FOUC现象。对于 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结合成渲染树；
(4)在渲染树的基础上进行布局，计算每个节点的几何结构；
(5)把每个节点绘制到屏幕上。
网友评论