html-proload

对基础与初始化进行预加载
加载顺序 document > preload > 正常加载
media 属性
不同设备时的响应式加载 - media="(max- 600px)
as 属性： //as不明的优先级最低并导致二次获取
audio: 音频文件。
document: 一个将要被嵌入到](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/frame)或[内部的HTML文档。// href = "/other/widget.html";
embed: 一个将要被嵌入到``元素内部的资源。
fetch: 那些将要通过fetch和XHR请求来获取的资源，比如一个ArrayBuffer或JSON文件。
font: 字体文件。
image: 图片文件。
object: 一个将会被嵌入到``元素内的文件。
script: JavaScript文件。
style: 样式表。
track: WebVTT文件。
worker: 一个JavaScript的web worker或shared worker。
video: 视频文件。

实例：

<link rel="preload" href="https://resj.outdoorclub.com.cn/jss/js/vue.min_2.6.10.js" as="script">
<script type="text/javascript" src="https://resj.outdoorclub.com.cn/jss/js/vue.min_2.6.10.js"></script>

基于脚本的异步加载- 动态创建一个 link 标签后插入到 head 头部

const link = document.createElement('link');
link.rel = 'preload';
link.as = 'style';
link.href = '/path/to/style.css';
document.head.appendChild(link);
//预加载这个文件，但并不实际执行它

加载样式文件

function LoadStyle(url) {
  try {
    document.createStyleSheet(url)
  } catch(e) {
    var cssLink = document.createElement('link');
    cssLink.rel = 'stylesheet';
    cssLink.type = 'text/css';
    cssLink.href = url;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(cssLink)
  }
}

加载脚本文件

function loadScript(url, callback) { 
    var script = document.createElement('script'); 
    script.type = "text/javascript"; 
    if (typeof(callback) != "undefined") { 
        if (script.readyState) { 
            script.onreadystatechange = function() {  
                if (script.readyState == "loaded" || script.readyState == "complete") {  
                    script.onreadystatechange = null;  
                    callback();  
                } 
            } 
        } else { 
            script.onload = function() {  
                callback(); 
            } 
        } 
    }
    script.src = url; 
    document.body.appendChild(script); 
}
//head无堵塞加载 defer属性或者是 async 属性来实现

检测浏览器环境中的支持度 - 忽略对应的 link 标签进行正常加载

const isPreloadSupported = () => {
  const link = document.createElement('link');
  const relList = link.relList;
  if (!relList || !relList.supports) {
    return false;
  }
  return relList.supports('preload');
}

对于一些不是首屏加载的css

<link rel="preload" href="path/to/haorooms.css" as="style" onload="this.rel='stylesheet'">

基于标记语言的预加载- 推荐如下写法：

<link rel="stylesheet" href="/首屏加载css.css">
    
<link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/不是首屏加载的css.css"></noscript> //防止浏览器禁止js

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

为了更好的兼容rel=preload，可以使用loadCSS ，github地址： https://github.com/filamentgroup/loadCSS

对字体的提前加载

不带 crossorigin 会二次获取

web 字体是较晚才能被发现的关键资源（late-discovered critical resources）中常见的一类。web 字体对页面文字的渲染资至关重要，但却被深埋 CSS 中，即便是预加载器有解析 CSS，也无法确定包含字体信息的选择器是否会真正应用在 DOM 节点上。理论上，这个问题可以被解决，但实际情况是没有一个浏览器解决了这个问题。而且，即便是问题得到了解决，浏览器能对字体文件做出合理的预加载，一旦有新的 css 规则覆盖了现有字体规则，前面的预加载就多余了。

总之，非常复杂。

但有了 preload 这个标准，简单的一段代码就能搞定字体的预加载。

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

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

type 属性可以确保浏览器只获取自己支持的资源。尽管Chrome 支持 WOFF2，也是目前唯一支持 preload 的浏览器，但未来或许会有更多的浏览器支持 preload，而这些浏览器支不支持 WOFF2 就不好说了。

prefetch

告诉浏览器加载下一页面可能会用到的资源
preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源，prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源

实例：

对字体的提前加载

prefetch

相关推荐