（一）性能优化策略

最新推荐文章于 2024-02-15 01:29:22 发布

卡尔KAEL

最新推荐文章于 2024-02-15 01:29:22 发布

阅读量391

点赞数

分类专栏：前端性能优化及工程化

本文链接：https://blog.csdn.net/weixin_37625953/article/details/100017572

版权

前端性能优化及工程化专栏收录该内容

9 篇文章 1 订阅

订阅专栏

用例代码

<head>
  <meta charset="utf-8">
  <title>JS and CSS preload example</title>
  // 1. 浏览器可以预先加载style.css, main.js的资源
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">
  // 2. 使用style.css样式
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>
  // 3. 使用main.js文件
  <script src="main.js"></script>
</body>

哪些类型的内容可以被预加载

音频文件。 document: 一个将要被嵌入到<frame>或<iframe>内部的HTML文档。 embed: 一个将要被嵌入到<embed>元素内部的资源。 fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。 font: 字体文件。 image: 图片文件。 object: 一个将会被嵌入到<embed>元素内的文件。 script: JavaScript文件。 style: 样式表。 track: WebVTT文件。 worker: 一个JavaScript的web worker或shared worker。视频文件。

包含一个MIME类型

<head>
  <meta charset="utf-8">
  <title>Video preload example</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4">
    <source src="sintel-short.webm" type="video/webm">
    <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
  </video>
</body>

异步获取

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web font example</title>

    <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <h1>Hipster ipsum is the best</h1>

    <p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&amp;B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&amp;B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>

    <p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>

    <h2>It is the quaintest</h2>

    <p>Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut post-ironic skateboard trust fund.</p>

    <h2>No, really...</h2>

    <p>Trust fund celiac farm-to-table PBR&amp;B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn.</p>

    <p>Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them.</p>
  </body>
</html>

在Github上的示例源代码

包含媒体查询

节
<link>元素有一个很棒的特性是它们能够接受一个media属性。它们可以接受媒体类型或有效的媒体查询作为属性值，这将令你能够使用响应式的预加载！

让我们来看一个简单的示例（可以查看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>

脚本化与预加载

如果需要，你可以完全以脚本化的方式来执行这些预加载操作

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

需要预加载一个脚本，但需要推迟到需要的时候才令其执行时，这种方式会特别有用

var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);

不过过要注意 **preload ** 浏览器兼容

卡尔KAEL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（一）性能优化策略

用例代码<head> <meta charset="utf-8"> <title>JS and CSS preload example</title> // 1. 浏览器可以预先加载style.css, main.js的资源 <link rel="preload" href="style.css" as="style"&gt...
复制链接

扫一扫