1.CSS和JS在网页中的放置顺序是怎样的?
css放在顶部head标签内;js会阻塞后面内容的展现并阻止其后的下载,所以放置在body标签最后。
2.解释白屏和FOUC
白屏问题
- 如果把样式放在底部,在某些场景(新窗口打开,刷新等)页面会出现白屏。因为浏览器渲染是等html和css全部加载完成后再绘制到浏览器上,样式放在底部加载时间会过长,不是逐步展现,所以出现白屏。
- 如果使用@import 标签,即使css放入link,并且放在头部,也可能出现白屏。
- 把js放在顶部也会出现白屏。
FOUC (无样式内容闪烁)
如果样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现FOUC现象(逐步加载无样式的内容,等css加载后页面突然展现样式的现象),对于Firfox会一直变现出FOUC。出现原理:当样式表加载要晚于其渲染的元素加载时,会先出现没有样式的内容,等到加载到样式表时,浏览器会重新渲染次页面,从而出现FOUC现象。
3.async和defer的作用是什么?有什么区别
async和defer能使加载后续文档元素的过程和script.js的加载并行进行(异步)。
区别:
defer:脚本的执行要在所有元素解析完成之后,DOMContenloaded时间出发之前。有顺序
async:不保证顺序
4.简述网页的渲染机制
1.解析HTML标签,构建DOM树;
2.解析css标签,构建CSSOM树;
3.把DOM树和CSSOM树组合成渲染树(render tree);
4.在渲染树的基础上进行布局,计算每个节点的几何结构;
5.把每个节点绘制到屏幕上(painting)。
5
<a href="//www.greatytc.com/p/eaf952815f07">博客</a>