码迷,mamicode.com
首页 > Web开发 > 详细

html-proload

时间:2019-11-25 18:14:57      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:track   iframe   ram   复杂   头部   idt   用户   dia   eve   

  • 对基础与初始化进行预加载
  • 加载顺序 document > preload > 正常加载
  • media 属性
  • 不同设备时的响应式加载 - media="(max-width: 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 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源

html-proload

标签:track   iframe   ram   复杂   头部   idt   用户   dia   eve   

原文地址:https://www.cnblogs.com/ajaemp/p/11929236.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!