2.1 <script>元素

script元素

• 将js插入html的主要方法是使用script元素
• 是由网景公司创造出来的，后来被加入html规范
• 有8个属性
• 解释行内js代码和外部代码，页面都会有阻塞，包含下载文件的时间
• 使用了src属性的script标签，就不能在包含js代码，否则会不执行js代码
• 不管什么代码，浏览器会按照script在页面的顺序依次解释，除非使用了defer和async
• 浏览器解析src资源时，会向指定路径发送一个get请求。这个请求不受浏览器同源限制。

script元素的8个属性

• async ：可选，表示立改立即下载脚本。但不能阻止其他页面动作。只对外部脚本文件有效。
• charset：可选。使用src属性指定的代码字符集。这个属性很少使用，因为浏览器不在乎它的值。
• crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。
• defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
• integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源的签名和这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以确保内容分发网络（CDN）不会提供恶意内容。
• language：废弃。最初用于表示代码块中的脚本语言。
• src：可选。表示外部文件。
• type：可选。代替language，表示脚本语言的内容类型。按照惯例，这个值始终都是“text/javascript”。

script标签位置

• 以前，都是放在head里面。但这样，就得解析完所有js代码，才能渲染也页面。就会有页面空白。
• 现在，放在body里面。处理js代码之前，就可以渲染页面了。空白页面时间就会短一些。

推迟执行脚本

• 设置defer这个属性，浏览器会立即下载，但是会延迟执行脚本，延迟到html全部解析完了再执行

异步执行脚本

• 设置async这个属性，就是告诉浏览器，不必等脚本下载和执行完后再加载页面和执行其他脚本。

动态加载脚本

• 使用dom api 动态添加script标签
• 默认情况，是添加了async属性，但是不是所有浏览器都支持async。所以要明确设置为同步加载，script.async='false'
• 这种方式获取的资源，对浏览器预加载器是不可见的。这回影响他们在资源获取队列中的优先级，可能会严重影响性能。
• 要想让预加载器知道这些动态请求文件的存在，可以在文档头部显示声明他们。比如

<link rel="preload" href="gibberish.js">