zoukankan      html  css  js  c++  java
  • 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 是告诉浏览器页面可能需要的资源,浏览器不一定会加载这些资源
  • 相关阅读:
    [易学易懂系列|rustlang语言|零基础|快速入门|(18)|use关键词]
    [易学易懂系列|rustlang语言|零基础|快速入门|(17)|装箱crates]
    [易学易懂系列|rustlang语言|零基础|快速入门|(16)|代码组织与模块化]
    区块链行业访谈:《创世访谈录》
    波卡简介
    [易学易懂系列|rustlang语言|零基础|快速入门|(15)|Unit Testing单元测试]
    GIT分布式代码管理系统
    jenkins介绍及部署tomcat环境、部署Maven项目及密码忘记修改
    Docker安装、命令详情、层级架构、docker服务启动失败解决方法
    ELK日志分析系统部署
  • 原文地址:https://www.cnblogs.com/ajaemp/p/11929236.html
Copyright © 2011-2022 走看看