当前位置：网站首页>How to delay loading JS

How to delay loading JS

2022-07-19 11:59:00 【French speaking pig】

JS Delayed loading is waiting dom（ page ） Load after loading js file , This helps speed up page loading , Better user experience

Generally delayed loading js There are ways ：

① defer attribute
② async attribute
③ Dynamically create DOM
④ Use jq Of getScript Method
⑤ Use setTimeout Delay loading scripts
⑥ take script Import last （ Bottom ） load

One of the more important things is defer and async The way

Here's a chestnut ：

a.js

console.log(document.getElementById('myDiv'), '----->>>')

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--  External introduction  a.js -->
  <script src="./a.js"></script>
</head>
<body>
  <div id="myDiv">wft</div>
</body>
</html>

In this way , We can't get it div Elements , Print out null , This is because it is implemented first script( namely a.js) The code in , Then load the following dom Elements , Naturally, I can't get it . At this time, if you say a.js An error occurred in , It will cause nothing to be loaded on the page .

If we say we will script Put it at the end of the execution , as follows ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="myDiv">wft</div>
  
  <script src="./a.js"></script>
</body>
</html>

At this time, it will print out normally div Elements , This is what we said above, put it at the bottom and finally execute

Put it on top and add defer, as follows ：

defer

<!--  External introduction  a.js -->
<script defer src="./a.js"></script>

We found that it can print normally div Elements

although <script> Elements are placed <head> In the elements , But the included script will delay the browser from encountering </html> Label and then execute
Just wait html All analysis completed , Will execute js Code , In turn js Script

async

Similarly, we will the above defer Switch to async, as follows ：

<!--  External introduction  a.js -->
<script async src="./a.js"></script>

We found that we can get the same div Elements , It also implements the delayed loading script

HTML5 by <script> The label defines async attribute . And defer Properties are similar to , Are used to change the behavior of processing scripts . Again , Only for external script files .
Purpose ： Don't let the page wait for the script to download and execute , thus Load other contents of the page asynchronously .
Asynchronous scripts must be on the page load Before the event .
There's no guarantee that scripts will execute in sequence .

defer and async difference

defer It is executed in sequence , but async No .

async You cannot control the loading order of external scripts

such as ：

<!--  External introduction  a.js -->
<script defer src="./a.js"></script>
<script defer src="./b.js"></script>
<script defer src="./c.js"></script>

The above delays the loading of three scripts , Now we use defer, When loading scripts , It must be according to a - > b -> c The order of （ That is to execute first a.js Re execution b.js Finally, execute c.js） Executive , If replaced async, You can also delay loading js Script , But the order is uncertain , Whoever loads first will execute first , So if you say c.js Depend on b.js, Then you must not use async.

原网站

版权声明
本文为[French speaking pig]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/200/202207171518058139.html