码不停息

# 浏览器执行html,css,js的顺序

js的执行可以阻塞 页面渲染,那么它是怎么阻塞的呢?

# js执行和页面渲染公用同一个进程

浏览器有几大进程,分别为:

  • 渲染进程
  • 主进程
  • GPU进程
  • 网络进程
  • 插件进程

其中渲染进程中又包括html解析器,javascript解析器 等线程其中这两个解析器是互斥关系(不能同时进行)因为javascript可以改变dom结构,如何这两个线程可以同时执行的话,势必会出现冲突

# js,html,css 引用的几种关系

# 行内


<div></div>
<script> console.log(11) </script>
<div></div>

这时候当html执行到第二句代码时,发现是个js语句,那就会调用javascript解析器去解析javascript,此时 渲染被阻塞

# 引用

<div></div>
<script scr="1.js"></script>
<div></div>

这时当执行到第二句代码时,浏览器先会去下载js文件,然后调用javascript解析器去解析javascript,此时 渲染被阻塞

# 与css关系

<div></div>
<script scr="1.js"></script>
<div></div>
<style href="1.css"></style>

执行 JavaScript 之前，需要先解析 JavaScript 语句之上所有的 CSS 样式。所以如果代码里引用了外部的 CSS 文件，那么在执行 JavaScript 之前，还需要等待外部的 CSS 文件下载完成，并解析生成 CSSOM 对象之后，才能执行 JavaScript 脚本。

而 JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM 的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行 CSS 文件下载，解析操作，再执行 JavaScript 脚本。

所以说 JavaScript 脚本是依赖样式表的，这又多了一个阻塞过程

# 如何优化页面打卡速度

← 细说浏览器是如何渲染页面的 →