其他分享
首页 > 其他分享> > JS高级学习笔记(3)之 script标签

JS高级学习笔记(3)之 script标签

作者:互联网

 写在前面

  作为前端小白,在开发过程中,h5页面中加载js脚本,一般我们直接<script src="./index.js"></script>就加载完成了;最近在啃《JS高级》(P11)的时候,读到<script>标签的时候,发现它有俩个属性:defer和async;今天就来总结一下。

script标签

1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分)

2.charset:设置js的字符集编码

3.defer:延迟脚本(当浏览器解析到/html 结束标签时才执行,该属性对嵌入脚本无效)

4.src:要执行的外部代码文件

5.type:与language类似可以看作是language的替代属性

一、不写defer和async属性

  这里我就先说说我对页面加载的理解:

  1.html页面加载时,至上而下加载,解析完整的html结构

  2.当遇到外联的CSS和JS的时候,会停止对DOM的加载,转而加载外联的CSS和JS

  3.当CSS、JS加载完成时,它会立即执行(所以一般JS都写在body的最下面)

  4.CSS和JS执行完成后,构造HTML DOM模型   // DOMContentLoaded执行点

  5.加载图片等外部文件

  6.页面加载完毕  //load

index.html

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./01.js"></script>  <!-- console.log('这是外部脚本01.js'); -->
  <script src="./02.js"></script>  <!-- console.log('这是外部脚本02.js'); -->
</head>

<body>
  <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
      console.log("domContentLoad执行");
    }, false);
    console.log("这里是嵌入脚本");  
  </script>
</body>

</html>

 

执行结果:

 

二、defer-延迟脚本

 

  加上defer就变成延迟脚本,当加载到包含defer的JS脚本时,浏览器会开启一个新线程并马上下载JS文件,但是不会执行里面的代码;需要等到加载到</html>时,浏览器才会执行这两个JS脚本,这两个JS脚本时顺序执行的,先执行example1.js,后执行example2.js。

  包含defer的JS文件,会在DOMContentLoaded事件和loaded事件之前执行。

index.html

 

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script defer src="./01.js"></script>  <!-- console.log('这是外部脚本01.js'); -->
  <script defer src="./02.js"></script>  <!-- console.log('这是外部脚本02.js'); -->
</head>

<body>
  <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
      console.log("domContentLoad执行");
    }, false);
    console.log("这里是嵌入脚本");  
  </script>
</body>

</html>

 

执行结果

 

三、async-异步脚本

 

  此时是的JS时异步脚本,当浏览器加载到这两个JS脚本时,浏览器开启新线程下载这俩个JS脚本,下载的时候浏览器主线程还在加载中;当加载JS脚本完成时,这俩个脚本会马上执行,此时主线程停止工作,这俩个JS脚本执行乱序,先执行example1.js,后执行example2.js还是先执行example2.js,后执行example1.js是不确定;当执行完这两个JS文件后,浏览器的主线程才会继续执行。

  包含async的JS文件,会在Loaded事件之前执行,在DOMContentLoaded事件的前后不一定。

 index.html

 

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script async src="./01.js"></script>  <!-- console.log('这是外部脚本01.js'); -->
  <script async src="./02.js"></script>  <!-- console.log('这是外部脚本02.js'); -->
</head>

<body>
  <script type="text/javascript">
    window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
      console.log("domContentLoad执行");
    }, false);
    console.log("这里是嵌入脚本");  
  </script>
</body>

</html>

 

执行结果:

 

总结

  我就直接拿过来用了~~

  

 

标签:脚本,script,标签,js,JS,DOMContentLoaded,执行,加载
来源: https://www.cnblogs.com/houfee/p/9686572.html