42白屏和FOUC async和defer

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

• CSS一般放置在head标签里面，样式先行的话在加载HTML内容时可以同时渲染样式，避免FOUC。
• JS一般放在body标签后面，JS属于阻塞加载，如果放置在前面则必须等待JS文件加载、解析，这无疑影响页面加载速度；再者JS里面要操作节点也要等待HTML先行加载。

2. 解释白屏和FOUC

• 白屏
  白屏是由于渲染时间过长导致浏览器视窗出现白屏现象——一片空白。
  将CSS放在底部、使用@import引用样式等都可能导致白屏。
• FOUC
  FOUC为Flash of unstyled content的缩写，译作无样式内容闪烁。
  由于先加载HTML内容后再加载CSS对无样式的HTML进行渲染产生的闪烁现象。
  将CSS放在底部可能引起FOUC。

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

JS外部引用的三种方式：

• <script src="script.js"></script>
  浏览器会立即加载并执行文件脚本，此过程不等后续HTML元素的加载而立即加载执行。
• <script async src="script.js"></script>
  浏览器会等到后续HTML元素一起加载并立即执行脚本。
• <script defer src="script.js"></script>
  浏览器会延迟到与后续HTML元素一起加载并在所有元素解析完之后才执行脚本。
  参见下图：

JS引入方式对比

4. 简述网页的渲染机制

1、解析HTML，形成DOM树；
2、解析CSS，形成CSSOM树；
3、两者进行合成渲染，形成渲染树；
4、渲染树在浏览器中进行定位布局，最终将页面呈现在浏览器上。
参见下图：

作者：nineSean
链接：https://www.jianshu.com/p/3ff0d0146e24
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。