浏览器渲染html的过程

关于浏览器如何渲染html界面一直不太清晰，所以现在理一理。由于本身对前深入的东西不太清晰，这篇博客更多的是在记录。

参考：https://www.cnblogs.com/dojo-lzz/p/3983335.html

一、渲染步骤

　　浏览器在接收到html文件后，会分几个步骤html文件转化成界面，这个过程就是渲染。

　　1、解析html

　　2、构建dom树

　　3、dom树结合css文件，构建呈现树

　　4、布局

　　5、绘制

先整体描述一下我的理解：

　　　　1、解析html和构建dom树是同步进行的，这个过程就是逐行解析代码，包括html标签和js动态生成的标签，最终生成dom树。

　　　　2、构建呈现树，就是把css文件和style标签的中的内容，结合dom树的模型，构建一个呈现树，写到内存，等待进一步生成界面。呈现树一定依赖dom树，呈现节点一定会有对应的dom节点，但是dom节点不一定会有对应的呈现节点，比如，被隐藏的一个div。

　　　　3、布局，这一步就是结合呈现树，把dom节点的大小、位置计算出来。虽然呈现节点已经附着在都没节点上，会有对元素大小、位置的定义，但是浏览器还需要根据实际窗口大小进行计算，比如对auto的处理。

　　　　4、绘制，把css中有关颜色的设置，背景、字体颜色等呈现出来。

二、html解析和dom树构建

　　关于渲染的过程，dom树的构建对与一些后端人员还是比较重要的，它关系到js代码能否正确的被执行。

　　html的解析，遵循以下规则：

　　1、按顺序解析。

　　　　html的代码，是从上到下一行行执行的，也就是说如果js代码写在head头里，且没有用加在$().ready(function)方法里，那么他是无法读取到body里的标签的。之所以加在$().ready(function)里可以执行，是因为，$().ready(function)里的函数会在dom树加载之后执行，当然执行之久dom可能还会改变。

　　2、link标签的加载，阻塞后续代码执行，但不阻塞后续外部文件（link、script）加载。

　　　　html的代码是按顺序解析，那么在遇到link标签后，会在link加载（从服务器下载）完毕后，再执行后续代码。但与此同时，如何还有外部文件，则是同时加载。但是外部文件内的代码不会执行，只会在代码解析到它的时候执行。

　　3、添加async属性的script。

　　　　添加async属性之后，script加载的外部文件成为了异步加载，这时相当于它于原本的html解析过程同步进行。所以他不会被任何加载过程阻塞，只会在自己加载完成之后执行。但是，异步执行的影响就是，它如要读取dom节点，很可能会失败，因为它的加载和html解析过程没有了先后顺序。另外，如果它要输出动态的dom节点，就无法保证节点的位置，因为它添加的节点，是在html已解析的节点下顺序添加的。

 <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>

　　4、对于动态创建的link标签不会阻塞其后动态创建的script标签的加载和执行，但是其后非动态创建的script扔按1、2、3条的规则执行。