preload
<!-- preload stylesheet resource via declarative markup --> <link rel="preload" href="/styles/other.css" as="style"> <!-- or, preload stylesheet resource via JavaScript --> <script> var res = document.createElement("link"); res.rel = "preload"; res.as = "style"; res.href = "styles/other.css"; document.head.appendChild(res); </script>
<link rel="preload" href="/assets/font.woff2" as="font" type="font/woff2"> <link rel="preload" href="/style/other.css" as="style"> <link rel="preload" href="//example.com/resource" as="fetch" crossorigin> <link rel="preload" href="https://fonts.example.com/font.woff2" as="font" crossorigin type="font/woff2">
crossorigin属性是一个CORS settings attribute。它旨在与外部资源链接一起使用。用于启用CORS的资源的Preload links,例如具有crossorigin属性的fonts或images,必须包含一个crossorigin属性,以便正确使用该资源。
<script> function preloadFinished(e) { ... } function preloadError(e) { ... } </script> <!-- listen for load and error events --> <link rel="preload" href="app.js" as="script" onload="preloadFinished()" onerror="preloadError()">
<link rel="preload" href="//example.com/widget.html" as="document"> <script> var res = document.createElement("link"); res.rel = "preload"; res.as = "document"; res.href = "/other/widget.html"; document.head.appendChild(res); </script>

本站preload前与preload后
Resource Hints
DNS Prefetch
<link rel="dns-prefetch" href="//example.com">
Preconnect
<link rel="preconnect" href="//example.com"> <link rel="preconnect" href="//cdn.example.com" crossorigin>
Prefetch
<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials"> <link rel="prefetch" href="/library.js" as="script">
Prerender
<link rel="prerender" href="//example.com/next-page.html">
参考链接
Related Posts
- Amazon S3 存储桶无法删除
- 关闭Sublime Text更新检查
- Device supports arm64-v8a, but APK only supports armeabi on device *
- npm ERR! gyp verb `which` failed Error: not found: python
- c++ ‘-DNODE_GYP_MODULE_NAME=libsass’ ‘-DUSING_UV_SHARED=1’ ‘-
- Sublime Text 自动换行
- macOS中staff和wheel是什么?
- command not found: deno – macOS
- 语义版本控制