浏览器渲染机制

在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的渲染