script 标签上有那些属性

合集 - 前端小知识点(36)
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题4.设计一套全站请求耗时统计工具5.大文件上传6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程15.如何通过设置失效时间清除本地存储的数据?16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用
19.script 标签上有那些属性
20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?22.[代码实现]S 中如何实现大对象深度对比23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法24.<script> 标签放在 HTML 文档的 <body> 内底部25.虚拟滚动加加载的原理和实现思路26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关36.深度响应式劫持vue3
收起

以下是对<script>标签上各个属性的详细解释：

1. src 属性

  • 定义：
    • src 属性用于指定要加载的外部脚本文件的 URL 地址。这个 URL 可以是相对路径（相对于当前 HTML 文件所在的目录），也可以是绝对路径。
  • 示例：
    <script src="scripts/main.js"></script>
  • 作用：
    • 允许将 JavaScript 代码存储在独立的文件中，这样可以实现代码的模块化和复用。通过将代码存储在外部文件中，不仅可以使 HTML 文件更简洁，还能在多个 HTML 文件中共享相同的脚本，提高代码的可维护性和组织性。同时，将脚本代码与 HTML 分离，有助于更好地管理代码版本和进行代码更新。

2. type 属性

  • 定义：
    • 该属性用于指定脚本的 MIME 类型。在 HTML5 及以后的标准中，JavaScript 脚本的默认 type 属性值是 text/javascript，因此在很多情况下可以省略该属性。
  • 示例：
    <script type="text/javascript">
  // JavaScript 代码
</script>
    或在 HTML5 中更简洁的形式：
    <script>
  // JavaScript 代码
</script>
  • 作用：
    • 从理论上讲，它允许引入不同类型的脚本语言，但在实际应用中，几乎总是用于引入 JavaScript 代码。在早期的网页开发中，一些浏览器可能支持多种脚本语言（如 VBScript），通过 type 属性可以明确指定所使用的脚本语言类型。不过，随着 JavaScript 的广泛使用，现在该属性主要是为了向后兼容或在某些特定的场景下使用，一般默认为 JavaScript 类型。

3. async 属性

  • 定义：
    • 这是一个布尔属性，当存在时，表示脚本以异步方式加载和执行。
  • 示例：
    <script async src="scripts/asyncScript.js"></script>
  • 作用：
    • 当浏览器遇到带有 async 属性的 <script> 标签时，会在后台开始下载脚本文件，同时继续解析 HTML 文档。一旦脚本下载完成，会立即暂停文档的解析，开始执行该脚本。这种特性在提高页面加载速度方面非常有用，尤其是对于一些不依赖于页面 DOM 结构的脚本，例如一些统计分析脚本、广告脚本等。它可以让页面在脚本下载的同时继续加载其他内容，避免了对整个页面解析和渲染过程的阻塞。但需要注意的是，多个 async 脚本的执行顺序是不确定的，因为它们是哪个先下载完成哪个就先执行，可能会导致脚本之间的依赖问题，因此对于有依赖关系的脚本需要谨慎使用。

4. defer 属性

  • 定义：
    • 同样是一个布尔属性，它会使脚本在后台下载，但会延迟到整个 HTML 文档解析完成后，在 DOMContentLoaded 事件触发之前执行。
  • 示例：
    <script defer src="scripts/deferScript.js"></script>
  • 作用：
    • 与 async 属性类似，旨在优化页面的加载性能。不过，defer 属性确保了脚本会在 DOM 解析完成后，按照 <script> 标签在 HTML 文档中的顺序依次执行。对于那些需要操作 DOM 元素但又不希望阻塞页面解析的脚本，使用 defer 属性可以保证脚本执行时 DOM 元素已经准备好，并且能按照代码中 <script> 标签的先后顺序执行，避免了 async 属性可能导致的执行顺序混乱问题，非常适合那些需要在 DOM 准备好之后才可以安全执行的脚本。

5. charset 属性

  • 定义：
    • 用于指定外部脚本文件的字符编码。在现代网络开发中，通常默认使用 UTF-8 编码，并且大多数服务器会在响应头中正确设置字符编码。
  • 示例：
    <script src="scripts/script.js" charset="UTF-8"></script>
  • 作用：
    • 在某些特殊情况下，当服务器没有正确设置脚本文件的字符编码，或者需要使用除 UTF-8 之外的字符编码时，charset 属性可以确保浏览器能够正确解析脚本文件。但在一般情况下，这个属性使用较少，因为 UTF-8 编码已成为网络应用的标准，并且服务器通常会正确处理字符编码问题。

6. crossorigin 属性

  • 定义：
    • 该属性用于配置跨域请求脚本的 CORS（跨域资源共享）设置，其值可以是 anonymous（默认）、use-credentials 等。
  • 示例：
    <script crossorigin="anonymous" src="https://external-domain.com/script.js"></script>
  • 作用：
    • 当从不同的源（域名、协议或端口）加载脚本时，使用 crossorigin 属性可以控制如何进行跨域请求。anonymous 表示在跨域请求时不发送凭据（如 cookie 或 HTTP 认证信息），而 use-credentials 表示在跨域请求时会发送凭据。这对于需要获取脚本文件的错误信息或对跨域请求进行更高级别的安全和权限设置时非常重要，有助于防止跨域脚本加载时的安全问题，确保跨域脚本加载符合 CORS 策略。

7. integrity 属性

  • 定义：
    • 包含一个加密哈希值，基于 Subresource Integrity（SRI）机制，用于验证脚本文件在传输过程中是否被篡改。
  • 示例：
    <script integrity="sha256-[hash-value]" src="scripts/script.js"></script>
  • 作用：
    • 在从外部源（如 CDN）加载脚本时，通过 integrity 属性可以确保所加载的脚本的完整性和安全性。浏览器会根据该属性中的哈希值对下载的脚本文件进行验证，如果验证失败（即文件内容与哈希值不匹配），将不会执行该脚本，从而防止恶意篡改或注入恶意脚本，保障了网页的安全，防止恶意代码对网站的攻击。

通过合理使用 <script> 标签的这些属性，可以更好地管理脚本的加载顺序、执行时间、跨域问题和安全性，以实现更高效、更安全的网页开发。

posted @   jialiangzai  阅读(96)  评论(0)  编辑  收藏  举报
相关博文：
· <script> 标签放在 HTML 文档的 <body> 内底部
· 前端资源提示符
· <script>的属性
· HTML中script 标签中的那些属性
· JavaScript基础学习-script元素
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

喜欢请打赏

扫描二维码打赏

微信打赏

了解更多

点击右上角即可分享
微信分享提示