将首屏页面要用到的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. 安装caffe(opencv3+anaconda3)

    目录 仅安装CPU版本的caffe 1.下载相关的依赖包: 2.安装opencv3 3.安装caffe 参考文献: 仅安装CPU版本的caffe 1.下载相关的依赖包: sudo apt-get in ...

  2. docker部署ELK日志处理

    docker环境下部署的ELK系统,日志处理,保留最近五个小时的日志 dockerlog.sh #!/bin/bash logs=`find /var/lib/docker/containers/ - ...

  3. [C语言] 数据结构-衡量算法的标准

    1.衡量算法的标准 算法 解题的方法和步骤 衡量算法的标准 1.时间复杂度 大概程序要执行的次数,而非执行的时间,不同的机器运行时间肯定不一样. 2.空间复杂度 算法执行过程中大概所占用的最大内存 3 ...

  4. Java基础教程(1)--概述

    一.什么是Java语言   Java是于1996年由Sun公司发布的一种极富创造力的面向对象的程序设计语言.它不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java ...

  5. MySql:局域网和权限用户管理

    MySql 5.6(XP)/5.7(win7) 添加用户和设置局域访问权限操作.请在 http://sourceforge.net/  下载MySql Control Center(不是安装版本). ...

  6. python中静态方法(@staticmethod)和类方法（@classmethod）的区别

    一般来说,要使用某个类的方法,需要先实例化一个对象再调用方法. 而使用@staticmethod或@classmethod,就可以不需要实例化,直接类名.方法名()来调用. 这有利于组织代码,把某些应 ...

  7. 理解webpack4.splitChunks之其余要点

    splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.ca ...

  8. drupal7 为视图添加 过滤标准 内容类型

    1.单击 FILTER CRITERIA 右边的“添加”按钮 2.在弹出的对话框中输入“类型”,单击搜索结果中的“内容:类型” 3.确定之后,选择需要的内容类型即可,例如添加“书评”内容类型的过滤 4 ...

  9. Web前端和后端开发的区别和要求

    Web前端和后端开发的区别和要求 有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...

  10. MUI框架-02-注意事项-适用场景-实现页面间传值

    MUI框架-02-注意事项-适用场景-实现页面间传值 关于开发,我拷贝太多也没什么意义,就请查阅:官方文档:http://dev.dcloud.net.cn/mui/ui/ 快速入门 - 注意事项 有 ...