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

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

news 2025/9/16 15:56:52

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

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

案例

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

<!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道面试题，并对每个问题作出了回答和解析。

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

部分文档展示：

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

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

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

案例

解决方案

其他用法

最后

相关文章：

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

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

云计算概念与技术

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

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

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

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

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

深入浅出 MySQL 索引（一）

FinClip 的 2022 与 2023

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

Shell语法基础总结

架构基本概念和架构本质

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

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

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

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

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

【Spring Cloud Alibaba】006-OpenFeign

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

网络六边形受到攻击

【kafka】Golang实现分布式Masscan任务调度系统

【力扣数据库知识手册笔记】索引

HTML 列表、表格、表单

【磁盘】每天掌握一个Linux命令 - iostat

基于数字孪生的水厂可视化平台建设：架构与实践

Rapidio门铃消息FIFO溢出机制

前端中slice和splic的区别

Java求职者面试指南：Spring、Spring Boot、Spring MVC与MyBatis技术解析

flow_controllers