1.CSS和JS在网页中的放置顺序是怎样的?
css放在<head></head>标签中间,是为了防止白屏的出现
js放在body标签内的最后,因为图片和css都是异步加载的,而js则是单个加载完成后才能执行下一步,如果将js放到head标签中就会出现 执行完成某一个js后,没有可以操作的内容,因为那是html还没有加载成功就要被js来操作,所以js放到body标签内部的最后面就可以避免这种情况的发生。。
2.解释白屏和FOUC
白屏的根本原因是浏览器在渲染的时候请求的时间过长导致的。浏览器渲染时必须获得DOM树和CSSOM树后才能组和渲染树,然后在此基础上把每个节点绘制到屏幕上。
因为将样式放到了底部,虽然构建了DOM树,但因为没有及时构建CSSOM树浏览器不会渲染网页,就会造成白屏。
而使用@important标签,也会出现白屏,请求期内不会构建CSSOM树。从而不会组合成渲染树,而由于构建 CSSOM 树的时间过程从而导致了白屏。
如果将js放在head头部中,因为js文件不同于css和图片的异步加载方式,js是加载完成了才能进行下一个步骤的执行。这样就会导致js下面的DOM树和CSS树的构建,从而导致白屏。
出现白屏的总结如下:
2.1.如果把样式放在底部,对于IE浏览器,某些场景下会出现白屏,而不是页面内容逐步展现。
2.2.如果使用@import标签,即使css放入link,并且放在头部,也可能出现白屏。
2.3.js放置在head中
FOUC:无样式内容闪烁
如果把样式放在底部,在某些场景下会出现FOUC现象(逐步加载无样式的内容,等css加载后页面会突然展现样式)对于Firefox会一直出现FOUC
Firefox会一直出现FOUC的原因是因为Firefox的渲染机制有关,Firefox是和chrome的不太一样的,chrome是等渲染树完成后然后计算节点的几何结构,等都计算完毕后再把全部的节点绘制到屏幕上。而Firefox则是每加载一次DOM树就会重绘一次网页样式,一直到所有内容完成后停止。当firefox中DOM绘制完成后,css加载有延迟的时候,就会出现无样式内容闪烁(FOUC)现象。
3.async和defer的作用是什么?有什么区别
async和defer的作用是让js实现异步加载而不是从上到下一个js执行完成后才能执行下一个js文件。
区别是:defer:在页面解析完毕后再执行,有先后执行的顺序差别。
async:页面的加载和渲染后续文档与script.js的加载与执行并行进行(异步的过程)是没有顺序的。
例如<script src="script.js"></script>没有defer或async,浏览器会立即加载并执行script.js文件,而script标签之后的文档要等script.js文件加载完成后才能开始加载与渲染。而
<script async src="script.js"></script>则是加载与渲染后续的文档将与script.js的加载与执行一起进行,不能保证执行顺序,这是一个异步的过程。
<script defer src="script.js"></script>如果该script即使放在了head标签内部,也会在HTML页面解析完毕之后再执行。
4.简述网页的渲染机制
4.1解析HTML元素,构建DOM树
4.2解析css样式,构建CSSOM树
4.3将DOM树和CSSOM树组合成渲染树(render tree)
4.4在渲染树的基础上进行布局,计算每个节点的几何结构
4.5把每个节点绘制到屏幕上(painting)