【html】script和link标签属性攻略

script和link标签属性攻略

相关文章

script和link标签属性攻略

script和link标签属性攻略

一、script标签和link标签

<script> 标签是 HTML 中用于包含 JavaScript 代码的元素。它有一些属性可以用来控制脚本的行为和加载方式。

<link> 标签用于在 HTML 中定义与外部资源之间的关系，通常用于引入样式表文件（CSS）、字体文件、图标文件等。除了指定外部资源的链接关系外，<link> 标签还可以用于一些其他用途，例如指定预加载或预获取资源。

二、script标签属性

src：

指定要加载的外部 JavaScript 文件的 URL。当指定了 src 属性时，<script> 标签内的内容会被忽略，浏览器会从指定的 URL 加载并执行相应的脚本文件。没有默认值。
例如：<script src="example.js"></script>
type：

指定脚本内容的 MIME 类型。默认值为 text/javascript。
例如：<script type="text/javascript"></script>
async：

布尔值属性，表示该脚本将异步加载。异步加载的脚本不会阻塞页面的加载，而是在加载完成后立即执行。则默认值为 false。
例如：<script src="example.js" async></script>
defer：

布尔值属性，表示该脚本将延迟加载。与 async 不同，defer 脚本会在文档解析完成后、DOMContentLoaded 事件触发前执行。默认值为 false。
例如：<script src="example.js" defer></script>
nonce：

为脚本指定一个加密的字符串，用于增加脚本的安全性。只有在与服务器生成的 nonce 值匹配时，浏览器才会执行该脚本。默认值为 “”。
例如：<script nonce="abc123"></script>
charset：

指定从外部脚本加载的字符集。通常情况下，不需要显式设置，因为浏览器会根据 HTTP 头部或脚本文件本身的字符集来自动识别。默认值为 “”（表示使用浏览器的默认字符集）。
例如：<script src="example.js" charset="UTF-8"></script>
crossorigin：

指定了是否使用 CORS（跨域资源共享）请求来获取脚本文件。常见的值包括 “anonymous” 和 “use-credentials”。默认值为 null，表示不使用 CORS 请求。
该属性的主要作用是控制浏览器在跨域请求资源时是否发送跨域凭据（例如 Cookie 或 HTTP 认证信息），以及如何处理跨域请求中的响应。
例如：<script src="https://example.com/example.js" crossorigin="anonymous"></script>

三、link标签属性

rel

指定当前文档与被链接文档之间的关系。没有默认值。
常见的值包括：
- stylesheet：用于引入样式表文件。
- icon：用于引入网站图标。
- preload：用于预加载资源。
- prefetch：用于预获取资源。
  示例：<link rel="stylesheet" href="styles.css">
href：

指定被链接资源的 URL。可以是相对路径或绝对路径。没有默认值。
示例：<link rel="stylesheet" href="styles.css">
type：

指定被链接资源的 MIME 类型。通常用于指定样式表文件的类型。默认值为 text/css。
示例：<link rel="stylesheet" href="styles.css" type="text/css">
crossorigin：

指定是否使用 CORS（跨域资源共享）请求来获取被链接资源。常见的值包括 “anonymous” 和 “use-credentials”。默认值为 null，表示不使用 CORS 请求。
该属性的主要作用是控制浏览器在跨域请求资源时是否发送跨域凭据（例如 Cookie 或 HTTP 认证信息），以及如何处理跨域请求中的响应。
示例：<link rel="stylesheet" href="styles.css" crossorigin="anonymous">
preload：

preload 属性用于指示浏览器在页面加载时提前加载指定的资源（例如脚本、样式表等），以便在稍后的时间点使用。
示例：<link rel="preload" href="example.js" as="script">
prefetch：

prefetch 属性用于告诉浏览器在空闲时提前获取指定资源，并存储在缓存中，以便将来使用。它主要用于提前加载用户可能会在未来浏览到的页面的资源。
示例：<link rel="prefetch" href="example.js">

四、async, defer, preload, prefetch的区别

async

当浏览器遇到带有 async 属性的 <script> 标签时，会异步地加载该脚本文件，不会阻止页面的解析和渲染。加载完成后，脚本会立即执行，不管页面的加载状态。
适合用于不依赖于页面内容或其他脚本的独立脚本。因为它们是异步加载和执行的，所以不能保证它们执行的顺序。

defer

当浏览器遇到带有 defer 属性的 <script> 标签时，会异步地加载该脚本文件，但会推迟执行脚本文件，直到页面解析完毕后再执行。
与 async 不同，defer 保证了脚本文件的执行顺序与它们在文档中的顺序一致。
适合用于依赖于页面内容的脚本，但又不想阻塞页面解析的情况。

preload

<link> 标签的 preload 属性用于指示浏览器在页面加载时预加载资源，包括 JavaScript 文件、样式表、字体文件等。它告诉浏览器资源是页面所需的关键资源，并且应该尽快加载。
与 async 和 defer 不同，preload 并不立即执行脚本，而是在浏览器的空闲时段加载资源。
适合用于提前加载可能在页面之后使用的关键资源，以减少后续请求的延迟。