  <script />标签

最新推荐文章于 2022-08-25 11:26:29 发布

weixin_33716154

最新推荐文章于 2022-08-25 11:26:29 发布

阅读量122

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c403dbf5188251e10159cce

版权

在 html 页面中，使用JavaScript 需要显示声明<script/>标签，下面就是一个非总结性的介绍。

按照分类可以将标签分为内部和外部，内部顾名思义就是写在script标签内的代码，比如下面

<script>var a = 1; // ...</script>
复制代码

上面就是一个典型的内部脚本，不过可以看到缺点很明显，当项目规模增加时不利于维护；外部脚步通过script标签的src属性来引用外部脚本，可以是本地地址也可以是 url 地址，而且并不限制文件的后缀名以.js结尾。

<script src="./index.js"></script>
复制代码

顺便说下题外话，访问分为同源访问和非同源访问，对于非同源访问，我们可以使用 JSONP 来获取内容，获取的原理就是script可以访问非同源地址，具体内容后面展开，这里作为了解即可。

在大多数情况下script标签的执行顺序就是它出现的顺序，按照 1,2,3...的顺序加载，不过这显然有时候不合适，比如在 js 文件比较大的情况，初始化没有用到，我们是不是需要降低网页的加载时间。下面就介绍两个属性

名称	作用
async	在解析时就下载，下载完成后立即执行，不保证顺序
defer	dom 树生成后执行，执行是有顺序的，按照 defer 出现的顺序

上面只是简短的介绍，如果你不确定使用哪个属性，可以按照是否需要加载顺序来决定，如果需要就用defer，否则就使用async。

下面是一个标准html5结构

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>
复制代码

script标签可以有两个地方插入，第一个就是head标签内，另外一个就是body标签内，你可能想到了，插入方式就是如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <script></script>
  </head>
  <body>
    <!-- 或者 -->
    <script></script>
  </body>
</html>
复制代码

不过这里只推荐插入在body底部，原因有两点：

第一点就是如果脚本内部需要获取dom，那么在hean标签内是获取不到，因为浏览器的解析时从上往下，解析到scriptdom还没生成。如果在head内使用了，可以使用load事件来设置异步执行代码；
第二点：在网络不佳的情况下，script没有下载完成页面是一片空白，体验不好。而防止在body标签下，可以让用户查看到页面基本信息和解析dom的时候不会出错。

在不支持JavaScript的浏览器中可以设置<noscript/>标签，它会在脚本没有加载显示数据。

<noscript>
  <p>你的浏览器不支持</p>
</noscript>
复制代码

关注