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

news2024/11/16 22:38:03

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

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

案例

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

<!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上写的示例,根据资料显示,firefoxsafari都支持这种方式,但是safari并没有做任何优化。

最后

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

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

部分文档展示:



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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/366566.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SpringBoot优雅地处理全局异常,返回前端

笔者这边提供了两种处理全局异常的方式。这两种方式各有千秋&#xff0c;都很优雅。至于伙伴们想用哪种方式&#xff0c;那就仁者见仁&#xff0c;智者见智了。0、公共部分在介绍异常处理方式前&#xff0c;先定义一些公共的类。这些类在两种处理方式中都会用到。【自定义业务异…

jupyter的安装步骤

1.安装python文件 首先去官网python去下载python的安装包&#xff0c;点击donwload,选择合适的系统。这里我是windown系统&#xff0c;点击进去&#xff0c;如图找到有installer的去下载。不建议下载最新版本的&#xff0c;会有兼容问题。 2.安装python 点击第二个选项是自己配…

深度学习如何训练出好的模型

深度学习在近年来得到了广泛的应用&#xff0c;从图像识别、语音识别到自然语言处理等领域都有了卓越的表现。但是&#xff0c;要训练出一个高效准确的深度学习模型并不容易。不仅需要有高质量的数据、合适的模型和足够的计算资源&#xff0c;还需要根据任务和数据的特点进行合…

【2023/图对比/增强】MA-GCL: Model Augmentation Tricks for Graph Contrastive Learning

如果觉得我的分享有一定帮助&#xff0c;欢迎关注我的微信公众号 “码农的科研笔记”&#xff0c;了解更多我的算法和代码学习总结记录。或者点击链接扫码关注【2023/图对比/增强】MA-GCL: Model Augmentation Tricks for Graph Contrastive Learning 【2023/图对比/增强】MA-…

备份策略从“3-2-1”到“4-3-2-1”

在数据存储备份领域&#xff0c;说起“3-2-1”备份策略真是无人不知、如雷贯耳&#xff01;笔者也经常把“3-2-1”备份策略挂在嘴边&#xff0c;那简直就是确保数据安全的圭臬&#xff01;但是&#xff0c;最近有一位读者问我&#xff1a;“3-2-1”备份策略的出处在哪里&#x…

MySQL - 多表查询

目录1. 多表查询示例2. 多表查询分类2.1 等/非等值连接2.1.1 等值连接2.1.2非等值连接2.2 自然/非自然连接2.3 内/外连接2.3.1 内连接2.3.2 外连接3.UNION的使用3.1 合并查询结果3.1.1 UNION操作符3.1.2 UNION ALL操作符4. 7种JOIN操作多表查询&#xff0c;也称为关联查询&…

LocalDateTime使用

开发中常常需要用到时间&#xff0c;随着jdk的发展&#xff0c;对于时间的操作已经摒弃了之前的Date等方法&#xff0c;而是采用了LocalDateTime方法&#xff0c;因为LocalDateTime是线程安全的。 下面我们来介绍一下LocalDateTime的使用。 时间转换 将字符串转换为时间格式…

五分钟搞懂POM设计模式

今天&#xff0c;我们来聊聊Web UI自动化测试中的POM设计模式。 为什么要用POM设计模式 前期&#xff0c;我们学会了使用PythonSelenium编写Web UI自动化测试线性脚本 线性脚本&#xff08;以快递100网站登录举栗&#xff09;&#xff1a; import timefrom selenium import …

R统计绘图 | 物种组成堆叠柱形图(绝对/相对丰度)

一、数据准备 数据使用的不同处理土壤样品的微生物组成数据&#xff0c;包含物种丰度&#xff0c;分类单元和样本分组数据。此数据为虚构&#xff0c;可用于练习&#xff0c;请不要作他用。 # 1.1 设置工作路径 #knitr::opts_knit$set(root.dir"D:\\EnvStat\\PCA")#…

[python入门(51)] - python时间日期格式time和datetime

目录 ❤ 预备知识 ❤ UTC time Coordinated Universal Time ❤ epoch time ❤ timestamp&#xff08;时间戳&#xff09; ❤ stamptime时间戳 ❤ struct_time时间元组 ❤ format time 格式化时间 ❤ time模块​编辑 ❤ 获取当前时间的方法 ❤ 当传入默认参…

阿里云ECS TOP性能提升超20%!KeenTune助力倚天+Alinux3达成开机即用的全栈性能调优 | 龙蜥技术

文/KeenTune SIG01阿里云 ECS 上售卖页新增“应用加速”功能2023年1月12日 阿里云 ECS 的售卖页有了一些新的变化&#xff0c;在用户选择倚天 Alinux3 新建实例时&#xff0c;多了一个新的选项“应用加速”。这个功能是 阿里云 ECS 基于 KeenTune 提供典型云场景的开机即用的全…

翻转链表k个元素——递归

题目描述25. K 个一组翻转链表难度困难1920收藏分享切换为英文接收动态反馈给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那…

【Python入门第十六天】Python If ... Else

Python 条件和 If 语句 Python 支持来自数学的常用逻辑条件&#xff1a; 等于&#xff1a;a b不等于&#xff1a;a ! b小于&#xff1a;a < b小于等于&#xff1a;a < b大于&#xff1a;a > b大于等于&#xff1a;a > b 这些条件能够以多种方式使用&#xff0c…

再析jvm

前言 希望自己每一次学习都有不同的理解 文章目录前言1. jvm的组成取消永久代使用元空间原因2. 运行时数据区3. 堆栈区别队列和栈&#xff0c;队列先进先出&#xff0c;栈先进后出从栈顶弹出4. GC、内存溢出、垃圾回收4.1 如何确定引用是否会被回收4.1.1 Java中的引用类型4.1.…

OpenStack手动分布式部署Glance【Queens版】

目录 Glance简介 1、登录数据库配置&#xff08;在controller执行&#xff09; 1.1登录数据库 1.2数据库里创建glance 1.3授权对glance数据库的正确访问 1.4退出数据库 1.5创建glance用户密码为000000 1.6增加admin角色 1.7创建glance服务 1.8创建镜像服务API端点 2、安装gla…

LeetCodeHOT100热题02

写在前面 主要是题目太多&#xff0c;所以和前面的分开来记录。有很多思路的图都来源于力扣的题解&#xff0c;如侵权会及时删除。不过代码都是个人实现的&#xff0c;所以有一些值得记录的理解。之前的算法系列参看&#xff1a; 剑指offer算法题01剑指offer算法题02 七、动…

SQL零基础入门学习(八)

SQL零基础入门学习&#xff08;七&#xff09; SQL 连接(JOIN) SQL join 用于把来自两个或多个表的行结合起来。 下图展示了 LEFT JOIN、RIGHT JOIN、INNER JOIN、OUTER JOIN 相关的 7 种用法。 SQL JOIN SQL JOIN 子句用于把来自两个或多个表的行结合起来&#xff0c;基…

TensorBoard自定义修改单条及多条曲线颜色

在深度学习可视化训练过程中&#xff0c;曲线颜色是随机的&#xff0c;想要将好看的曲线颜色图放到论文中&#xff0c;就得自定义曲线颜色&#xff0c;具体方法见下文。 目录一、下载svg文件二、修改svg文件三、修改后曲线颜色对比四、总结一、下载svg文件 在TensorBoard界面中…

webman 连接 oracle

composer require topthink/think-oraclev2.1 配置文件 thinkorm.php return [ default > oracle, connections > [ oracle > [ // 数据库类型 type > oracle, // 服务器地址 hostname > 192…

多语言解决方案

文章目录背景整体方案多语言管理端客户端流水线其他背景 多语言是一个比较麻烦的事情&#xff0c;特别是当 App 比较大的时候&#xff0c;还会涉及到多个部门的开发以及翻译人员&#xff0c;这中间可能会存在比较大的沟通成本&#xff0c;而且还可能会阻塞开发的进度。以下是我…