浏览器如何渲染页面

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

• CSS放置在HTML的head标签里。
• JS放在网页的底部body关闭标签前。

2. 解释白屏和FOUC

• 白屏：由于某些场景，如js加载缓慢或无法加载，或css样式表放在页面文件底部等特殊情况，在浏览器新开窗口或刷新时会出现白屏。
• FOUC（Flash of Unstyled Content）无样式内容闪烁：是指css样式最后才加载出来渲染html。因此会先看到混乱的网页，再看到正常的页面。

原因：因为浏览器对HTML元素和CSS的解析渲染需要一个过程，构建好DOM树和cssom树之后再组合成渲染树（render tree），如果在构建DOM树和cssom树时，请求html元素或css样式表出现阻塞，将无法组合成渲染树即无法将内容绘制到屏幕上，此是部分浏览器会将页面以白屏的方式展示。而FireFox等部分浏览器的渲染机制不同会将已经请求成功的元素和样式组成渲染树，先绘制已加载的部分，如果后续有新加载的元素和样式将再刷新渲染树，继而刷新页面内容，直到完全加载，即FOUC（无样式内容闪烁）。

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

• 加载JS时有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
• 加载JS时有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，OMContentLoaded 事件触发之前完成。
• 区别在于defer:脚本延迟到文档解析和显示后执行，有顺序；async:不保证顺序。

4. 简述网页的渲染机制

1. 首先解析html标签形成，DOM树
2. 然后解析css，构建cssom树
3. 把DOM和CSSOM组合成渲染树（render tree）。
4. 在渲染树的基础上进行布局，计算每个节点的几何结构。
5. 把每个节点绘制到屏幕上（painting）。

投稿