HTML中的JavaScript

JavaScript如何和HTML建立联系

通过<script></script>标签,在HTML有两种使用方式：

• 行内代码（非最佳实践）:

  <script type="text/javascript">
    function (){
       ....
    }
  </script>

• 外部文件（最佳实践）：
  理论上把不推迟执行的脚本放置在主体内容之后</body>之前。因为浏览器必须解释完位于<script>元素中的代码，然后才能继续渲染页面的剩余部分。
  推荐理由：可维护性、缓存、适应未来。

<script src="xxx.js"></script>

script标签中的属性介绍：

• async：表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。
• charset：指定的代码字符集
• crossorigin：配置相关请求的CORS（跨源资源共享）设置
• defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。
• integrity：允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）
• src：表示包含要执行的代码的外部文件

• type：代码块中脚本语言的内容类型（现代浏览器默认支持js脚本）

  <script type="MIME_type"></script>
  /*MIME_type:
    text/javascript
    text/ecmascript
    application/ecmascript
    application/javascript
    text/vbscript
  */

  defer和async区别

  defer：推迟执行脚本
  async：异步执行脚本
  区别：defer等到HTML解析到结束后执行脚本，原则上按照列出的顺序执行，async下载完之后就执行，不能保证按列出的次序执行脚本

  关于noscript元素的使用场景

• noscript标签可以用来判断浏览器是否支持JavaScript，虽然说现在的浏览器已经100%支持JavaScript。
• 虽然有注释标签 <!-- -->，但是我们也可以把需要注释的HTML结构用<noscript></noscript>包裹，达到注释的效果（虽然说有剑走偏锋）。