将首屏页面要用到的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. Ruby(2): 基本语法上

    表达式和变量: 这两点和其他主流的编程语言基本没有差别,这里直接跳过. 需要注意的是 ruby中 x=x+1 可以写成 x+=1 但是不支持 x++ , x-- 等一元运算符  比较运算符和表达式: ...

  2. MongoTemplate基本操作

    本文基于spring boot项目,快速构建项目请参考:https://www.cnblogs.com/lay2017/p/8836273.html 添加mongo依赖 <dependency& ...

  3. 搭建和启动javaWeb项目

    首先,我们得配置服务器,我的demo采用tomcat 你只要找到tomcat的home路径就好了,后面会自动给你提示的

  4. IIS6.0+PHP5.3+mssql 配置及远程连接数据库

    安装软件需求:IIS6.0.php5.3 .sqlsrv驱动.sql server ODBC驱动  所有软件压缩包下载 注意看:安装软件的环境需求,根据环境自行选择版本,例如odbc驱动老一点版本才能 ...

  5. PAT 1074. Reversing Linked List

    #include <cstdio> #include <cstdlib> #include <iostream> #include <unordered_ma ...

  6. laravel开发之-php artisan命令

    php artisan :所有的命令列表 php artisan make:controller 文件夹名称/控制器名称 :创建控制器的命令以及控制器放置的文件夹 php artisan make:m ...

  7. 通过vertical-align属性实现“竖向居中”显示

    自学编程大概有大半年的时间了,从15年7月开始学习使用人数最多的JAVA,到后来喜欢上了前端,但由于之间在建筑设计院的工作加班颇为频繁,每天刨去工作,基本没有多少自己个人的时间,只能每天6,7点起床, ...

  8. 3d图片点击切换

    效果图: 代码块: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  9. Python with VS Code

    1. 基本的代码结构为: 2.

  10. Windows 批处理(cmd/bat)常用命令教程

    Windows批处理(cmd/bat)常用命令教程 简单详细,建议收藏 常见问题: 1.如果你自己编写的.bat文件,双击打开,出现闪退 2.批处理.bat 文件中输出中文乱码 解决方法在文章末尾! ...