CSS和JS在网页中的放置顺序是怎样的？
- 一般而言,CSS放置在网页文档的头部,能够保证用户更早的看到页面,提高用户体验,但缺陷是若放置的css文件过多,过大,会延长屏幕的白屏时间;JS放置在body内的尾部,同时也有时引入插件需要把JS放在头部,如jQqury的引入,一般放在头部
- 由于浏览器的解析方式是自上而下的加载html文档,css是并行加载,js是阻塞加载,会影响页面的加载速度,如果js的文件较大,很容易出现FOUC现象,并且js还有可能修改DOM,js的执行可能依赖最新的样式,需要保证在js执行前所有css样式加载和解析完毕
解释白屏和FOUC
白屏发生情形:
- 将css文件放在html文档的最后
- 使用@import引入css(因为通过@import引入的css文件会被最后加载 )
- 将js文件放在头部阻塞html和css的加载
原因:
对于-webkit内核的浏览器(IE也会),在进行网页渲染时,会同时加载html和css分别构建DOM树和CSSOM树,等两者都构建完成后,再 绘制渲染树,然后将页面显示出来.如果在HTML中将css文件放置在文档的最后,那么将会导致CSSOM晚于DOM树的建立,浏览器需要等待CSSOM建立,再进行网页内容的绘制,这个等待的过程,没有内容显示导致了白屏的产生
FOUC: 仍是由于浏览器的解析造成的,如果把样式放到底部,对于IE浏览器(主要是firfox)在某些场景下(点击链接,URL,书签)会出现FOUC现象(逐步加载无样式的内容,等css加载后页面突然展现样式)
async和defer的作用是什么？有什么区别
- 一般情况下JS文件没有async和defer,会立即加载文件并解析,"立即"是指在渲染该script标签之下的文档元素之前,也就是不等待后续载入的文档元素,读到就加载并执行;有了async和defer可以实现异步加载,async加载和渲染后续文档的过程将和js的加载与执行并行进步(异步);defer同理,但js的执行要在所有元素解析完成之后,DOMContentLoaded事件触发之前完成
简述网页的渲染机制
- 解析HTML标签,构建DOM树
- 解析CSS标签,构建CSSOM树
- 把DOM和CSSOM组合成渲染树
- 在渲染树的基础上进行布局,计算每个节点的几何结构
- 把每个节点绘制到屏幕上
