网页中内嵌js和引入外部js文件对DOM构建有什么区别?

一个最简单的例子,在内容中间引入js,一个是内嵌,一个是外部js文件,这样看到的效果是不一样的;
当内嵌时,如果js没执行完,是不会看到页面内容的。
当是引入外部js文件时,是会先看到js之前的html内容,当js执行完后,看到下面的内容。

<h1>start</h1>

<script></script>

<h1>end</h1>

具体的原理谁能解释下?
我听到的是外部js不参与dom构建,外部js会影响渲染不就是因为可能会更改dom吗?

回答

当是引入外部js文件时,是会先看到js之前的html内容,当js执行完后,看到下面的内容。

你能看到 html 内容,很有可能是浏览器在下载外部 js 时,在渲染页面(此时主线程空闲),而不是在外部 js 执行时,在渲染页面(此时主线程不空闲)。

换成上面那个解释,是不是就说的通了?

引入外部 js 相对于嵌入式的 js,相当于你把嵌入的代码都加入了一个 setTimeout 里(具体的延时就是由下载和其他耗时决定的),如果是那样,嵌入式的 js 也能获得一样的效果;

按照 event-loop 的规范,js 执行的时候,浏览器是不会渲染的,至于这个 js 是外部的还是嵌入的,没区别;关键是,要给浏览器渲染留时间,而外部的 js 不可避免留出了时间,嵌入的 js 没有留出时间。

外部js不参与dom构建

这句话明显错了。

小白见解,不知正确与否,请求指正

  1. 浏览器会尽可能快的边解析边渲染,让用户尽快看到内容
  2. script的执行会阻塞渲染,script的请求和执行会阻塞DOM的构建解析

所以,内嵌时,直接执行JS阻塞了渲染,所以没有出现之前的内容,加载外部文件时,渲染了之前的内容(趁加载的时机偷偷渲染了?)。

`

<!-- render.html -->

<h1 id="h1">hello world</h1>

<script>

let start = new Date();

let cost = new Date() - start;

while(cost < 1000 * 10) {

cost = new Date() - start;

}

// document.getElementsByTagName('h1')[0].innerHTML = new Date();

let eleP = document.createElement('p');

eleP.innerHTML=new Date();

document.getElementsByTagName('body')[0].insertBefore(eleP, document.getElementById('h1'));

</script>

<h2 id="h2">hhhhhh</h2>

<script src="https://segmentfault.com/q/render.js"></script>

<p>test</p>

// render.js

let start1 = new Date();

let cost1 = new Date() - start1;

while(cost1 < 1000 * 10) {

cost1 = new Date() - start1;

}

let eleP1 = document.createElement('p');

eleP1.innerHTML=new Date();

document.getElementsByTagName('body')[0].insertBefore(eleP1, document.getElementById('h2'));

`
上面的示例中,输出的结果是:(先输出helloworld hhh 和第一个时间,最后输出第二个时间和最后的test)
image.png

最后重申一下,原理很大可能不是这样的,只是我个人粗浅理解而已

以上是 网页中内嵌js和引入外部js文件对DOM构建有什么区别? 的全部内容, 来源链接: utcz.com/a/27075.html

回到顶部