Question

以下是Web服务器。

访问http://localhost:3000/时，浏览器会阻止，直到加载并评估lib.js为止。

为什么？

换句话说：为什么在app.js之前lib.js无法在浏览器中运行？

var express = require('express');
var app = express();

const page = `<html>
<head>
    <script>
        document.write('<scr' + 'ipt src="./lib.js"></scr' + 'ipt>');
    </script>
    <script src="./app.js"></script>
</head>
</html>`;

const libJs = `window.lib = function() { console.log('the library is loaded!'); };`;
const appJs = `window.lib();`;

app.get('/', (req, res) => {
    res.send(page)
});

app.get('/lib.js', (req, res) => setTimeout(() => res.send(libJs), 10000));

app.get('/app.js', (req, res) => res.send(appJs));

app.listen(3000, () => {});

修改：

将page替换为：

const page = `<html>
<head>
    <script>
        const el = document.createElement('script'); 
        el.src="./lib.js";
        document.currentScript.parentNode.insertBefore(el, document.currentScript);
    </script>
    <script src="./app.js"></script>
</head>
</html>`;

导致错误，因为以后一种方式插入脚本是异步的，并且不会阻止对文档的评估。

Answer 1

在加载lib.js的脚本元素之前，加载app.js的脚本元素出现在DOM中。

由于脚本元素可能包含document.write语句，因此除非明确标记defer或async，否则所有脚本元素都将阻止DOM解析。

为什么在加载和评估`lib.js`之前，浏览器中会出现以下阻塞？

1 个答案: