少,媒体查询和性能

Question

我最近开始使用LessCSS,并且我在CSS的清晰度和可读性方面取得了相当大的成功.但是,我认为我并没有充分利用Less.

我现在正在使用Less编写我的第一个完全响应的站点,我关注性能和速度. 有一点需要注意的是,我不坚持使用"断点"方法 - 我会一直上下缩放直到它们中断,然后我编写CSS来修复它们; 这通常导致20到100个媒体查询.

我想开始使用Less来将媒体查询嵌套在我的元素中,例如下面的示例:

.class-one {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}
.class-two {
    //styles here

    @media (max-width: 768px) {
        //styles for this width
    }
}

通过我的初步测试,我发现在查看编译的CSS输出时 - 这种方法导致多个(很多!)实例@media (max-width: ___px).我已经浏览了互联网,并没有找到任何明确解释嵌套/冒泡媒体查询的性能影响的内容.

更新1:我意识到更多的CSS信息导致更大的CSS文件下载 - 但我并不担心网站加载时间作为唯一的指标.在DOM准备好之后,我对浏览器对内存和性能的处理更感兴趣.

更新2和半解决方案:我发现这篇文章讨论了CSS选择器的四个主​​要类别及其效率.我强烈推荐阅读,这有助于我理解如何最好地解决我的过度媒体查询CSS.

所以我的问题是: 在DOM准备好之后,在我编译的样式表中有这么多媒体查询会影响加载时间和性能吗？

Answer 1

它几乎不可能给你一个完全准确的答案.

在询问性能时,典型的答案是对其进行分析并查看您获得的内容.首先修复最慢的部分,然后重复.

您可以在Chrome开发者工具中分析CSS选择器:

最终,我认为与即使是稍微复杂的选择器相比,媒体查询也不会对性能产生任何影响.

您可以在此处查看有关编写高效CSS的更多信息:

https://developers.google.com/speed/docs/best-practices/rendering

此外,关于文件大小和重复的CSS,gzip 几乎完全无效,因为gzip算法最适合重复数据.