zoukankan      html  css  js  c++  java
  • 异步加载CSS

    <link rel="preload"> 

    浏览器会高优先下载资源并缓存,进行执行,如果link标签中的as属性是stylesheet(as='stylesheet'),那么html在parse的时候会了解到这是一个CSS资源。

    ,由于加了predload指令,这个css的加载不会引起 render blocking

    但是relpreload的兼容性并不好,所以实际在异步加载css时我们不推荐使用这种方法,

    异步加载css我们使用这种方法:

    <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

    media print表示,"在打印时应用这个css",那么这个css其实就会异步的去下载,并应用,不会引起 render blocking

    onload="this.media='all'" 表示页面资源加载完成(window.onload)后将media属性设置为all,

    media属性设置为all就相当于..link中没有设置media这个属性..相当于普通的link标签,

    此时会去应用css

    <link rel="prefetch"> 

    浏览器会低优先级的下载资源并进行缓存,但并不会应用他们

    资料:

    https://3perf.com/blog/link-rels/

    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css/

    https://github.com/filamentgroup/loadCSS/blob/master/README.md

    https://www.filamentgroup.com/lab/load-css-simpler/

    https://stackoverflow.com/questions/36641137/how-exactly-does-link-rel-preload-work

  • 相关阅读:
    25.Zabbix入门必备
    6.Ansible Roles角色实战
    5.Ansible Jinja2 模板
    4.Ansible Task控制
    3.Ansible varialbes实战
    2.Ansible Playbook剧本
    1.Ansible自动化管理工具
    网站架构面试题必备
    winsows CMD及Linux命令大全 欢迎补充
    Oracle查询表空间
  • 原文地址:https://www.cnblogs.com/eret9616/p/14851823.html
Copyright © 2011-2022 走看看