JS高级学习笔记（3）之 script标签

最新推荐文章于 2022-10-29 17:07:07 发布

weixin_30875157

最新推荐文章于 2022-10-29 17:07:07 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/houfee/p/9686572.html

版权

写在前面

　　作为前端小白，在开发过程中，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>

执行结果：

总结

　　我就直接拿过来用了~~

转载于:https://www.cnblogs.com/houfee/p/9686572.html

weixin_30875157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级学习笔记（3）之 script标签

写在前面　　作为前端小白，在开发过程中，h5页面中加载js脚本，一般我们直接<script src="./index.js"></script>就加载完成了；最近在啃《JS高级》（P11）的时候，读到<script>标签的时候，发现它有俩个属性：defer和async；今天就来总结一下。script标签1.async：异步加载（不让页面等待该脚本的...
复制链接

扫一扫