在web开发的过程中知道和了解浏览器是如何进行页面渲染的，可以帮助我们在开发的过程中更好的写出高质量代码。
一、HTML和CSS的渲染
- 解析HTML标签，构建DOM树；
- 解析CSS标签，构建CSSOM树；
- 将DOM和CSSOM组合成为渲染树（render tree）；
- 在渲染树的基础之上进行布局，结算每一个节点的几何位置和结构；
- 将每个节点绘制到屏幕上（painting）
注意： 不同的浏览器对于渲染树的构造顺序是不同的，如webkit内核是同时（或先后）解析HTML、CSS，然后待两者分别解析完成，在一次成型组合成为渲染树；而Firefox浏览器在同时（或先后）解析HTML、CSS的同时，根据顺序依次的组合成渲染树（可能分多次形成），这样在用户浏览的时候会出现从无样式到样式多次变化的一个过程
二、JS脚本的渲染
浏览器渲染JS脚本的时候有一个十分重要的特性：脚本会阻塞后面内容的呈现和其后组件的下载
对于图片与CSS，在加载的时候可以并发加载。但在js（单线程语言）脚本的时候，会禁用并发，并且阻止其他内容的下载。
三、加载异步
<script src="script.js"></script>
浏览器会立即执行加载指定的脚本，“立即”可以理解为该渲染script标签之下的文档元素之前，也就是说不等待后面载入的文档元素，读到就加载执行
<script async src="script.js"></script>
添加async后，加载和渲染后续文档的过程江河script.js的加载与执行并行进行（异步）
<script defer src="script.js"></script>
功能与async类似，但script.js的执行要在所有的元素解析执行完成之后，DOMContentLoaded事件触发之前完成。
问答
1、CSS和JS在网页中的放置顺序是怎样的？
- 依据HTML和CSS渲染的的机制我们知道，若将CSS放在渲染HTML后则浏览器解析完HTML等待CSS的过程中将可能出现无样式的白屏现象；若将CSS放在HTML文档中间，则可能出现页面布局渐进改变的现象（FOUC），故CSS放在HTML的head标签中最佳。
- 依据JS渲染机制，若将其放在HTML前都将影响后续的组件加载；若将其放在HTML的head标签中则更是会造成直接白屏的现象；故将其放在闭合的body标签之上最佳。
2、解释白屏和FOUC
- 白屏指当HTML渲染完成后需要等待CSS样式加载以组合渲染树所造成的现象或者JS脚本先于HTML加载而延迟了后者的加载时间
- FOUC是浏览器在同时解析HTML、CSS的同时，根据顺序依次的组合成渲染树（可能分多次形成），这样在用户浏览的时候会出现从无样式到布局多次变化的一个过程。
3、async和defer的作用是什么？有什么区别
- async和defer的作用是：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
有 ，加载后续文档元素的过程将和 script.js 的加载并行进行（异步）。 -
区别 ：async不保证顺序
defer：脚本延迟到文档解析和显示后执行，有顺序（脚本的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成）
4、简述网页的渲染机制
详见上述一、HTML和CSS的渲染
