无显示是否会缩短加载时间，或者项目是否仍在加载但不显示

Question

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

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

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

Answer 1

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

听起来你使用的是移动优先的方法，所以你可以选择：

1. 加载所有资产/类/脚本，而不考虑您的目标移动/平板电脑/台式机类，并使用媒体查询调整布局。

- This means all content (sprites et al) will be loaded by default even if they aren't used by certain device-types.
- Content/layout will either be shown or hidden based upon media query rules. 

​

- More reactive/timely experience and loading of functionality
- Potentially less bandwidth
- A more tightly design experience for each device-type 
- Some assets (images/backgrounds etc) can be selectively loaded

​

如果您考虑选择2，那么有各种开源资产加载器，它们允许您根据媒体查询状态的变化加载CSS和Javascript代码。注意:使用此技术需要更多的工作/设计。

<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或以上，那么desktop.js和desktop.css都会加载那些在501px以下不可用且不是必需的特性/资源。

Answer 2

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

Answer 3

我搜索了同样的问题，但不同意尼查尔的话：

显示:无不会减少加载时间

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

但对于有用的建议，请加1。