跳到主要内容

认识

2023年03月14日
柏拉文
越努力，越幸运

一、认识​

将JavaScript插入HTML的主要方式是使用<script></script>元素。

二、属性​

async​

async 异步执行脚本 告诉浏览器立即下载脚本，脚本执行期间可以继续解析DOM树或者执行其他脚本。 只对外部脚本文件有效。

语法

<script async type="text/javascript" src='foo.js'></script>

特点

  • async声明的脚本并不保证按照它们出现的次序执行
  • async声明的脚本可能会在 DOMContentLoaded`之前或者之后

charset​

charset 使用src属性指定的代码字符集。

crossorigin​

crossorigin 配置相关请求的CORS(跨源资源共享)设置。

语法

<script crossorigin="anonymous" type="text/javascript" src='foo.js'></script> // 表示配置文件请求不必设置凭据标识

<script crossorigin="use-credentials" type="text/javascript" src='foo.js'></script> // 设置凭据标识，意味着出站请求会包含凭据

defer​

defer 推迟执行脚本 告诉浏览器应该立即下载脚本，到浏览器解析到结束的</html>标签后才会执行。只对外部脚本文件有效。

语法

<script defer type="text/javascript" src='foo.js'></script>

特点

  • HTML5规范要求defer声明的脚本应该按照它们出现的次序执行
  • defer声明的脚本会在DOMContentLoaded事件之前执行

integrity​

integrity 可选。允许比对接收到的资源和指定的加密签名以验证子资源完整性。如果接收到的资源签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN）不会提供恶意内容。

src​

src 表示包含要执行的代码的外部文件

type​

type 可选。表示代码块中脚本语言的内容类型（也称 MIME 类型）。

三、方法​

四、事件​

五、位置​

如果将所有的<script></script>元素都被放在页面的<head></head>标签内，也就意味着必须把所有的JavaScript代码都下载、解析完成后，才开始页面的渲染，这样会导致页面渲染明显的延迟，在此期间浏览器窗口完全空白。为了解决这个问题，将所有的<script></script>引用都放在<body></body>元素中的页面内容后面。这样一来，页面会在处理JavaScript代码之前完全渲染页面，用户会感觉页面加载更快了。

六、问题​

6.1 JavaScript 延迟加载的方法​

  1. 给script添加async属性，则加载和渲染后续文档元素的过程将和script的加载与执行并行进行
  2. 给script添加defer属性，加载后续文档元素的过程将和script的加载并行，但是script的执行要在所有元素加载解析完成之后，DOMContentLoaded事件触发之前完成
  3. 动态创建script标签，等到DOMContentLoaded事件触发时，生成一个script 标签，渲染到页面上
  4. setTimeout定时器延迟执行