script

在前端编程中，当我们需要使用到脚本时候会使用到script标签。这个标签最早是由网景公司创造。在Netscape Navigator 2中实现的。后来他被加入到我们html标签中，才有了我们现在的script

属性

src属性我们是非常熟悉了，它是引入外部脚步的属性，但是其实它还有不同的属性。

• async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作。只对外部文件有效，意味着你本页面写的script脚本，是不受这个属性影响的。
• charset：可选。使用 src 属性指定的代码字符集。几乎很少使用，我们在头标签中一般就会设置这个值。没必要单独为他设置。
• crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不设置。它只有当访问的服务器也设置了跨源资源共享，这个脚本才会加载，并且如果有报错，它也会准确捕抓到。但是，我们所知道
• defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。顾名思义，当页面完全被加载后才执行脚本。它在ie7 之后就不支持行内脚本了。
• integrity：可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI， Subresource Integrity）。如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错， 脚本不会执行。这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容。有时候我们cdn使用时候可能会用到吧 ，但是具体设置，可能还需要进一步的研究。
• src：可选。表示包含要执行的代码的外部文件。
• type : 可选。代替了language属性，表示这个文件的MiME文件类型，JavaScript 文件的 MIME 类型通常是"application/x-javascript"。但是一般不会特别设置。

解析

行内的js代码，会被保存到解析器的环境中，直到script标签内的代码完成之前，页面其他内容不会被释放，也不会被显示。而且如果在执行script标签内的代码遇到 <\script> 浏览器会任务这是结束标签，会停止解析，解决这个记得要加转义字符。

外部的js。同样的也是和行内解析一样也会，页面也会阻塞。（阻塞时间也包含下载文件的时间。）

如果行内代码中<script>标签中也有src属性，浏览器只会下载并执行脚本文件，从而忽略行内代码。

标签位置

放在head要解析完所有的script才会渲染页面，放在body里面页面会在处理 JavaScript 代码之前完全渲染页面。

async 异步加载脚本

• 标记为 async 的脚本并不保证能按照它们出现的次序执行

• 只适用与外部脚本。

• 浏览器不必等脚本下载和执行完后再加载页面

动态加载脚本

• 这样动态创建

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
document.head.appendChild(script); 

• 默认这种方式是异步方式加载

  防止浏览器不支持async

  script.async = false;
  

• 预加载器不可以遇见这种方式

  最好头部显式声明

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

行内与外部脚本

推荐外部脚本

• 可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存 所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑 代码。
• 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都 用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
• 适应未来。通过把 JavaScript 放到外部文件中，就不必考虑用 XHTML