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

Question

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

对于桌面/平板电脑屏幕,我使用基于精灵的UL/LI列表方法.对于小型智能手机屏幕,我会有简单的链接文字.

如果我使用,显示:无; 要隐藏智能手机的基于精灵的导航,精灵图像是否仍会被加载,但是没有显示？我是否需要解析智能手机的css媒体查询中的图像参考？或者我应该将图像引用完全从初始css中删除,因为我从小到大设计(即默认css用于小屏幕,然后媒体查询随着屏幕变大而改变).

Answer 1

要回答你的问题,display: none并不能减少加载时间.它仍然加载有问题的内容/类/代码,但浏览器不显示/呈现它们.

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

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

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

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>

所以,如果一个浏览器是501px或以上的宽度,则两个desktop.js和desktop.css将加载-启用功能/不要求不属于501px下可用,并且资产.