8

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

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

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

4

3 回答 3

12

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

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

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

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

  2. 仅当媒体查询状态更改时才加载所需的资产/类/脚本。这样做的好处是，体验将与所讨论的设备类型更相关：

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

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

使用enquire.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>

因此，如果浏览器的宽度为 501 像素或以上，则两者desktop.js都会desktop.css加载 - 启用在 501 像素下不可用且不需要的功能/资产。

于 2013-04-19T14:08:56.817 回答
1

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

于 2013-04-19T12:58:31.887 回答
0

我搜索了同样的问题，不能同意 nickhar 的话：

display: none 不会减少加载时间

我进行了速度测试，display: noneDOM 加载速度提高了 2 倍。

但是 +1 提供有用的建议。

于 2019-07-10T18:11:47.270 回答