浏览器中的script标签

浏览器中的 script 标签是再平常不过的标签了,如下列举了 script 标签常用的属性。

属性是否必选描述
async可选表示脚本不需要等待其它脚本,也不阻塞文档渲染,异步加载脚本,只对外部脚本文件有效。
crossorigin可选配置相关请求的 CORS(跨源资源共享)设置。默认不使用 CORS。crossorigin="anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志,意味着出站请求会包含凭据。
defer可选表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
integrity可选允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI,Subresource Integrity)。如果接收到的资源的签名与这个属性指定的签名不匹配,则页面会报错,脚本不会执行。这个属性可以用于确保内容分发网络(CDN,Content Delivery Network)不会提供恶意内容。
src可选引入外部的 js 文件
type可选表示代码块中脚本语言的内容类型(也称 MIME 类型)。按照惯例,这个值始终都是text/javascript,尽管text/javascripttext/ecmascript都已经废弃了。JavaScript 文件的 MIME 类型通常是application/x-javascript,不过给 type 属性这个值有可能导致脚本被忽略。在非 IE 的浏览器中有效的其他值还有application/javascriptapplication/ecmascript。如果这个值是 module,则代码会被当成 ES6 模块,而且只有这时候代码中才能出现 importexport 关键字。

关于 async 和 defer

script 标签默认是同步加载的,加上这两个标签中的任意一个,都可以让其异步执行,那么 asyncdefer 有什么区别?

使用 async 的脚本不能保证执行的顺序,即多个标记为 async 的 script 的执行顺序是不一定的。所以,async 脚本不应该在加载期间修改 DOM。

defer 标记的脚本会延迟到整个页面都解析完毕(DOMContentLoaded之前)再执行。使用 defer 标记的脚本相当于告诉浏览器立即下载,但是延迟执行。原则上按照它们列出的顺序进行执行。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。