css - display none 是否减少了加载时间，或者元素是否仍在加载但未显示

Question

我正在使用媒体查询构建响应式网站。我需要为非常小的屏幕切换到不同的导航方法。

对于台式机/平板电脑屏幕，我使用基于 sprite 的 UL/LI 列表方法。对于小型智能手机屏幕，我将使用简单的链接文本。

如果我使用，显示:无；为智能手机隐藏基于 sprite 的导航，是否仍会加载 sprite 图像，但只是不显示？我是否需要在智能手机的 css 媒体查询中解析图像引用？或者我是否应该将图像引用完全从初始 css 中删除，因为我正在设计从小到大的(即默认 css 适用于小屏幕，然后媒体查询会随着屏幕变大而改变)。

Answer 1

要回答您的问题，display: none 不会减少加载时间。它仍然会加载有问题的内容/类/代码，但浏览器不会显示/呈现它们。

听起来您正在使用移动设备优先的方法，因此您可以:

1. 加载所有 Assets /类/脚本，无论您的目标是移动设备/平板电脑/桌面设备类，并使用您的媒体查询调整布局。

   • 这意味着默认情况下将加载所有内容( Sprite 等)，即使它们未被某些设备类型使用。
   • 内容/布局将根据媒体查询规则显示或隐藏。
     
     

2. 加载所需的 Assets /类/脚本当且仅当媒体查询状态改变时。这样做的好处是体验会与所讨论的设备类型相关:

   • 更具 react 性/及时性的体验和功能加载
   • 可能减少带宽
   • 针对每种设备类型的更紧密的设计体验
   • 可以有选择地加载一些 Assets (图像/背景等)

如果您考虑查看选项 2，那么有多种开源 Assets 加载器允许您根据媒体查询状态变化加载 CSS 和 Javascript 代码。 [注意:使用此技术需要更多的努力/设计]。

使用 enquire.js 的简化示例(还有其他 Assets 加载器)将允许您执行以下操作:

<script type="text/javascript">

  // MQ Mobile
  enquire.register("screen and (max-width: 500px)", {
      match : function() {
          // Load a mobile JS file
          loadJS('mobile.js');
          // Load a mobile CSS file
          loadCSS('mobile.css');
      }
  }).listen();

  // MQ Desktop
  enquire.register("screen and (min-width: 501px)", {
      match : function() {
          // Load a desktop JS file
          loadJS('desktop.js');
          // Load a desktop CSS file
          loadCSS('desktop.css');

      }
  }).listen();

</script>

因此，如果浏览器的宽度为 501 像素或以上，那么 desktop.js 和 desktop.css 都会加载 - 启用不可用的功能/ Assets 低于 501 像素，这不是必需的。