前端学习——21——异步加载js

最新推荐文章于 2023-02-26 21:12:26 发布

野生小米椒

最新推荐文章于 2023-02-26 21:12:26 发布

阅读量147

点赞数

分类专栏：三大基础语言

本文链接：https://blog.csdn.net/x1037490413/article/details/102589599

版权

三大基础语言专栏收录该内容

144 篇文章 9 订阅

订阅专栏

一： javascript异步加载的三种方案

1：defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  
  </style>
</head>

<body>
   <!-- 写法一 -->
   <script src="tools.js" defer="defer"></script>
   <!-- 代码也可写在内部 -->
  <script defer="defer">
  var a=123;
  </script>
  
</body>

</html>

2：async 异步加载，加载完就执行，async只能加载外部脚本，不能把js代码写在script标签里。

 <!-- 只能引用外部脚本 -->
   <script async="async" src="tools.js"></script>

方法1，2执行时也不阻塞页面

4：按需加载：创建script ，插入到DOM中，加载完毕后callBack（回调函数：当满足一定条件时执行）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
    <script>
    var script=document.createElement('script');
    script.type="text/javascript";//写不写都行
    script.src="demo.js";//这里执行完就开始下载这个地址里的东西
    document.head.appendChild(script);//这里才开始解析脚本
    </script>

</body>

</html>

demo.js

alert('js');

例二：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
    <script>
    var script=document.createElement('script');
    script.type="text/javascript";//写不写都行
    script.src="demo.js";//这里执行完就开始下载这个地址里的东西
    script.onload=function(){//下载完上面那个再开始执行，不然执行不了
      test();
    }
    document.head.appendChild(script);//这里才开始解析脚本
    </script>

</body>

</html>

demo.js

function test(){
    console.log('a');
}

IE里有个属性

如果readyState=="loading"代表加载中，readyState=="completed"或者"loaded"代表加载完

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
    <script>
    var script=document.createElement('script');
    script.type="text/javascript";//写不写都行
    script.src="demo.js";//这里执行完就开始下载这个地址里的东西
    script.onreadystatechange=function(){
      if(script.readyState=="complete"||script.readyState=="loaded")
      test();
    }
    document.head.appendChild(script);//这里才开始解析脚本
    </script>

</body>

</html>

兼容性写法：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
    <script>
    var script=document.createElement('script');
    script.type="text/javascript";//写不写都行
    script.src="demo.js";//这里执行完就开始下载这个地址里的东西
    if(script.readyState){
      script.onreadystatechange=function(){
      if(script.readyState=="complete"||script.readyState=="loaded"){
           test();
      }
   
    }
    }else{
      script.onload=function(){
        test();
      }
    }
    
    document.head.appendChild(script);//这里才开始解析脚本
    </script>

</body>

</html>

野生小米椒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——21——异步加载js

一： javascript异步加载的三种方案1：defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用，也可以将代码写到内部<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport...
复制链接

扫一扫

专栏目录