预加载扫描器-》二级HTML解析器
每个浏览器都有一个主要的HTML解析器,它对原始标记进行标记,并将其处理为一个对象模型。这一切都在愉快地进行着,直到解析器发现一个阻塞资源时暂停,例如用<link>
元素加载的样式表,或用<script>
元素加载的脚本,但没有async
或defer
属性。
浏览器通过一个叫做预加载扫描器的二级HTML解析器,尽力缓解了载入资源时的阻塞问题。
就是浏览器在构建DOM 的时候,占用了主线程,同时预加载扫码器也在将后台运行,他会扫 描整一个HTML文件 ,如果遇到 css、Javascript或者web字体 ,会在后台发起 资源请求并下载。等到DOM 解析器解析 到这些 文件的引用的时候 ,可能这些 文件已经下载完毕 或者 已经在运行。这样就减少了阻塞。
所以这也是页面资源并发下载的原因,注意:只是下载,尚未解析,主HTML解析器解析到资源标签script,css的时候解析
概括
页面资源页面资源并发下载,可看上面预加载扫描器
CSS不会阻塞DOM解析,但是会阻塞DOM渲染,严谨一点则是CSS会阻塞render tree的生成,进而会阻塞DOM的渲染
JS会阻塞DOM解析
CSS会阻塞JS的执行
浏览器遇到<script>标签且没有defer或async属性时会触发页面渲染
Body内部的外链CSS较为特殊,会形成FOUC(样式闪烁)现象,请慎用