script 标签复习

Script #

html中的scritp标签作用是将js进入到网页中。

script元素的属性 #

属性	作用	是否可选
async	表示立即开始下载脚本,但不能阻止其他页面动作，比如下载资源或等待其他脚本加载	可选
defer	表示脚本可以延迟到文档完全被解析和显示之后再执行。针对外部脚本文件有效	可选
charset	使用src属性指定代码的字符集	可选
src	表示包含要执行的代码的外部文件	可选
type	表示代码快中脚本语言的类型(MIME)。正常是"text/javascript", 如果是"module",则代码会当初ES6模块，就可以使用import和export语法	可选
language	废弃了	-
integrity	允许对比接收到的资源和指定的加密签名以验证资源的完整性	可选
crossorigin	配置跨域设置	可选

阻塞 #

当加载外部文件，解析行内js，解析外部js文件时，页面也会阻塞。

对比脚本加载和解析 #

当没有设置defer或async时，浏览器都会按照<script></script>在页面中出现顺序进行加载和解释它们，第二个<sctipt></sctipt>元素的代码必须在第一个<sctipt></sctipt>元素代码解析完毕才能开始解析。

设置了defer属性时，脚本在执行时不会改变页面的结构，脚本会在整个页面都加载解析完成之后再运行。(图示)会立即下载，但会延迟执行。

设置了async属性时，浏览器不必等脚本下载和执行完后在加载页面，同样也不必等待改异步脚本下载和执行完成之后再加载其他脚本。

注意 #

当script设置 src属性时， 不应再在<script>和</script>中间再包括其他的js代码。 如果都存在，浏览器只会下载并执行脚本文件，从而忽略行内代码。

总结 #

• 要包含外部的js文件，必须将src属性设置成js文件的url地址。文件可以不在同一台服务器上。

• script元素会依照他们在网页中出现的位置一次被解析。在不适用defer,async属性的情况下，script代码会严格按照次序解析。

• 对于不延迟执行的脚本，浏览器必须解释完位于script元素中的代码，然后才能继续渲染页面的剩余部分。因此通常把脚本script防止在页面末尾

• 可以使用defer属性来把脚本推迟到文档渲染完毕后再执行

• 可以使用async属性来设置脚本不需要等待其他脚本，也不会组设文档的渲染。异步加载。