英文:
Script with defer prevents loading of Angular App
问题
有时候服务器上的脚本不够稳定，所以我在上面加了 defer 属性，但是应用程序等到延迟脚本下载完成才渲染。根据我的研究，Angular 应用程序应该在 DOMContentLoaded 之前渲染。我尝试了一个新的 Angular 应用程序，结果相同。我将 defer.js 的加载延迟了 10 秒。 Angular 脚本没有 defer，所以它们应该被执行。
英文:
I have an Angular app which depends on a script on a server, that isn't always stable. So sometimes it takes some time to get loaded. Therefore I added a defer-attribute on it. But the App waits until the download of the deferred script is finished.
Based on my research the Angular App should render before the DOMContentLoaded. I even tried it with a new Angular App with the same result. I deferred the loading of the defer.js by 10 sec.
The HTML of the Angular App looks like the following:
<!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>
The following HTML gets loaded in the Browser. On the Angular Scripts aren't any defer, so they should be executed 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>
(I use the Chrome Browser Plugin 'URL Throttler' to emulate it)
答案1
得分: 0
看这个链接1了解async/defer之间的区别，但似乎通过添加async可以解决你的问题。
> 在某些情况下，一些浏览器存在一个导致defer脚本按顺序运行的bug。某些浏览器将延迟DOMContentLoaded事件直到defer脚本加载完成，而有些则不会。某些浏览器对带有内联代码且没有src属性的<script>元素遵循defer，而有些则不会。
英文:
Look at this link for the difference between async/defer but it seems that your problem could be resolved by adding async.
> In certain situations some browsers have a bug that causes defer
> scripts to run out of order. Some browsers delay the DOMContentLoaded
> event until after the defer scripts have loaded, and some don't. Some
> browsers obey defer on <script> elements with inline code and without
> a src attribute, and some ignore it.
答案2
得分: 0
我找到了答案。
具有 type="module" 的脚本默认是延迟加载的。因此，浏览器会阻止执行它，直到先前的 defer 脚本被执行。
英文:
I found the answer.
Scripts with type="module" are deferred by default. Therefore the browser blocks the execution to it until the previous defer-scripts are executed
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论