是否减少加载时间，或者项目仍然加载但未显示

Question

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

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

如果我使用，Display: none;为智能手机隐藏基于Sprite的导航，Sprite图像是否仍然会被加载，只是不显示?我需要在智能手机的css媒体查询中解析图像引用吗?或者我应该把图像参考从初始css中完全去掉，因为我正在设计从小到大(即默认的css是针对小屏幕的，然后媒体查询随着屏幕变大而改变事情)。

Answer 1

回答你的问题，display: none不不减少加载时间。它仍然会加载相关的内容/类/代码，但浏览器不会显示/渲染它们。

听起来你在使用移动优先的方法，所以你可以:

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

   这意味着所有的内容(精灵等)将默认加载，即使它们不被某些设备类型使用。
2. 根据媒体查询规则显示或隐藏内容/布局。
   
   

3. 加载所需的资产/类/脚本当且仅当媒体查询状态发生变化时。这样做的好处是，体验将与所讨论的设备类型更加相关:

   • 更具响应性/及时性的体验和功能加载
   • 可能减少带宽
   • 为每种设备类型提供更紧密的设计体验
   • 一些资源(图像/背景等)可以选择性加载

如果你考虑选项2，那么有各种各样的开源资产加载器允许你加载基于媒体查询状态变化的CSS和Javascript代码。[注意:使用这种技术需要更多的努力/设计]。

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

<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>

所以，如果浏览器的宽度是501px或501px以上，那么desktop.js和desktop.css都将加载启用501px以下不可用的功能/资源。

Answer 2

将加载所有项，但不显示给最终用户。

Answer 3

我搜索了同样的问题，无法同意nickhar的话:

display: none不减少加载时间

我做了速度测试，display: none DOM加载速度快了2倍。