浏览器的渲染机制

一. CSS和JS在网页中的放置顺序

1. CSS放在head标签中。
2. JS放在body标签底部，写在标签中，外链用标签引入。

二. 简述网页的渲染机制

• 解析HTML标签，构建DOM树；
• 解析CSS标签，构建CSSOM树；
• 把DOM和CSSOM组合成渲染树（render tree）；
• 在render tree的基础上进行布局，计算每个节点的几何结构。
• painting，把每个节点绘制到屏幕上。

三. 白屏和FOUC

白屏

1. CSS导致
   • 如果把样式放在底部，对于IE浏览器，某些场景下（打开新的窗口，刷新页面）时会出现白屏，而不是逐步展现内容；
   • 如果使用@import标签，即使CSS放在头部，用link引入，也有可能出现白屏。
   • 白屏产生的原因和浏览器的渲染机制有关，在painting之前的步骤上有时间的延迟，主要是CSS加载的延迟。
2. JS导致
   • 把JS放在顶部可能会导致白屏。
   • 对于图片和CSS，在加载时会并发加载（如同个域名下同时加载两个文件），但在加载JS时，会禁用并发（脚本会阻塞后面内容的呈现几后面组件的加载），所以把JS放在页面顶部会导致白屏现象。

FOUC

• FOUC（Flash Of Unstyled Content，文档样式闪烁），逐步加载无样式内容，等CSS加载后突然展现样式。
• 产生
  若将style（CSS）放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象，对于Firfox会一直表现出FOUC。
• 解决
  • CSS放在头部
  • @import换成link引入

四. async（异步）和defer（延迟）的作用及区别

• 没有defer或者async，浏览器会立即加载并执行指定脚本。
  不等待后续载入的文档元素，读到就加载并执行。
• async的作用
  
  有async，加载和渲染后续文档元素的过程将和script.js的加载并行进步（异步）。
• defer的作用
  
  有defer，加载后续文档元素的过程将和script.js的加载并行进步（异步），但是，script.js的执行要在所有元素解析完之后，DOMContentLoaded事件触发之前完成。
• 区别
  defer：脚本延迟到文档解析和显示之后执行，有顺序。
  async：不保证顺序。