HTML解析过程

来源：佛山兄弟连IT培训学校时间：2019/8/16 8:42:56

浏览器加载html文件以后，渲染引擎会从上往下，一步步来解析HTML标签，大致过程如下：

用户输入网址，浏览器向服务器发出请求，服务器返回html文件;

渲染引擎开始解析html标签，并将标签转化为DOM节点，生成DOM树;

如果head标签中引用了外部css文件，则发出css文件请求，服务器返回该文件，该过程会阻塞后面的解析;

如果引用了外部js文件，则发出js文件请求，服务器返回后立即执行该脚本，这个过程也会阻塞html的解析;

引擎开始解析body里面的内容，如果标签里引用了css样式，就需要解析刚才下载好的css文件，然后用css来设置标签的样式属性，并生成渲染树;

如果body中的img标签引用了图片资源，则立即向服务器发出请求，此时引擎不会等待图片下载完毕，而是继续解析后面的标签;

服务器返回图片文件，由于图片需要占用一定的空间，会影响到后面元素的排版，因此引擎需要重新渲染这部分内容;

如果此时js脚本中运行了style.display="none"，布局被改变，引擎也需要重新渲染这部分代码;

直到html结束标签为止，页面解析完毕。