css - 媒体查询：覆盖 CSS 规则与定义特定于屏幕的 CSS 规则

Question

我假设，就像链接标签中使用的媒体查询一样，我们在 CSS 文件中定义的媒体查询被浏览器根据其媒体查询规则解析/覆盖或省略（实际上我知道，虽然 CSS链接标签请求的带有不匹配媒体的文件无论如何都会被下载，它们不会阻塞浏览器）。那么，从 CSSOM 构建优化的角度来看，将适用于所有屏幕设备的通用 CSS 规则与特定于移动设备的 CSS 规则分开并将特定于移动设备的规则封装在最大宽度媒体查询中不是更好吗？这样浏览器将解析更少的 CSS 来构建 CSSOM，而无需为平板电脑、台式机等覆盖它们。我想知道这是否会影响 CSSOM 性能的构建还是只是矫枉过正？

Answer 1

<link>具有不匹配媒体查询的标签以低优先级下载，因此它们不会阻止页面呈现，但仍会被下载以便在媒体属性发生变化时可用（例如通过旋转智能手机或缩小桌面浏览器）。为不同的媒体类型使用单独的样式表是有好处的，但创建多个 HTTP 请求也有一个缺点。

样式表中的媒体块已经下载，我会假设它们无论如何都会被编译，所以它与标签中的媒体查询并不完全相同。但是，如果某组规则仅与某个宽度相关，并且总是在更宽的屏幕中被覆盖，那么通过将其封装在媒体查询中来告诉浏览器是有意义的。这不仅仅是关于原始页面的渲染，还包括对窗口或需要重绘的 DOM 的任何更改——浏览器需要评估的规则越少，它就会越快。