如此强大的<script>标签

HTML中的JavaScript

导读:

JavaScript引入网页,最早是由网景公司的提出来的,而script这一传奇标签,就是网景公司创造出来的,为什么说它如此强大呢?且听我细细道来:

众所周知,JS是通过script标签来进入HTML页面的,而两者之间的关系,我可以很形象地打个比喻,方便各位看官理解。
script标签就像是一条鱼儿一样,它可以自由自在地在HTML的页面海洋中存在,这条鱼儿可以天然地把JS代码嵌入其中,

它进入页面的方式可以是:

  • 从本地的河里汇入【通过src属性 在本地引入一个JS文件】
  • 从外部的天空落入【通过src属性 在不同的域引入一个JS文件】
  • 直接把肚子里面自带的JS代码放入【在script标签里面写JS】

所以,两者之间的关系,就像鱼儿离不开海洋,海洋没了鱼儿也少了交互的乐趣。【个人理解啦】
哈哈,希望这个比喻能让各位看官对HTML中的JavaScript这一概念更加熟悉,再有面试官问你,丢给他,不要含糊。
在这里插入图片描述

学习背景:

最近这几天难得有点时间,静下心来看了看刚买的红宝书的第二章,才发现这个小小的script标签真的不能小看了它,还真能在书里面发现新世界。记得才开始学JS那时候知道有这么个标签和可以使用src属性来引入以外,其他的一无所知,看了书,才知道它竟然有8个属性【现在准确说是7个】每一个属性都是如此让我新鲜和好奇,下面就让我们来一一认识认识吧。

学习内容:

一、src:最常用于引入JS文件,有一个最为强大且备受质疑的特性

【可以包含来自外部域的JS文件,跟img很像,src属性后面可以是一个完整的URL】
有了这一特性,那么处理跨域简直就是不讲武德啊,为什么这么朔呢,你直接丢一个URL过来,它分分钟让浏览器给你解析这个资源,
而浏览器就像个笨蛋一样,一定会向含有src属性的路径发送一个GET请求——(这个GET是不受浏览器同源策略限制的),从而得到这个资源。

【为啥我说浏览器是个笨蛋】——因为它才不管你引入的东西安全不安全能用不能用,反正引入就完事了,万一遇到互联网上的坏人呢,比如:恶意的程序员是随时可能替换这个文件哦,所以从安全角度出发考虑,一定要保证这个域是自己的或者是一个可信来源。
这里啰嗦两句——虽然script标签的integrity这个属性是可以用来防范这个问题的一种武器,但是并不是所有的浏览器都支持integrity哦。

——说了上面最强大的属性以后,再来说说async和defer这两个属性的异同点——

我觉得要搞清楚这两个属性是用来干啥的,必须先要理清楚JS基本引入位置JS引入的先后问题这个两个概念,才能对接下来要说的这两个属性理解得更好。
首先来说先后问题——根据JS这门语言的特点,就是单线程,就是根据JS出现的先后顺序来依次解析,我们本次暂时先不讨论同步异步的问题,等到有时间我再出篇关于事件执行机制的文章我们再来细细讨论。
那么再来说说——JS基本引入位置
一般地,JS文件引入都是放到head标签内部的,这毋庸置疑,但是这里就会有个前端性能的问题,虽然你把JS引入放到头部很显眼也很规整,但是浏览器它是很老实的,它会老老实实的把你引入的代码全部先下载、解释、解析完成以后,然后解析到body开始标签时算起才开始渲染页面,这样就会导致一个现象——页面延迟
这里还有一个专业的名词来描述这一现象——页面阻塞
即——在script元素中的代码被解析计算完成之前,页面的其余内容是不会被加载也不会被显示的
为了避免这一现象,最常见的做法就是——把JS代码放到body的结束标签上面,这不用多说。

但是——用接下来的两个属性你一样的可以把JS引入放到head中,而且完全没有之前说的那种现象 ——>>

二、async:说简单点,就是个异步的概念,但是它最常用来和defer来比较。

【表示应该立即下载脚本,但是不能阻止其他页面动作,只对外部脚本文件有效会在onload事件之前执行】
什么意思,书上说的文绉绉的,说简单点就是和src属性一起用的意思,给script标签加上它的目的其实就是——告诉浏览器
不必等到脚本下载和执行完毕后——再加载页面。言下之意就是——你浏览器不用管我,先加载页面吧

那么这时候会不会出现一种这样的情况???
就是——我在head里面同时引入两个外部JS文件,并且我给这两个script标签都加上async呢?
当然可能出现,虽然红宝书上面没有告诉我具体的答案,但是我们来思考一下,
a.js是异步引入——b.js也是异步引入,那究竟谁先的问题?
其实按照我个人的理解来说:就相当于,a也谦虚,b也谦虚,执行谁都可以,具体只看a和b之前有没有依赖关系而已。
(这里如果我分析的不对,请多包含,欢迎指正。)

三、defer:理解了上面的async以后,这个就简单了,就是一个推迟执行的意思,类似于async,相当于window.onload事件(在事件篇我们好好分析一下)

它存在的意义就是【告诉浏览器,你给我解析到html结束标签的时候再来解析我这里面的JS文件】
只不过它跟async的唯一区别就在于——如果同时有两个外部引入,那么它是严格按照先后顺序来解析的

四、charset:可选。指定代码字符集。现在都很少使用了,大多数浏览器忽略此值。

五、crossorigin【跨过、源头】就是配置相关请求的CORS设置,默认为false,不使用,有两个参数

  1. anonymous——表示配置文件请求不必设置凭据标志
  2. use-credentials——设置凭据标志,意味着出站请求会包含凭据。

六、integrity:跟之前说的一样,安全性武器,可以用来比对——接收到的资源和指定的加密签名

目的来验证——子资源完整性SRI ——只要不匹配,就报错,并且JS脚本不执行了。

七、language:废弃了,已经没了

八、type:是用来代替第七个属性的,【表示脚本语言的内容类型,也叫MIME类型】

按照惯例,一般都是**“text/javascript”这个值,当然还有其他的值,只不过有些值可能会被忽略,比如“application/x-javascript”**这个值通常是不用给type的,如果给了,会被忽略,因为他是JavaScript的默认MIME类型

还有一种最重要的使用——就是开启ES6模式
即:type=“module”,这时候才能使用import和export这两个关键字

总结归纳HTML中的JavaScript:

【1】要包含外部的JS文件,必须用src属性包含完整分URL或者本地相对路径,而且可以变相处理跨域问题

【2】在不使用defer和async的前提下,script元素必须按照在网页中出现的先后顺序来解释

【3】对于不推迟的脚本文件,浏览器必须解释完位于script元素中的代码,才能渲染页面,所以,要把JS引入放到合适的位置才行

【4】异步脚本不能保证按照他们在页面中出现的次序执行

【5】还有一个新的标签我没有说,就是noscript标签,很简单,就是和img标签的alt属性一样,
表示如果你的浏览器不支持JS的话,那么noscript标签里面的内容就会显示出来,
反之就永远不会显示,有的网站页面是会有这个东西存在,这里只是简单提一下,仅此而已。

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页