浏览器渲染引擎执行机制--DOM树渲染

src和href的区别？

link标签加载顺序？

script标签加载顺序？

defer和async？

想弄懂以上问题，先来了解一下DOM树渲染原理

DOM文档的加载顺序是由上而下的顺序加载；

1、DOM加载到link标签（css）

css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；

浏览器一边下载HTML网页，一边开始解析；

解析过程中，发现link 标签

浏览器继续往下解析HTML网页，同时并行下载link标签中的css样式

2、DOM加载到script标签(js)

（1）正常非处理网页

由于js文件不会与DOM并行加载，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；

正常的网页加载流程是这样的。

浏览器一边下载HTML网页，一边开始解析

解析过程中，发现script标签