详细理解script标签

基础知识 专栏收录该内容
80 篇文章 1 订阅

说到script标签,大家耳熟能详的就是src属性了,但是你是否记得它有一些其它属性呢?接下来我仔细盘点,看看是否知道它们的含义。

async
charset
defer
src
type

常用的就是src属性,通过指向一个外部地址来加载脚本,如果用了src属性,那么标签中的内容会被忽略,不会被执行的!!!

<script src="test.js">
  console.log('不会执行')
</script>

script标签是没有跨域问题,可以加载任何网站的脚本,和img标签非常类似,所以通常也会用来解决跨域问题,就是人们通常所说的JSONP。

charset表示字符集,是可选的参数,默认utf-8编码。type是内容类型,是可选的参数,默认是text/javascript。 这两个属性了解即可,略过…

默认script标签都是同步加载脚本的,因为脚本之间存在依赖关系,只要前面的执行完毕才能执行后面的代码。但是如果脚本之间没有必然的关系,那么一般会选择异步加载脚本来提高效率,需要使用async属性。

<script src="test.js" async>
</script>

async要和src属性配合使用。因为只对外部脚本起作用,如果你是在script标签里面书写脚本,该脚本是不会异步加载!!!

还有一个是defer属性,表示延迟执行,具体意思是当页面解析和显示之后再执行。这个属性也是针对外部属性才起作用。

异步脚本一定会在页面的load事件前执行完毕,但是可能会在DOMContentLoaded事件触发之前或者之后执行。

  • 0
    点赞
  • 0
    评论
  • 11
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页

打赏

前端精髓

小礼物走一走,来CSDN关注我

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值