进阶1

1.CSS和JS在网页中的放置顺序是怎样的？

根据浏览器渲染页面顺序的特点，为保证页面加载的顺畅，一般按如下方式放置：

• css使用link标签置于head中，不使用@import；
• JS放置在前，保证页面加载结束（在JS不改动页面内容的前提下）；

2.解释白屏和FOUC

这两种现象都是由于浏览器渲染页面时，受到了阻塞或在等待造成的，根据不同浏览器渲染机制的不同，现象分为以下两种，

• 白屏：浏览器页面在加载时，出现白屏无内容的现象；
• FOUC：Flash of Unstyled Content，无样式内容闪烁，是指在浏览器加载内容过程中，先出现没有样式的网页内容，再展现出加载了样式的网页页面；

chrome浏览器的加载和渲染机制，是等css全部加载解析完后再渲染展示页面，这个等待时间就出现了白屏；
其他一些浏览器，例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC

造成以上两种现象的原因有：

• css样式放在底部，导致HTML加载完，还需要等待CSS的加载；
• css虽然放在顶部，但是使用@import，也可能加载等待，白屏；
• JavaScript 放入页面顶部，造成后面页面加载阻塞，也会出现白屏或FOUC

3.async和defer的作用是什么？有什么区别

async和defer都是调整JS脚本的加载顺序，保证页面加载的顺畅和效果；
区别在于：

• defer指定了JS加载执行的固定时序，对脚本执行进行延迟，直到页面加载为止；
• async一旦异步下载完成，就开始执行，.这意味着这些script 可能不会按它们出现在页面中的顺序来执行,如果你的脚本互相依赖并和执行顺序相关,就有很大的可能出问题, 例如变量或者函数未定义之类的错误

参考：
html5中script的async属性
js之script属性async与defer

4.简述网页的渲染机制

Paste_Image.png

如上图所示，网页渲染按照如下顺序进行：

• 解析 HTML 标签, 构建 DOM 树；
• 载入html代码过程中，发现标签内有一个标签引用外部CSS文件，发出CSS文件的请求，服务器返回这个CSS文件；
• 解析 CSS 标签, 构建 CSSOM 树；
• 把 DOM 和 CSSOM 组合成 渲染树 (render tree)；
• 在渲染树的基础上进行布局, 计算每个节点的几何结构；
• 把每个节点绘制到屏幕上 (painting)

5.投稿

白屏和FOUC