javascript - 由于头部中的 js 文件挂起下载，应用程序未得到渲染

问题描述

我需要在标题中加载一组 js。下面是我的标题元素：

<head><script type="text/javascript" src="https://saswdswddx.cloudfront.net/ClientLibs.js"/>
</head>

最终生成以下头部：

<head>
  <script src="https://xxxxfffdfdfdfd.cloudfront.net/89cc9bacc8f01db1.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/211850746383fd35.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/b30b4a28e94073b3.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/bc0c3159d13ffdaf.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/080d763d10e18196.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/84df93ace8f5ef4d.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/e7b23f7c66091e21.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/1d4c3d5cded23cb2.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/6f8353875d2eab13.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/22635695f659cee6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/f645699f959874ea.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/52bf1c32f66e3366.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/7c14d48ac546cfab.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/3c2c0190729a5de6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/905fab7bd45ffd32.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/aa6c83d100400291.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/1583adf5ca69f94b.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/7351efd5ad3a8219.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/d2a3be708cf0ecb2.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/09511a5f22cca316.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/51a8a84831926cab.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/cebd04bf55acaf98.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/8f7a98b8524699fa.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/c765ce94b008b43a.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/d411591679fc777a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/fd4e563878f699ca.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/a7aa4ab396dc2c06.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/74bfd02e310d0c96.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/777512d78b46f09a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/9a00d70cd5a8f544.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/05da1be4803bfe93.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/da39a3ee5e6b4b0d.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/3d3ff45927792b85.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/34f252296c86892b.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/6598462041ef9c9f.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/da39a3ee5e6b4b0d.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/4fb6b6291f77a814.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/e555a7200b70dcee.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/0fd5ba39ae8af05a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/e64a562a726c1b03.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/296c14c415f75a7a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/fe68b7820bc0cf4f.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/d836af899190a3f7.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/05e03b1ae258b4cd.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/82de18bac08fa17f.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/46f426bcfc9dd89c.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/2046534748dde247.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/6e94559c187d5d00.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/74531b771786a1fd.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/39ffcb4194a365fc.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/1b05d38fb2515b7c.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/2e91a32ab37b51d5.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/4dc09203c5082946.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/8ac01bbb7f05e0a9.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/ed192084e9139b54.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/ab612c7a907116a6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/8deedebe93f06b91.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/6012e3e21c48364e.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/8486fc770633b5d7.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/27525a908ad9afa6.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/e1c04b332299c91a.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/6048e657d7aa5b54.min.css"><script src="https://xxxxfffdfdfdfd.cloudfront.net/685b3fc65211ee22.min.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="https://xxxxfffdfdfdfd.cloudfront.net/7ec73ef718990b40.min.css">
  </head>

此外，在我的 body 部分中，spa 以 init() 方法开头，其中包含变量和可用组件，位于 head 部分的 js 文件上方。现在，除非并且直到我的所有 js 文件都被加载，否则我的应用程序将不会呈现。所以每次我得到错误，未定义的变量。我希望 body 中的 init 方法必须仅在 head 部分中的所有 js 文件都加载后调用。

标签： javascriptjqueryhtmlweb

根据您定位的浏览器，您可以使用或不使用async关键字。

我个人在生产中使用的解决方案是将所有脚本标签移动到<body>元素的底部，并按照依赖顺序排列它们。

因此，您将脚本从 CDN 移动到<body>标记的底部，然后将带有init()方法的脚本放在其后面。

例子：

我有两个脚本。script1取决于script2，所以它需要在它之后加载。这是我要做的：

<!doctype html>
<html>
  <head></head>
  <body>
    Some HTML here...
    <script src="script2.js"></script>
    <script src="script1.js></script>
  </body>
</html>

或者，您可以使用 AJAX 以您想要的任何顺序手动加载脚本，但这会不必要地复杂。

javascript - 由于头部中的 js 文件挂起下载，应用程序未得到渲染

问题描述

解决方案

推荐阅读