网站建设金手指,wordpress all in one seo pack,wordpress前端工具箱,网站静态化 更新通常情况下我们写媒体查询都是写在一个样式文件中#xff0c;对于浏览器加载的时候#xff0c;会解析到最后一行样式时才会渲染页面#xff0c;这样就会造成页面的白屏时间过长。
但是通常情况下大量的媒体查询样式都是无用的#xff0c;现在浏览器允许我们在引用样式文件…通常情况下我们写媒体查询都是写在一个样式文件中对于浏览器加载的时候会解析到最后一行样式时才会渲染页面这样就会造成页面的白屏时间过长。
但是通常情况下大量的媒体查询样式都是无用的现在浏览器允许我们在引用样式文件的时候就可以指定媒体查询这样没有匹配到的样式加载的优先级会被降低从而提升页面的渲染速度。
案例
假设我们有一个页面需要在不同的设备上显示不同的样式我们可能会这样写
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcss/desktop.csslink relstylesheet hrefcss/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 relstylesheet hrefcss/desktop.css mediascreen and (min-width: 600px)
link relstylesheet hrefcss/mobile.css mediascreen and (max-width: 600px) 在我们加上这个属性之后我们再来看一下网络和性能分析
网络方面可以看到当我的设备分辨率小于600px的时候desktop.css虽然放在最前面但是优先级却是最低的而mobile.css则是最先加载的。 性能方面可以看到desktop.css一加载完毕就开始渲染页面而mobile.css则是继续加载仿佛不关心页面的渲染这样页面的白屏时间就有效的缩短了。 这次我调整了分辨率因为desktop.css加载比较快可以看我画红色竖线的地方desktop.css加载完毕之后页面就开始渲染了 同时使用这种方式加载可以省掉css文件中的媒体查询这样可以减少css文件的大小提高加载速度。
其他用法
这种方式可以支持几乎所有的媒体查询比如
link relstylesheet hrefcss/print.css mediaprint
link relstylesheet hrefcss/landscape.css mediascreen and (orientation: landscape)
link relstylesheet hrefcss/retina.css mediascreen and (-webkit-min-device-pixel-ratio: 2) 这些都可以通过media属性来实现但是需要注意的是目前并不是所有的浏览器都支持这种方式而且部分浏览器表现形式也不相同。
由于个人设备有限我这里只是在chrome上写的示例根据资料显示firefox和safari都支持这种方式但是safari并没有做任何优化。
最后
整理了一套《前端大厂面试宝典》包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法一共201道面试题并对每个问题作出了回答和解析。 有需要的小伙伴可以点击文末卡片领取这份文档无偿分享
部分文档展示
文章篇幅有限后面的内容就不一一展示了
有需要的小伙伴可以点下方卡片免费领取
