CSS 样式异步加载

于 2016-06-23 08:39:08 发布
阅读量9.6k 收藏 5
点赞数 2
分类专栏： JavaScript 文章标签： 异步 延迟加载css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011127019/article/details/51740438
版权
本文介绍了如何利用link标签的media属性实现CSS的异步加载。通过设置media属性为'none'，确保浏览器在不阻塞页面渲染的情况下下载样式表。此方法在高版本Google浏览器有效，但可能不适用于Firefox和IE。此外，文章还提到了可以运用相同原理来延迟加载JavaScript。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.方法1，使用link标签的media属性（注：测试只有高版本的Google浏览器可以，FF，IE都失败）

触发异步样式下载的诀窍是使用一个 <link> 元素，并 为media 属性设置一个不可用的值 (我用的是 media=”none”, 不过其它的任何值也是可以的)。当一个媒体查询的结果值计算出来是 false 的时候，浏览器仍然会下载样式表，但是不会在渲染页面之前等待样式表的资源可用。

<link rel="stylesheet" href="css.css" media="none">
样式表一下载好，media 属性就必须被设置一个可用的值，以便样式规则能被应用到 html 文档中onload 事件就可以用来将 media 属性切换到all： 

<link rel="stylesheet" href="css.css" media="none" οnlοad="if(media!='all')media='all'">
了解本专栏 订阅专栏 解锁全文 超级会员免费看
博客
Cordova 插件合集_cordova-plugin合集
04-05 5974
1.0cordova-plugin-contacts 联系人，新增，联系人，拨打电话cordova plugin add cordova-plugin-contacts详细：cordova-plugin-contacts联系人操作_天马3798的博客-优快云博客_cordova 联系人1.cordova-plugin-themeablebrowsercordova plugin add cordova-plugin-themeablebrowser详细使用：cordova-p...
博客
.Net Mqtt协议-MQTTNet（一）简介
05-10 885
一、MQTTNet 简介MQTTnet 是一个高性能的MQTT类库，支持.NET Core和.NET Framework。
博客
MQTT协议介绍
05-10 807
MQTT（Message Queuing Telemetry Transport）是一种由IBM开发的轻量级消息传输协议，专为低带宽、高延迟或不可靠的网络环境设计，广泛应用于物联网（IoT）、智能家居和工业自动化等领域。MQTT采用发布/订阅模型，支持一对多通信，并提供三种服务质量级别（QoS0、QoS1、QoS2）以确保消息传递的可靠性。其轻量级特性使其特别适合嵌入式设备和网络带宽有限的场景。MQTT服务器作为发布-订阅架构的转发中心，支持多种编程语言和操作系统，如PHP、JAVA、Python、C、C#
博客
Nginx bash命令使用整理
04-17 254
当你遇到 Failed to restart nginx.service: Unit nginx.service not found 错误时，这意味着系统无法找到 Nginx 的服务单元文件。这通常是因为 Nginx 没有通过 systemd 管理，或者 Nginx 没有正确安装。首先，确保 Nginx 已经正确安装。1. 检查 Nginx 是否正确安装。
博客
Nginx Http配置整理
04-17 374
Nginx 支持 rewrite 功能。若您在编译时没有去掉 pcre，您可在 HTTP 的 server 中增加。由于版本问题，配置文件可能存在不同的写法。例如：Nginx 版本为。，即可将默认80端口的请求重定向为 HTTPS。未添加注释的配置语句，您按照下述配置即可。通过 Web 服务器实现跳转。在页面中添加 JS 脚本。在后端程序中添加重定向。
博客
微信小程序webview与小程序页面交互
04-08 1040
会自动铺满整个小程序页面，提供的接口返回小程序页面。2.小程序 web-view 页面参数接收。1.html 网页端代码编写。
博客
微信小程序开发前端培训课程
04-07 340
1.Box 盒子模型，列表布局（一行两列，一行多列）3.文字居中，块居中 ，水平方向，垂直方向。3、微信小程序的项目结构、创建、发布审核。1、微信小程序的概念、历史、发展。6、微信小程序的wxml基础语法。4、微信小程序开发常见问题整理。10、微信小程序的路由和导航。2.布局DIV+span。2、微信小程序的开发工具。5、微信小程序的框架接口。7、微信小程序的配置文件。8、微信小程序的布局组件。9、微信小程序的表单组件。2.单行文字，多行文字。1.HTML标签基础。6.CSS3动画基础。
博客
C#后端开发培训教程
04-07 293
1.Asp.Net Core项目基础创建，生命周期。3.Asp.Net Core接口访问、传参。4.Asp.Net Core接口测试、跨域。2.Element UI 搭建、基础使用。2.Asp.Net Core接口定义。C# Linq 数据源操作基础语法。1.Vue 基础使用、数据绑定。1.创建数据、备份还原数据库。4.班级、学生数据结构示例。3.Sql语句：增删改查。2.数据表：数据类型对应。C#基础语法、数据类型。C#数组、集合、类操作。5.数据库表：增删改查。4.数据库上下文操作。
博客
Vue 类与样式
03-29 464
将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。都是 attribute，我们可以和其他 attribute 一样使用。除了字符串外，表达式的值也可以是对象或数组。二、绑定内联样式，绑定style。用法提供了特殊的功能增强。
博客
Vue 表单输入绑定，双向绑定
03-22 553
如果该值无法被 parseFloat() 处理，那么将返回原始值。特别是当输入为空时 (例如用户清空输入字段之后)，会返回一个空字符串。如果你想要默认自动去除用户输入内容中两端的空格，你可以在。注意：要制定type=number html属性。如果你想让用户输入自动转换为数字，你可以在。还可以用于各种不同类型的输入，用户Vue 组件属性双向绑定。用于Vue 表单双向绑定。
博客
Vue生命周期_Vue生命周期钩子
03-15 420
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。注册一个回调函数，在组件挂载完成后执行。组件创建时候触发执行。
博客
Vue 概念、历史、发展和Vue简介
03-15 1347
当我们做了修改时，不会刷新页面，只是对组件本身进行立刻重载，不会影响整个应用当前的状态。2014年2月，尤雨溪在Hacker News、Echo JS与Reddit的R和JavaScript版块上均发布了Vue.js的最早版本，发布后的一天之内，Vue.js就登上了这3个网站的首页，之后Vue.js成为GitHub上最受欢迎的开源项目之一。——Vue.js 能够自动追踪依赖的模板表达式和计算属性，提供 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API，使读者更加容易理解，能够更快上手。
博客
Asp.Net Core WebAPI开发教程（入门）
03-01 454
二、Asp.Net Core WebAPI 请求案例。
博客
Asp.Net Core MVC 中级开发教程
02-15 343
Asp.Net Core MVC 中级开发教程。二、Asp.Net Core 服务使用和封装。三、Asp.Net Core 中间件。
博客
vue2老版本 npm install 安装失败_安装卡主
02-13 789
特别说明：vue2老版本安装慢、运行慢，建议升级vue3+element plus+ vite。"core-js": "^3.6.5" 升级版本直接修改版本号。删除文件 package-lock.json。安装时间还是比较长，大约10分钟左右；第一步、修改npm 镜像为国内镜像。
博客
微信小程序如何隐藏分享功能_如何取消页面分享功能
12-28 720
在 onShareAppMessage 事件中监听转发按钮，或者自定义转发按钮的转发事件。转发可以配置转发是路径参数，可以自定义转发是图片内容。注意：这个事件，是在添加页面的时候，自动会生成的。解决方案：将此事件监听，从页面中删除就可以了。可以分享转发当前页面到群或者微信好友。右上角胶囊按钮》转发。
博客
微信小程序开发中级教程
12-21 304
4.微信小程序分享、转发朋友/群、分享朋友圈。#10.微信小程序扫码、二维码识别，条码识别。#9.微信小程序地图组件、地图接口整理。#1.微信小程序自定义组件基础。#2.微信小程序自定义组件传值。#3.微信小程序自定义组件通信。#5.微信小程序视频号对接整理。#7.微信小程序自定义Tab栏。#6.微信小程序自定义导航栏。#8.微信小程序位置接口整理。微信小程序开发中级教程。
博客
微信小程序的概念、历史、发展
12-07 1816
2020年6月23日，在WWDC 2020全球开发者大会上，苹果推出了一项新的“App Clip”小程序功能，该功能是基于卡片的快速应用程序，可让你在需要时访问应用程序的一小部分，而无需用户安装完整的应用程序。2016年1月11日，2016微信公开课PRO版在广州举行，“微信之父”张小龙首次公开演讲，宣布微信公众号将推出“应用号”，通过公众号完成一些App的部分功能。2023年9月1日起，微信公众平台将推出备案管理系统，要求微信小程序在上架之前必须完成备案，以提高小程序的管理规范化。
博客
微信小程序开发入门教程
12-07 306
3、微信小程序的项目结构、创建、发布审核。#1、微信小程序的概念、历史、发展。#6、微信小程序的wxml基础语法。#4、微信小程序开发常见问题整理。#10、微信小程序的路由和导航。#2、微信小程序的开发工具。#5、微信小程序的框架接口。#7、微信小程序的配置文件。#8、微信小程序的布局组件。#9、微信小程序的表单组件。微信小程序开发入门教程。
博客
C# 命名空间详解（二）系统命名空间_常用命名空间
11-23 849
这个命名空间包含StronglyTypedResourceBuilder类,该类提供对强类型资源的支持.这个编译时功能通过创建包含一组静态只读属性的类封装对资源的访问,从而使得使用资源变得更加容易.这个命名空间包含由服务器和客户端应用程序共享,以支持可插接式模型轻松添加或移除功能的基类.这个命名空间为严格控制网络访问的开发人员提供Windows套接字接口的托管实现.这个命名空间包含的类用于在Web应用程序中实现ASP.NET安全性.这个命名空间提供基于服务器的计时器组件,用以按指定的间隔引发事件.
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值