媒体查询:重写CSS规则与定义屏幕特定CSS规则

Question

我假设，就像链接标记中使用的媒体查询一样，我们在CSS文件中定义的媒体查询是根据浏览器的媒体查询规则被解析/覆盖或省略的(实际上，我知道，尽管链接标记所请求的带有不匹配媒体的CSS文件无论如何都是下载的，但它们并不是呈现阻塞浏览器)。那么，从CSSOM构建优化立场来看，是否最好将应用于所有屏幕设备的通用CSS规则与移动特定的CSS规则分开，并将移动特定规则封装在最大宽度的媒体查询中？因此，浏览器将解析更少的CSS来构建CSSOM，而不需要为平板电脑、桌面等覆盖它们。我想知道这是否会影响CSSOM性能的构建，还是它是过火了呢？

Answer 1

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

样式表中的媒体块已经被下载，我假设它们无论如何都是编译的，所以它与标记中的媒体查询并不完全相同。但是，如果一组规则只与一定的宽度相关，并且总是在更大的屏幕上占优势，那么通过将其封装在媒体查询中，告诉浏览器这一点是有意义的。它不仅涉及原始页面呈现，而且涉及对窗口或DOM的任何需要重绘的更改--浏览器需要计算的规则越少，它就越快。