一，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)
网友评论