从Chrome源码看JavaScript的执行流程(一)缘由

本来想直接放一个PDF上来给有心人看的,从md里导出发现有30多页,看了下没有代码高亮也很烦,所以还是一部分一部分放吧,挑自己想看的地方看就好
原始的pdf版本:http://www.au1ge.xyz/wp-content/uploads/2018/07/从Chrome源码理解JS的执行.pdf

缘由

来源于ph小密圈的一个问题

这段代码,虽然成功插入了script标签,但是没有执行,如果改为插入img标签则可以执行,这里比较容易理解,事件的触发和script标签内的代码执行是不在一个阶段的

同时发现另外一段

这个可以正确执行js,所以需要了解一下浏览器的DOM树解析,以及JS引擎在浏览器解析中的位置

首先的猜测是(直接搬运小密圈的评论):

至于为什么 onerror 可以而 script 标签不可以,我的理解是,onerror 事件在 DOM 树构建完成之后触发,而 script 标签内的内容在 DOM 解析中触发 但是可以看一下这个例子:

这里正确弹框,说明浏览器在执行到第二个 script 标签时,回头执行了第一个 script 标签内的内容,这可能是因为浏览器在遇到 script 标签,或者对 script 标签进行 DOM 操作的时候,会触发一次页面渲染,因为浏览器在碰到 script 标签的时候,需要渲染页面保证 script 能获取到最新的 DOM 元素信息,可以看下这个:链接:原来 CSS 与 JS 是这样阻塞 DOM 解析和渲染的 – 掘金所以,你的例子是对 div 元素进行的 DOM 操作,浏览器不会再渲染页面并执行动态创建的 script,因此创建的 script 无法在解析中执行 关于浏览器的执行流程可以看下这个:链接:浏览器的工作原理:现代网络浏览器幕后揭秘 – HTML5 Rocks

同时小密圈一个朋友给出了另外一个问题:

那么如果浏览器的解析过程是往复的,那这里为什么没有进入JS执行环境呢,需要再深入理解一下,先明确一下问题,需要了解的是,在浏览器解析整个页面的过程中,JS引擎什么时候被调用,什么时候不被调用

再看一个例子:

成功触发,于是可能最开始的猜想就是正确的,对script标签的DOM操作,无论他是被操作还是操作,都会进行一次渲染,那么这个怎么用正确的术语描述呢?

掘金那篇文章的一个评论

https://developers.google.com/web/fundamentals/?hl=zh-cn 这个貌似比较详细的解释了浏览器

看了一些文章,了解了reflow和repaint的概念,可能需要重新审视最开始的代码为什么没有进入JS环境

毫无疑问,innerHTML会执行回流操作,并且查到innerHTML中的东西会被加入DOM树,

innerHTML会解析其中的html代码并将其加入DOM树:https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

那么就有点奇怪,如果innerHTML使script加入了DOM树,并且触发了回流操作,那么为什么不会执行呢?

同样的,innerText给script标签加入代码,也会回流(reflow)DOM树,并且执行了JS代码,奇怪

需要调试一下chrome,确定他什么时候会进入JS环境