<script>

  • 使用它将javascript引入HTML页面

  • 它的8个属性：
    async 立即下载脚本，但不能阻止其他页面动作，只对外部脚本有效
    charset 代码字符集
    crossorigin 配置相关请求的CORS（跨域资源共享）设置
    defer 立即下载脚本，但渲染完页面后才执行，只对外部脚本有效
    integrity 用于确保CDN（Content Delivery Network，内容分发网络）不会提供恶意内容
    language 这个属性已废弃，以前用于表示代码块中的脚本语言，如"JavaScript"、"VBScript"等
    src 外部脚本的路径
    type MIME类型，值得注意的是：这个属性如果值是module，代码会被当成ES6模块，这个时候才能在代码中出现import和export关键字

  • 行内或外部JavaScript文件代码在被计算完成之前，页面其余内容不会被加载（页面会阻塞），不会显示

  • 异步脚本不能保证按照它们出现在页面中的次序执行

  • <script>-</script>标签对之间想要再嵌入<script>，必须对其进行转义

  • 使用服务器端脚本语言动态生成JavaScript代码以及在浏览器中将JavaScript扩展语言（如TypeScript，JSX）转译为JavaScript的实现基础：浏览器不会检查所包含的JavaScript文件的扩展名
    Tip:服务器根据文件扩展名来响应正确的MIME类型

  • 行内JavaScript代码和外部JavaScirpt脚本同时存在时，外部脚本有更高的优先级，行内代码会被忽略

  • src属性指向的资源可以是一个跟包含脚本的页面不在同一个域中的URL，向这个资源发送的请求不受浏览器同源策略的限制，但返回并被执行的JavaScript则受限制，同时，这个请求受到父页面HTTP/HTTPS协议的限制

<script>标签的位置：

  • 放在<head>中时，由于页面在浏览器解析到<body>时才会渲染，这样一来，当有较多的JavaScript引入时，就会出现明显的页面渲染延迟，解决这一问题的办法是将其放到页面显示内容之后，</body>之前

动态加载脚本

  • 通过向DOM中添加<script>标签并为其添加src属性（注意：这样获取资源对浏览器的预加载器是不可见的），同时，为让预加载器知道这些动态请求资源的存在，需要在文档头部显示声明它们：<link rel="prefetch" href="xxxxx.js">

XHTML中的JavaScript

  • XHTML（Extensible HyperText Markup Language，可扩展超文本标记语言），实际上就是将HTML作为XML应用的包装
  • 在XHTML中必须指定type的值为text/javascript才能应用JavaScript，且在XHTML中需要使用实体来替代对应的符号，例如：以实体"<"替换"<"，以">"替换">"等（另外一种方法是：把所有JavaScript代码都包含在一个CDATA中）
  • CDATA块表示的是可以包含任意文本的区块，其中的内容不作为标签解析，所以不存在将"<"解析为标签的开始的情况
<script type="text/javascript"> <![CDATA[ function compare(a,b){ if(a<b){console.log("A is less than B");} else if(a>b){console.log("A is greater than B");} else{console.log("A is equal to B");} } ]]> </script>
  • 在不支持CDATA块的非XHTML兼容的浏览器中要使用JavaScript注释来抵消：
<script type="text/javascript"> //<![CDATA[ function compare(a,b){ if(a<b){console.log("A is less than B");} else if(a>b){console.log("A is greater than B");} else{console.log("A is equal to B");} } //]]> </script>

Tip:页面的MIME类型被指定为"application/xhtml+xml"时会触发XHTML模式（不是所有浏览器都支持）

被废弃的语法

  • 除非使用XHTML或<script>中包含非JavaScript代码，否则都不建议指定type属性
  • 有的浏览器支持JavaScript，有的不支持（如：Mosaic），面对这种情况，采用下面的办法对不支持JavaScirpt的浏览器隐藏JavaScript，同时，支持JavaScript的浏览器可以解析其中的JavaScript代码
<script> <!-- function sayHi(){console.log("Hi!");} //--> </script>

使用JavaScript外部文件的优势：

  • 可维护
    （略）
  • 缓存
    如果两个页面使用同一个JavaScript文件，该文件只会被浏览器下载一次，这样页面加载会快些
  • 适应未来