通常情况下我们写媒体查询都是写在一个样式文件中,对于浏览器加载的时候,会解析到最后一行样式时才会渲染页面,这样就会造成页面的白屏时间过长。
但是通常情况下大量的媒体查询样式都是无用的,现在浏览器允许我们在引用样式文件的时候就可以指定媒体查询,这样没有匹配到的样式加载的优先级会被降低,从而提升页面的渲染速度。
案例
假设我们有一个页面,需要在不同的设备上显示不同的样式,我们可能会这样写:
<!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道面试题,并对每个问题作出了回答和解析。
有需要的小伙伴,可以点击文末卡片领取这份文档,无偿分享
部分文档展示:
文章篇幅有限,后面的内容就不一一展示了
有需要的小伙伴,可以点下方卡片免费领取