我有一个依赖于服务器上的脚本的Angular应用程序，它并不总是稳定的。所以有时候要花点时间才能装上。因此，我在上面添加了一个defer-属性。但应用程序会等待，直到延迟脚本的下载完成。
根据我的研究，Angular App应该在DOMContentLoaded之前渲染。我甚至用一个新的Angular应用程序尝试了它，结果也是一样的。我将defer.js的加载延迟了10秒。Angular App的HTML如下所示：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://localhost:8080/defer.js" defer></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
以下HTML将加载到浏览器中。在Angular脚本上没有任何defer，所以它们应该在IMO执行。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="http://localhost:8080/defer.js" defer=""></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>（我使用Chrome浏览器插件'URL Throttler'来模拟它）
2条答案
按热度按时间g6ll5ycj1#
Look at this link的异步/延迟之间的差异，但似乎你的问题可以通过添加异步解决。
在某些情况下，一些浏览器有一个错误，导致延迟脚本无序运行。有些浏览器延迟DOMContentLoaded事件直到defer脚本加载之后，有些浏览器则不这样做。有些浏览器会对带有内联代码但没有src属性的元素执行defer，有些浏览器则会忽略它。
g6ll5ycj2#
我找到了答案。默认情况下，带有
type="module"的脚本会延迟。因此，浏览器会阻止对它的执行，直到前面的defer脚本被执行。