• 默认的,css被当做渲染时候必须加载的资源.
  • 设备类型和设备询问允许我们设置一些css资源编程可选的
  • 对于所有的css资源,无论是必须的还是可选的,都会被浏览器加载
The New York Times with CSSThe New York Times without CSS (FOUC)

上面显示了加载css和不加载css样式的效果,不加载css显示的页面同样被叫做 “Flash of Unstyled Content” (FOUC).

所有,页面的渲染必须需要DOM和CSSOM。

css是渲染所必须的资源,所以越快的获取css资源将优化渲染

CSS “media types”和 “media queries” 允许我们指定css的使用条件:

一个media query包括了设备类型和一个亦或更多的表达式来表明设备的特点。

如果设备满足media query,那么将会暂停阻塞来加载css资源。

<link href="style.css"    rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
  • 第一个声明表示在任何类型的设备上均会加载css文件
  • 第二个声明中all是默认参数,和第一个是等价的。
  • 第三个声明表明css文档的加载将根据设备的方向来决定是否加载
  • 最后一个旨在打印设备中才会加载

记住,不管media上对css做出了怎样的加载显示,浏览器都是下载了所有css文件的。

原文:https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css?hl=en

使用media来加载css的更多相关文章

  1. 加载 CSS 时不影响页面渲染

    转自:http://www.oschina.net/translate/loading-css-without-blocking-render 本文展示了一种技术,它能通过异步下载样式表,以阻止它们的 ...

  2. 异步加载CSS

    说到加载 CSS 这种事儿不是很简单吗?像这样咯: <link rel="stylesheet" href="cssfile.css"> 这不就完事 ...

  3. 异步加载css 和 谷歌浏览器各实用小工具介绍

    异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. CI模板加载css和js

    1.需求 ci无法加载css和js文件. 2.解决 删除..htaccess文件. 在config目录下配置base_url,并传给页面 $base_url = $this->config-&g ...

  6. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  7. [AngularJS] 使用AngularCSS动态加载CSS

    [AngularJS] 使用AngularCSS动态加载CSS 前言 使用AngularAMD动态加载Controller 使用AngularAMD动态加载Service 上列两篇文章里,介绍了如何如 ...

  8. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

  9. 用JavaScript动态加载CSS和JS文件

    本文转载自:http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/11/14/2248451.html 今天项目中需要用到动态加载 CSS 文件 ...

随机推荐

  1. 【Linxu】CentOS7下安装程序报错:

    进入root用户,然后编辑 vi /usr/libexec/urlgrabber-ext-down 将首行换成 #!/usr/bin/python2.

  2. Unable to lock the administration directory (/var/lib/dpkg/) is another process using it?

    I see pretty much all the answers recommend deleting the lock. I don't recommend doing that as a fir ...

  3. 深入解析Ajax——系列(一)

    常常写脚本的人.有时候会用到$ajax,有时候也会用到$post和$get,这几个方法都是用来从Webserver上获取静态的数据文件. jQuery对ajax操作进行了封装,在jquery中$.aj ...

  4. Oracle-31-对视图DML操作

    一.对视图进行DML操作 1.创建一个视图v_person create or replace noforceview v_person as select *from person where id ...

  5. js 宽和高

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  6. HTML+CSS要点

    1.td占据多行 / 列时,其挤开的 td 不写(但是包裹 td 的 tr 要写) 2. display:td 的元素中的文本默认垂直不居中(table中的td中的文本是垂直居中的) 3.th虽然定义 ...

  7. Cocos2d-x移植安卓的笔记

    一.下载所需软件 Java SDK   http://www.oracle.com/technetwork/java/javase/downloads/index.html  Windows x64 ...

  8. Something about cache

    http://www.tyut.edu.cn/kecheng1/2008/site04/courseware/chapter5/5.5.htm 5.5 高速缓冲存储器cache 随着CPU时钟速率的不 ...

  9. surface 通过U盘 镜像恢复系统

    1. 在恢复之前首先要解锁bitlocker(如果你的surface没有加锁就不需要这个步骤) 在另一台电脑上登录bitlocker锁绑定的微软账号,查询密钥,在需要的地方输入这个密钥(不经过这个操作 ...

  10. 基于bootstrap的纯静态网站目录

    一.博客页面 二.登陆页面 三.信息采集 四.管理后台 五.网站汇总(基于上边四个功能) 因为样式统一采用bootstrap的样式,所以不做介绍 样式导入可以将bootstrap下载至本地(有自动补齐 ...