一,CSS和JS在网页中的放置顺序是怎样的?
js理论上可以在html的任何地方链入或放置,为了更好的呈现页面效果,提升体验,css应被放入到HTML的<head></head>标签里,js应放在<body>的底部,</body>之前。
二,解释白屏和FOUC
-
白屏:
1.1 如果把样式放在底部,对于一些浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现,这是因为我们访问网页所呈现的是结合解析HTML标签自上而下构造的DOM树与解析CSS后的CSSOM树结合在一起组成渲染树所布局和绘制的,如果一个网页的HTML文本内容很多,这样把样式放在body底部,会造成页面生产渲染树的延迟,所以形成了白屏,这种情况下的白屏不是一个bug,而是浏览器的渲染机制。
1.2 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏,这是因为@import 标签不会被立即执行,所以也出现了白屏的现象。
-
FOUC
2.1 Firefox 有所不同,如果把样式放在底部,Firefox会出现FOUC(无样式内容闪烁),这是也是因为浏览器的渲染机制,它的渲染机制是先自上而下解析HTML标签构造DOM树并呈现出来,然后解析CSS,最后才会呈现样式,期间会逐步加载无样式内容;
三,sync和defer的作用是什么?有什么区别?
-
默认引用script:
<script type="text/javascript" src="javascript.js"></script>
当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档。
-
async模式 :
<script type="text/javascript" src="javascript.js" async="async"></script>
当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,脚本下载完成后开始执行脚本,脚本执行的过程中文档将停止解析,直到脚本执行完毕。
-
defer模式:
<script type="text/javascript" src="javascript.js" async="async"></script>
当浏览器遇到 script 标签时,文档的解析不会停止,其他线程将下载脚本,待到文档解析完成,脚本才会执行。
四,简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)