网站首页 > 基础教程正文

Link Preload 标签 link标签的rel

ccvgpt 2024-10-17 08:53:48 基础教程 7 ℃

本文主要对 Preload 这一新标准介绍。目前 Preload 兼容性如下：

Preload 标签是什么

Preload 作为一个新的 web 标准，旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑，且无需忍受基于脚本的资源加载器带来的性能损失。

<link rel="preload">

类似的技术

关于预加载，目前已经有几种方案

DNS prefetch

DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源，这样浏览器可以尽早的解析DNS。比如我们需要一个在example.com的图片或者视频文件。在<head>就可以这么写：

<link rel="dns-prefetch" href="//example.com">

Preconnect

和DNS prefetch类似，preconnect不光会解析DNS，还会建立TCP握手连接和TLS协议（如果需要）。用法如下：

<link rel="preconnect" href="http://example.com">

Prefetch

当能确定网页在未来一定会使用到某个资源时，开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。

	
<link rel="prefetch" href="image.png">

Subresource

subresource可以用来指定资源是最高优先级的。比如，在Chrome和Opera中我们可以加上下面的代码：

<link rel="subresource" href="styles.css">

Prerender

prerender是一个重量级的选项，它可以让浏览器提前加载指定页面的所有资源。

<link rel="prerender" href="/thenextpage.html"/>

Preload 的优势

相对于类似的技术，Preload 有 as 属性，这让浏览器可做一些 subresource 和 prefetch 无法实现的事：

浏览器可以设置正确的资源加载优先级
浏览器可以确保请求是符合内容安全策略的
浏览器能根据 as 的值发送适当的 Accept 头部信息
浏览器通过 as 值能得知资源类型

Preload 的与众不同还体现在 onload 事件上（在 Chrome 中，prefetch 和 subresource 是不支持的）。preload 不会阻塞 windows 的 onload 事件，除非，preload资源的请求刚好来自于会阻塞 window 加载的资源。

Preload 用法举例

<link rel="preload" href="a.js" as="script">

忽略 as 属性，或者错误的 as 属性会使 preload 等同于 XHR 请求，浏览器不知道加载的是什么，因此会赋予此类资源非常低的加载优先级。

Preload 应用

对字体的提前加载

字体被隐藏在css中间，浏览器有时候不能很好的将他们放入预加载器中，为此我们可以借助preload

<link rel="preload" href="font.woff" as="font" type="font/woff" crossorigin>

crossorigin 属性是必须的，即便是字体资源在自家服务器上，因为用户代理必须采用匿名模式来获取字体资源。

基于标记语言的异步加载

css 异步加载

<link rel="preload" as="style" href="asyncstyle.css" onload="this.rel='stylesheet'">

js 异步加载

<link rel="preload" as="script" href="async_script.js" onload="var script = document.createElement('script'); script.src = this.href; document.body.appendChild(script);">

async 属性会阻塞 window 的 onload 事件，这么写就没有问题了。

动态加载，但不执行

var link = document.createElement("link");
link.href = "myscript.js";
link.rel = "preload";
link.as = "script";
document.head.appendChild(link);
var script = document.createElement("script");
script.src = "myscript.js";
document.body.appendChild(script);

Preload 在生产环境的案例

Treebo 案例

Treebo，印度最大的旅馆网站之一，在 3G 网络下对其桌面版试验，在对其顶部图片和主要的 Webpack 打包文件使用 preload 之后，在首屏绘制和可交互延迟分别减少了 1s。

同样的，在对自己的渐进式 Web 应用程序主要打包文件使用 preload 之后，Flipkart 在路由解析之前节省了大量的主线程空闲时间（在 3G 网络下的低性能手机下）。

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信我回复“教程”

原文链接：http://eux.baidu.com/blog/fe/link-preload-%E6%A0%87%E7%AD%BE

作者：田光宇

上一篇： HTML基础的标签 html基本的标签
下一篇：整理关于html子页面刷新父页面的功能说明

网站首页 > 基础教程 正文

Link Preload 标签 link标签的rel

Preload 标签是什么

类似的技术

希望本文能帮助到您！

猜你喜欢

网站首页 > 基础教程正文