当前位置： 首页 > news >正文

外置的媒体查询，对性能又一次的优化提升

news 2026/4/7 3:51:45

通常情况下我们写媒体查询都是写在一个样式文件中，对于浏览器加载的时候，会解析到最后一行样式时才会渲染页面，这样就会造成页面的白屏时间过长。

但是通常情况下大量的媒体查询样式都是无用的，现在浏览器允许我们在引用样式文件的时候就可以指定媒体查询，这样没有匹配到的样式加载的优先级会被降低，从而提升页面的渲染速度。

案例

假设我们有一个页面，需要在不同的设备上显示不同的样式，我们可能会这样写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/desktop.css"><link rel="stylesheet" href="css/mobile.css">
</head>
<body></body>
</html>
  • desktop.css
html, body {margin: 0;padding: 0;
}body {background: pink;
}
  • mobile.css
@media (max-width: 600px) {body {background: lightblue;}
}

这样有什么问题呢？我们先来分析一下在这整个期间发生了什么：

首先是网络，可以看到优先级都是最高的，优先级最高代表着会被优先加载，css加载又会阻塞渲染，所以如果css文件过大，会造成页面的白屏时间过长。

再看性能分析，在网络一栏并行发送了两个请求，可以看到mobile.css是后加载出来的，但是渲染是在mobile.css加载完成之后才开始的，但是桌面模式下不需要mobile.css，这样就造成白屏时间延长。

解决方案

这个时候我们就可以使用外置的媒体查询，来解决这个问题，我们只需要在link标签上添加media属性，就可以实现这个效果。

<link rel="stylesheet" href="css/desktop.css" media="screen and (min-width: 600px)">
<link rel="stylesheet" href="css/mobile.css" media="screen and (max-width: 600px)">

在我们加上这个属性之后，我们再来看一下网络和性能分析：

网络方面可以看到，当我的设备分辨率小于600px的时候，desktop.css虽然放在最前面，但是优先级却是最低的，而mobile.css则是最先加载的。

性能方面可以看到，desktop.css一加载完毕就开始渲染页面，而mobile.css则是继续加载，仿佛不关心页面的渲染，这样页面的白屏时间就有效的缩短了。

这次我调整了分辨率，因为desktop.css加载比较快，可以看我画红色竖线的地方，desktop.css加载完毕之后，页面就开始渲染了；

同时使用这种方式加载，可以省掉css文件中的媒体查询，这样可以减少css文件的大小，提高加载速度。

其他用法

这种方式可以支持几乎所有的媒体查询，比如：

<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/landscape.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" href="css/retina.css" media="screen and (-webkit-min-device-pixel-ratio: 2)">

这些都可以通过media属性来实现，但是需要注意的是，目前并不是所有的浏览器都支持这种方式，而且部分浏览器表现形式也不相同。

由于个人设备有限，我这里只是在chrome上写的示例，根据资料显示，firefox和safari都支持这种方式，但是safari并没有做任何优化。

最后

整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。

有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享

部分文档展示：



文章篇幅有限，后面的内容就不一一展示了

有需要的小伙伴，可以点下方卡片免费领取

相关文章：

外置的媒体查询，对性能又一次的优化提升

通常情况下我们写媒体查询都是写在一个样式文件中&#xff0c;对于浏览器加载的时候&#xff0c;会解析到最后一行样式时才会渲染页面&#xff0c;这样就会造成页面的白屏时间过长。 但是通常情况下大量的媒体查询样式都是无用的&#xff0c;现在浏览器允许我们在引用样式文件…...

编程日记 2023/2/23 17:47:53

【Galois工具开发之路】关于IDEA的gradle工程执行两次premain的bug~

文章目录关于premain方法问题记录解决方式关于premain方法 是Java Agent技术的一种&#xff0c;通过 -javaagent: 的方式&#xff0c;添加外部代理&#xff0c;代理入口方法为 premain 。另一种Java Agent技术则是动态attach到java进程的方式&#xff0c;这种方式则是使用 age…...

编程日记 2023/2/23 17:46:46

云计算 概念与技术

如果我倡导的计算机在未来得到使用&#xff0c;那么有一天&#xff0c;计算也可能像电话一样成为共用设施。计算机应用将成为一全新的、重要的产业的基础。 ——John McCarthy 云计算的概念 定义 Garther公司的定义 一种计算方式&#xff0c;能通过Internet技术将可扩展的和…...

编程日记 2023/2/23 17:45:39

基于追踪标记的WAF设计思路

一 相关背景 目前&#xff0c;市面上的WAF产品通常采用”发现即阻断“的策略&#xff0c;以防护针对业务系统的Web攻击行为。虽然该策略可及时阻断攻击&#xff0c;但形式上过于简单&#xff0c;并不能有效掌握攻击者进一步的攻击意图&#xff0c;也不能有效提高攻击者的成本投…...

编程日记 2023/2/23 17:44:33

Java StringBuffer StringBuilder，超详细整理，适合新手入门

目录 一、StringBuffer和StringBuilder的区别是什么&#xff1f; 二、StringBuffer的示例 三、StringBuilder的示例 四、为什么StringBuffer和StringBuilder比String更适合在循环中使用&#xff1f; 五、如何将String对象转换为StringBuilder或StringBuffer对象&#xff1…...

编程日记 2023/2/23 17:43:27

数据结构—堆（完全解析）

数据结构—堆&#xff08;完全解析&#xff09; 数据结构——堆&#xff08;Heap&#xff09;大根堆、小根堆 详解数据结构——堆 堆的基本存储 【从堆的定义到优先队列、堆排序】 10分钟看懂必考的数据结构——堆 【堆/排序】堆排序的两种建堆方法 【算法】排序算法之堆排序 C…...

编程日记 2023/2/23 17:42:22

深度卷积对抗神经网络 进阶 第三部分 GANs Unpaired Translation with Cycle GAN 模型

非配对的图像转换应用 Unpaired Image-to-Image Translation Unpaired image-to-image translation 主要用于学习两组图像之间的对应关系&#xff0c;检查和寻找两堆数据中的共同内容&#xff08;content&#xff09;以及每堆独有的特点&#xff08;style&#xff09;。而这个…...

编程日记 2023/2/23 17:40:15

常见的排序算法 | 直接插入排序 | 希尔排序 | 选择排序 | 堆排序 | 冒泡排序 | 快速排序 | 归并排序 |（详解，附动图，代码）

思维导图&#xff1a; 一.插入排序 1.直接插入排序&#xff08;InsertSort&#xff09; ①手机通讯录时时刻刻都是有序的&#xff0c;新增一个电话号码时&#xff0c;就是使用插入排序的方法将其插入原有的有序序列。 ②打扑克 步骤&#xff1a; ①如果一个序列只有一个数&am…...

编程日记 2023/2/23 17:39:08

深入浅出 MySQL 索引（一）

MySQL 索引&#xff08;基础篇&#xff09; 你好&#xff0c;我是悟空。 本文目录如下&#xff1a; 一、前言 最近在梳理 MySQL 核心知识&#xff0c;刚好梳理到了 MySQL 索引相关的知识&#xff0c;我的文章风格很多都是原理 实战的方式带你去了解知识点&#xff0c;所以…...

编程日记 2023/2/23 17:38:02

FinClip 的 2022 与 2023

相比往年&#xff0c;今年复盘去年与展望新年的文章来的稍慢一点。不过也希望能够借这篇文章&#xff0c;和关注 FinClip 的用户朋友们一起聊聊&#xff0c;我们在去年和今年的想法与计划。 2022 在过去的一年中&#xff0c;我们的身边发生了很多事情&#xff0c;这些事情在不…...

编程日记 2023/2/23 17:36:55

Python 泛型 - 如何在实例方法中获取泛型参数T的类型？

先上解决方法&#xff1a;https://stackoverflow.com/questions/57706180/generict-base-class-how-to-get-type-of-t-from-within-instance 再来简单分析下源码。 talk is cheap, show me the code. from typing import Dict Dict[str, int]Dict只是一个类型&#xff0c;并不…...

编程日记 2023/2/23 17:35:51

Shell语法基础总结

Shell 变量使用变量只读变量删除变量变量类型Shell 字符串单引号与双引号字符串获取字符串长度提取子字符串拼接字符串Shell 数组定义数组读取数组获取数组的长度Shell 传递参数Shell 基本运算符算术运算符关系运算符布尔运算符逻辑运算符字符串运算符Shell 信息输出命令Shell …...

编程日记 2023/2/23 17:34:46

架构基本概念和架构本质

什么是架构和架构本质 在软件行业&#xff0c;对于什么是架构&#xff0c;都有很多的争论&#xff0c;每个人都有自己的理解。此君说的架构和彼君理解的架构未必是一回事。因此我们在讨论架构之前&#xff0c;我们先讨论架构的概念定义&#xff0c;概念是人认识这个世界的基础&…...

编程日记 2023/2/23 17:33:38

taobao.trade.ordersku.update( 更新交易的销售属性 )

&#xffe5;开放平台免费API必须用户授权 只能更新发货前子订单的销售属性 只能更新价格相同的销售属性。对于拍下减库存的交易会同步更新销售属性的库存量。对于旺店的交易&#xff0c;要使用商品扩展信息中的SKU价格来比较。 必须使用sku_id或sku_props中的一个参数来更新&a…...

编程日记 2023/2/23 17:32:32

算法实战应用案例精讲-【图像处理】使用scikit-image做图像处理（最终篇）（附python代码实现）

目录 高级滤波 autolevel bottomhat 与 tophat enhance_contrast entropy equalize gradient 其它滤波器...

编程日记 2023/2/23 17:31:28

数据结构与算法（四）：树结构

前面讲到的顺序表、栈和队列都是一对一的线性结构&#xff0c;这节讲一对多的线性结构——树。「一对多」就是指一个元素只能有一个前驱&#xff0c;但可以有多个后继。 一、基本概念 树&#xff08;tree&#xff09;是n&#xff08;n>0&#xff09;个结点的有穷集。n0时称…...

编程日记 2023/2/23 17:30:20

taobao.trade.shippingaddress.update( 更改交易的收货地址 )

&#xffe5;开放平台免费API必须用户授权 只能更新一笔交易里面的买家收货地址 只能更新发货前&#xff08;即买家已付款&#xff0c;等待卖家发货状态&#xff09;的交易的买家收货地址 更新后的发货地址可以通过taobao.trade.fullinfo.get查到 参数中所说的字节为GBK编码的&…...

编程日记 2023/2/23 17:29:10

VS Code安装及(C/C++)环境配置(Windows系统)

参考资料2份&#xff1a; 从零开始的vscode安装及环境配置教程(C/C)(Windows系统)_光中影zone的博客-CSDN博客_vscode运行配置https://blog.csdn.net/qq_45807140/article/details/112862592 VSCode配置C/C环境 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/87864677 五…...

编程日记 2023/2/23 17:28:04

【Spring Cloud Alibaba】006-OpenFeign

【Spring Cloud Alibaba】006-OpenFeign 文章目录【Spring Cloud Alibaba】006-OpenFeign一、概述1、Java 项目实现接口调用的方法HttpclientOkhttpHttpURLConnectionRestTemplate WebClient2、Feign 概述二、Spring Cloud Alibaba 快速整合 OpenFeign1、添加依赖2、启动类加注…...

编程日记 2023/2/23 17:26:56

挚文集团短期内不适合投资，长期内看好

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 挚文集团&#xff08;MOMO&#xff09;在新闻稿中称自己是“中国在线社交和娱乐领域的领军企业”。 该公司旗下的陌陌是中国“陌生人社交网络”移动应用类别的领导者&#xff0c;并在2022年9月拥有超过1亿的月活跃用户。探…...

编程日记 2023/2/23 17:25:52

嵌入式Linux网络状态检测方案与优化实践

1. 嵌入式设备网络状态检测实战指南 在嵌入式Linux开发中&#xff0c;网络连接状态的实时监测是个常见但容易被忽视的需求。想象一下&#xff0c;你正在开发一个智能家居网关&#xff0c;突然Wi-Fi断了&#xff0c;但设备还在傻乎乎地发送数据&#xff1b;或者工业现场的设备&a…...

编程新知 2026/4/7 3:24:55

C语言内存管理常见错误与防御性编程技巧

1. 指针未初始化引发的段错误1.1 结构体成员指针未初始化在C语言中&#xff0c;结构体内部的指针成员并不会自动分配内存。很多初学者会犯这样的错误&#xff1a;struct student {char *name;int score; }stu;int main() {strcpy(stu.name, "Jimy");stu.score 99;re…...

编程新知 2026/4/7 3:18:44

公司网站SEO优化需要定期优化调整吗

公司网站SEO优化需要定期优化调整吗&#xff1f; 在当今数字化时代&#xff0c;公司网站的SEO优化&#xff08;搜索引擎优化&#xff09;不仅是提升网站曝光率的关键&#xff0c;更是增加客户流量和转化率的重要手段。有许多企业在SEO优化上存在疑惑&#xff0c;尤其是关于“公…...

编程新知 2026/4/7 2:33:24

从乐高到变速箱：用一个完整案例，带你吃透SolidWorks自顶向下设计

从乐高到变速箱&#xff1a;用一个完整案例&#xff0c;带你吃透SolidWorks自顶向下设计 1. 为什么自顶向下设计是机械工程师的必修课 第一次用SolidWorks完成齿轮箱设计时&#xff0c;我犯了个典型错误——先画好所有齿轮和轴&#xff0c;最后才考虑箱体结构。结果发现轴承座位…...

编程新知 2026/4/7 2:21:21

智能开门柜自动售货机哪里生产

当你考虑引入一台智能开门柜自动售货机时&#xff0c;脑海中浮现的第一个问题往往是&#xff1a;“这东西&#xff0c;哪里生产的靠谱&#xff1f;”这背后&#xff0c;是对设备质量、技术稳定性和长期服务的深度关切。今天&#xff0c;我们就来深入剖析智能开门柜的生产格局&a…...

编程新知 2026/4/7 1:40:43

NsEmuTools：如何用一款工具解决NS模拟器90%的配置难题？

NsEmuTools&#xff1a;如何用一款工具解决NS模拟器90%的配置难题&#xff1f; 【免费下载链接】ns-emu-tools 一个用于安装/更新 NS 模拟器的工具 项目地址: https://gitcode.com/gh_mirrors/ns/ns-emu-tools 当我们谈论NS模拟器时&#xff0c;大多数玩家首先想到的是Y…...

编程新知 2026/4/6 23:16:06

League Akari：基于LCU API的模块化游戏自动化框架深度解析

League Akari&#xff1a;基于LCU API的模块化游戏自动化框架深度解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在现代竞技游戏生态中&a…...

编程新知 2026/4/6 23:01:49

PCK文件解析与资源提取全指南：从基础到高级的游戏资源逆向工程实践

PCK文件解析与资源提取全指南&#xff1a;从基础到高级的游戏资源逆向工程实践 【免费下载链接】godot-unpacker godot .pck unpacker 项目地址: https://gitcode.com/gh_mirrors/go/godot-unpacker 在游戏开发与学习过程中&#xff0c;我们经常需要分析游戏资源文件以理…...

编程新知 2026/4/6 22:47:33

考虑需求响应和碳交易的综合能源系统日前优化调度模型 关键词：柔性负荷 需求响应 综合能源系统 ...

考虑需求响应和碳交易的综合能源系统日前优化调度模型 关键词&#xff1a;柔性负荷 需求响应 综合能源系统 参考&#xff1a;私我 仿真平台&#xff1a;MATLAB yalmipcplex 主要内容&#xff1a;在冷热电综合能源系统的基础上&#xff0c;创新性的对用户侧资源进行了细致的划…...

编程新知 2026/4/6 22:13:07

5步解锁VMware的macOS支持：Unlocker工具全面解析与实践指南

5步解锁VMware的macOS支持&#xff1a;Unlocker工具全面解析与实践指南 【免费下载链接】unlocker VMware Workstation macOS 项目地址: https://gitcode.com/gh_mirrors/unloc/unlocker 在虚拟化技术日益普及的今天&#xff0c;许多开发者和技术爱好者希望在非苹果硬件…...

编程新知 2026/4/6 21:11:43