将首屏页面要用到的CSS文件，放在页面头部加载，其他模块的CSS可以使用异步加载：loadCSS 和 Preload。

关于preload,推进2篇文章给大家看下：

1、通过rel="preload"进行内容预加载： https://developer.mozilla.org/zh-CN/docs/Web/HTML/Preloading_content

2、preload 的w3文档： https://www.w3.org/TR/preload/

对于一些不是首屏加载的css，我们可以如下写法：

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

防止浏览器禁止js，保险起见，也可以如下

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

<noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>

为了避免有些浏览器会重新调用处理程序rel='stylesheet'这个属性，我们一般推荐如下写法：

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

<noscript><link rel="stylesheet" href="path/to/haorooms.css"></noscript>

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

因此， 不考虑浏览器兼容问题的情况下 （考虑兼容问题，可以使用loadCss，这里不多演示），我们对上面代码再次进行优化：

<head>

  <link rel="stylesheet" href="/首屏加载css.css">

  <link rel="preload" href="/不是首屏加载的css.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

</head>

<body>

  <header>…</header>

  <main>…</main>

  <section class="comments">…</section>

  <section class="about-me">…</section>

  <footer>…</footer>

</body>

转自：https://www.tuicool.com/articles/Yfeeu2J

CSS加载性能优化的更多相关文章

  1. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  2. React 16 加载性能优化指南

    关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...

  3. SPA 首屏加载性能优化之 vue-cli3 拆包配置

    前言 现在已经是vue-cli3.x    webpack4.x 的时代了,但是网上很多拆包配置还是一些比较低版本的. 本文主要是分享自己的拆包踩坑经验. 主要是用了webpack4 的 splitC ...

  4. ListView加载性能优化---ViewHolder---分页

    ListView是Android中一个重要的组件,可以使用它加列表数据,用户可以自己定义列表数据,同时ListView的数据加载要借助Adapter,一般情况下要在Adapter类中重写getCoun ...

  5. [转]listview加载性能优化ViewHolder

    当listview有大量的数据需要加载的时候,会占据大量内存,影响性能,这时候就需要按需填充并重新使用view来减少对象的创建. ListView加载数据都是在public View getView( ...

  6. android之 listview加载性能优化ViewHolder

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  7. listview加载性能优化ViewHolder

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局, 但当listview有大量的数据需要加载的时候 ...

  8. listview加载性能优化

    在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候, ...

  9. web性能优化之---JavaScript中的无阻塞加载性能优化方案

    一.js阻塞特性 JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 即<script>每次出现都会让页面等待脚本的解析和执 ...

随机推荐

  1. jquery 选择唯一值 选择器“”非“用法

    $(document).ready(function () { $("#addwork").hide(); $(".xi").click(function(){ ...

  2. Redis 【string】 一句话说明

    APPEND----------------------------------------------在字符串后面追加 BITCOUNT------------------------------- ...

  3. php中continue关键字

    跳出本次循环进行下一次. 在while和do while中也可以用 $num = 0; while($num < 10) { $num ++; if($num === 5) { echo 'eq ...

  4. ssm集成redis

    身在一个传统的IT公司,接触的新技术比较少,打算年后跳槽,所以抽空学了一下redis. 简单的redis测试,咱们这边就不讲了,现在主要讲讲ssm集成redis的过程,因为现在项目用的就是ssm的框架 ...

  5. 从MySQL到ORM(三)：连接、存储过程和用户权限

    一.联结表 数据仍使用前文中的数据. 1.子查询 作为子查询的SELECT语句只能查询单个列.企图检索多个列将返回错误. -- 作为查询条件使用 -- 查看TNT2订单对应的客户ip(order表) ...

  6. 转：zip 和 unzip 的参数说明

    收集的资料: 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip -r yasuo.zip abc.txt dir1 2.我下载了一个yasuo.zip文件, ...

  7. spss C# 二次开发 学习笔记（一）——配置数据源

    由于项目的需要,使用Spss进行数据统计分析. Spss对于数据统计分析的功能有多强主要是客户关注的事情,我所主要关注的是,Spss的二次开发有多复杂. 学习的基本思路是: (1)首先了解统计基本知识 ...

  8. safari

    http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/ http://rawgit.com/zha ...

  9. UOJ46. 【清华集训2014】玄学

    传送门 Sol 考虑对于操作时间建立线段树,二进制分组 那么现在主要的问题就是怎么合并信息 你发现一个性质,就是每个修改只会在整个区间内增加两个端点 那么我们二进制分组可以得到每个区间内最多只有区间长 ...

  10. CF961F k-substrings

    题意 给定一个字符串 \(S\) 求所有的 \(S[i,n-i+1]\) 的 \(border\) 长度(最长的前缀等于后缀),要求长度是奇数 \(n\le 10^6\) Sol 首先发现每次求的串都 ...