多个script代码块执行问题(猜测)

假设页面有两个script标签:

<script>
throw new Error('error')
</script>

<script>
console.log(1)
</script>

  在运行的时候 我们发现1是会正常输出的,再看下一段代码:

<script>
console.log(a)
</script>

<script>
var a = 1;
</script>

我们发现这个时候输出的a并不是undefined,而是保存:a is not defined,

 

所以我猜测:

因为我们知道浏览器遇到script脚本 会停止dom解析和css解析,专注于解析js,所以这个时候浏览器不会做其他任何事情,现在浏览器解析到第一个script标签,他开始解析这段代码,如果这段代码报错了,则浏览器抛出错误,并认为该段script解析完毕,然后浏览器则继续开始查找dom元素 解析dom元素,这个时候浏览器又遇到第二段script块,然后继续开始解析,所以 第一段script的报错 并不会影响第二段script的执行。

浏览器在解析文档的时候,并没有提前将页面上的所有的script标签,提前收集起来 做统一处理,而是根据遇到则解析的 规则来解析,所以我们看到 即使js存在命名提升,因为在解析第一段script的时候,第二段script还没有执行,所以也就不存在命名提升

我们再看一段代码:

<script>
var a = 1;
</script>

<script>
console.log(a)
</script>

  这个时候输出1,这表明 多个script块 是共享同一个作用域的,也就是window顶级作用域。

posted @ 2019-10-31 21:08  dami.white  阅读(503)  评论(0编辑  收藏  举报