媒体查询会导致渲染性能下降吗？答案

【问题标题】：Do media queries cause a rendering performance hit?媒体查询会导致渲染性能下降吗？
【发布时间】：2014-02-19 22:52:24
【问题描述】：

在将我的主要 css 重构为模块化方法时，我使用 @media all {} 在 IDE 中包装 css 模块。这种方法使得扫描文件内容变得更加容易，因为我们现在不能使用像 less 或 sass 这样的预处理器。

我唯一担心的是所有这些媒体查询（每个 css 模块/一组连贯选择器一个）可能会在呈现站点时导致性能下降。我不关心我们的 css 文件的文件大小，因为这是一个小型模块化 css 框架和正确压缩的小问题。

如果使用频繁，像@media all {} 这样的媒体查询是否会对性能（台式机和移动/其他）设备产生影响？

【问题讨论】：

简短回答，一点也不。
另见：stackoverflow.com/questions/29742228/…

标签： css performance media-queries oocss

【解决方案1】：

答案是否定的……是的。拥有一堆媒体查询不会使网站更难呈现。但是更多的代码行会使文件更大，并且在技术上需要更长的时间来加载。尽管如此，这对性能的影响并不大。

但是在调整浏览器大小时，重新计算一堆不同的 mq 设置会对浏览器造成负担。在这里阅读更多：Web Performance: One or thousands of Media Queries?

但是...如果您想在没有预处理器的情况下主动解决这个问题，只需使用Pleeease。 Pleeease 为您提供类似于香草 css 的预处理器能力。并且它提供了一个名为 mqpacker 的 PostProcessor 函数。它将在您的样式表中找到所有类似的媒体查询，并将它们合并到相关的媒体查询中。但同样，如果您在服务器上压缩样式表，则无需担心。

祝你好运！保持真棒！

【讨论】：