网页中内嵌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构建
这句话明显错了。
小白见解,不知正确与否,请求指正
- 浏览器会尽可能快的边解析边渲染,让用户尽快看到内容
- 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.jslet 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)
最后重申一下,原理很大可能不是这样的,只是我个人粗浅理解而已
以上是 网页中内嵌js和引入外部js文件对DOM构建有什么区别? 的全部内容, 来源链接: utcz.com/a/27075.html