关于浏览器如何渲染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条的规则执行。