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

上一篇:CCF CSP 201509-1 数列分段


下一篇:浏览器加载和渲染HTML的过程(标准定义的过程以及现代浏览器的优化)