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

Z时代
2024-01-10
分类：技术分享

一个最简单的例子，在内容中间引入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.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）