CODEWITHSUNDEEP
javascriptjqueryhtmlweb
Krishna
Krishna

Reputation: 3177

Application not getting render due to pending download of js files in head

I need to load set of js in header. Below is my header element:

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

which ultimately generates below head section:

<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>

Also, in my body section the spa starts with init() method, which contains variable and component which are available is above js files in head section. Now unless and until all my js files will get load, my application wont render. So everytime i am getting error, undefined variable. I want init mehod in body must call only after all js files in head section get loaded.

Upvotes: 0

Views: 372

Answers (1)

Ivan Rubinson
Ivan Rubinson

Reputation: 3339

Depending on what browsers you're targetting, you can or can not use the async keyword.

The solution I personally use in production is to move all the script tags to the bottom of the <body> element, and order them in the order of dependency.

So you move the script from the CDN to the bottom of the <body> tag, and you put the script with the init() method after it.

Example:

I have two scripts. script1 depends on script2, so it needs to be loaded after it. Here's what I'd do:

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

Alternatively you could manually load the scripts in whatever order you want using AJAX, but that would be needlessly complicated.

Upvotes: 1

Related Questions