时间戳

首页 > 解决方案 > 为什么在 script 标签中设置 async 或 defer 时无法执行 Javascript 代码？

javascript - 为什么在 script 标签中设置 async 或 defer 时无法执行 Javascript 代码？

问题描述

我用JavaScript在这样script tag的：html

<script src="file.js" type="text/javascript"></script>

使用上面的代码，file.js链接到我们的html页面。但是当我们在 , 中添加asyncordefer时script tag，file.js不能在这些代码中执行：

<script src="file.js" type="text/javascript" async="async"></script>
<script src="file.js" type="text/javascript" defer="defer"></script>

请问你能帮帮我吗？为什么我遇到这样的问题？

此外，为了更清楚起见，我添加了一段由 file.js 加载组成的 html，如下所示：

<!DOCTYPE html>
<html lang="en-US">
 <head>

 <title>Dr.Kayvanfar</title>
 <meta charset = "UTF-8" />
 <link type="text/css" rel="stylesheet" href="Main_CSS.css" />
   
 <noscript> Your browswer don't support JS</noscript>

 </head>



 <body>
   <div id="container" style="width:1500px;margin-left:auto;margin-right:auto;color:blue;">
     <div id="header" style="height:100px;background-color:rgb(0,0,0); margin-bottom:20px;margin-top:20px; color:rgb(255,255,255);padding-top:5%">
       <span class="topheader">Future Students</span>
       <span class="topheader">Current Students</span>
       <span class="topheader">Research & Teaching</span>
       <span class="topheader">Communities</span>
       **<script src="file.js" type="text/javascript" async ></script>**
     </div>

     </body>
   
   </html>

标签： javascripthtmlcssasync.js

解决方案

它应该是：

<script src="file.js" type="text/javascript" defer></script>
// Or
<script src="file.js" type="text/javascript" async></script>
// Or
<script src="file.js" type="text/javascript" async defer></script>

何时使用哪一个：

  • 如果脚本是模块化的并且不依赖任何脚本，则使用异步。
  • 如果脚本依赖于任何其他脚本，则使用 defer。

虽然你可以同时使用：

如果您同时指定两者，则 async 在现代浏览器上优先，而支持 defer 但不支持 async 的旧浏览器将回退到 defer。

资源

推荐阅读