[HTML] src 和 href 的区别以及 script 标签中的 defer 和 async 的区别

src 和 href

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  </head>
  <body>
    <div>Hello World</div>
    <div id="map" style="width: 600px; height: 400px"></div>
  </body>
</html>

脚本资源挂起,页面黑屏不显示内容

src 会将内容嵌入到网页中,替换 script 标签的内容,如果 script 标签加载 js 脚本,资源是国外的,少说也要十多秒钟加载时间,而在此期间浏览器页面是空白的,不会显示任何内容。因此,一般是在 html 底部加载 js 脚本。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>Hello World</div>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
  </body>
</html>

显示内容,脚本继续加载

defer 和 async

当 async 请求脚本过来之后,暂停当前 HTML 解析,执行脚本结束之后继续 HTML 的解析。

当 defer 请求脚本过来之后,不执行脚本,而是等待 HTML 解析完成之后才执行。

defer 和 async 的区别

posted @ 2024-09-11 17:53  Himmelbleu  阅读(11)  评论(0编辑  收藏  举报