标签实现预加载功能

时间:2021-1-8 作者:admin

前言

最近在研究 vue-cli 3.0生成的工程,在构建后生成的 index.html里面发现了下面这种用法:

<link as=style href=/css/app.f60416c7.css rel=preload>
<link as=script href=/js/app.69189fdd.js rel=preload>

这就触到了本人的知识盲区了,本着扫盲的目的,研究了下 link 标签,发现这个小东西功能还是挺强大的,上面的就是为了实现预加载功能,懂点儿英文的,一看见preload 就大致知道了。

之前也有预加载技术,像 prefetch,subresource 等,关于这两者和 preload 的区别,这是另外的话题了, 感兴趣的可以自己搜一下,不想搜的,你只要知道这两个跟 preload 相比弱的一逼就行了,就是 prefetch 浏览器兼容性方面稍微好一点点,这三个也各有偏重和应用场景,就不详细介绍了,下面我们就详细展开preload 这块。

功能介绍:

preload 是一项新的 web 标准,旨在提高性能,让 FE 对加载的控制更加粒度化。它让开发者有自定义加载逻辑的能力,免受基于脚本的加载器所带来的性能损耗。

preload 一个基本的用法就是提前加载资源,尽管大多数基于标记语言的资源能被浏览器的预加载器(preloader)尽早发现,但不是所有的资源都是基于标记语言的,比如一些隐藏在 css 和 js 中的资源(字体,图片等),当浏览器发现页面需要这些资源时,重新走一遍加载执行渲染的过程,会降低用户体验,并且对页面的渲染 造成延迟;

Preloader 简介

HTML 解析器在创建 DOM 时如果碰上同步脚本(synchronous script),解析器会停止创建 DOM,转而去执行脚本。所以,如果资源的获取只发生在解析器创建 DOM时,同步脚本的介入将使网络处于空置状态,尤其是对外部脚本资源来说,当然,页面内的脚本有时也会导致延迟。

预加载器(Preloader)的出现就是为了优化这个过程,预加载器通过分析浏览器对 HTML 文档的早期解析结果(这一阶段叫做“令牌化(tokenization)”),找到可能包含资源的标签(tag),并将这些资源的 URL 收集起来。令牌化阶段的输出将会送到真正的 HTML 解析器手中,而收集起来的资源 URLs 会和资源类型一起被送到读取器(fetcher)手中,读取器会根据这些资源对页面加载速度的影响进行有次序地加载。

预加载的好处:

  1. 让浏览器提前加载指定资源(这里预加载完成后并不执行),在需要执行的时候在执行,这样将加载和执行分开,可以不阻塞渲染和 window.onload事件。

  2. 提前预加载指定资源,特别是字体文件,不会再出现 font 字体在页面渲染出来后,才加载完毕,然后页面字体闪一下变成预期字体。

  3. 带有 onload 事件,可以自定义资源在预加载完毕后的回调函数。

涉及属性介绍:
应用场景:
元素有一个很棒的特性是它们能够接受一个[media](/go/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FHTML%2FElement%2Flink%23attr-media)属性。它们可以接受[媒体类型](/go/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2F%40media%23Media_types)或有效的[媒体查询](/go/?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FCSS%2FMedia_Queries%2FUsing_media_queries)作为属性值,这将令你能够使用响应式的预加载!

让我们来看一个简单的示例(可以查看Github上的源代码在线示例):

<head>
  <meta charset="utf-8">
  <title>Responsive preload example</title>
  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>
  <script>
    var mediaQueryList = window.matchMedia("(max-width: 600px)");
    var header = document.querySelector('header');
    if(mediaQueryList.matches) {
      header.style.backgroundImage = 'url(bg-image-narrow.png)';
    } else {
      header.style.backgroundImage = 'url(bg-image-wide.png)';
    }
  </script>
</body>

你可以看到我们在元素中包含了一个media属性,因此,当用户在使用较窄屏幕的设备时,较窄的图片将会被预加载,而在较宽的设备上,较宽的图片将被预加载。然后我们仍需要在header元素上附加合适的图片——通过Window.matchMedia / MediaQueryList 来加以实现(可以查看 Testing media queries一文来了解更多信息)。

web 字体是较晚才能被发现的关键资源中常见的一种。但是在用户体验对前端来说至关重要的现阶段前端开发来说,web 字体对页面的渲染也是至关重要。字体的引用被深埋在 css 中,即便预加载器有提前解析 css,也无法确定包含字体信息的选择器是否会真正作用在 dom 节点上。所以为了减少 FOUT(无样式字体闪烁,flash of unstyled text )需要预加载字体文件,有了 preload,一行代码搞定:

<link rel=preload href='font.woff2' as=font type='font/woff2' crossorigin />

NOTE :

crossorigin 属性在加载字体的时候是必须的,即便字体没有跨域是在自己公司的服务器上,因为用户代理必须采用匿名模式来获取字体资源(为什么会这样呢?)。

type 属性可以确保浏览器只获取自己支持的资源。

另外一个有意思的场景也因为 preload 的出现变得可能——当你想加载某一资源但却不想执行它。比如说,你想在页面生命周期的某一时刻执行一段脚本,而你无法对这段脚本做任何修改,不可能为它创建一个所谓的 runNow()函数。

在 preload 出现之前,你能做的很有限。如果你的方法是在希望脚本执行的位置插入脚本,由于脚本只有在加载完成以后才能被浏览器执行,也就是说你得等上一会儿。如果采用 XHR 提前加载脚本,浏览器会拒绝重用这段脚本,有些情况下,你可以使用 eval 函数来执行这段脚本,但该方法并不总是行得通,也不是完全没有副作用。

现在有了 preload,一切变得可能

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);

先看代码

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

preload 的 onload 事件可以在资源加载完成后修改 rel 属性,从而实现非常酷的异步资源加载。

脚本也可以采用这种方法实现异步加载

难道我们不是已经有了

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。