display none verringert es die Ladezeit, oder sind die Elemente noch geladen, aber nicht angezeigt

Deine Frage zu beantworten: display: none hat nicht reduzieren Ladezeit. Noch lädt der Inhalt/Klassen/code in Frage, aber der browser nicht anzeigen/wiedergeben.

Es klingt wie Sie sind mit einem mobile-first-Ansatz, so könnte man entweder:

1. Laden alle assets/classes/scripts unabhängig von der mobile - /tablet - /desktop-Klasse, die Sie anstreben, und passen Sie die layouts, die mit Ihrem media queries.

   • Dies bedeutet, dass alle Inhalte (sprites et al) werden standardmäßig geladen, auch wenn Sie nicht verwendet werden, die von bestimmten Geräte-Arten.
   • Inhalt/layout wird entweder angezeigt oder ausgeblendet werden, basierend auf media query-Regeln.

2. Laden Sie die gewünschten assets/classes/scripts als und nur, wenn die media-query-Staaten ändern. Der Vorteil hierbei ist, dass die Erfahrung wäre relativ das die device-type in Frage:

   • Mehr reaktiv/zeitnahe Erfahrung und laden von Funktionen
   • Potenziell weniger Bandbreite
   • Ein enger design-Erfahrung für jeden Gerät-Typ
   • Einige assets (Bilder/Hintergründe etc.) können selektiv geladen

Wenn Sie betrachten die option 2, dann gibt es eine Vielzahl von open-source-asset-loader, die es ermöglichen, Sie zu laden, CSS-und Javascript-code basiert auf der media query, Status-änderungen. [Anmerkung: Mehr Aufwand/design erforderlich wäre, um diese Technik zu nutzen].

Ein Vereinfachtes Beispiel dieses mit enquire.js (es gibt auch andere asset loader) würde ermöglichen es Ihnen, Folgendes zu tun:

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

So, wenn ein browser ist 501px oder oben in der Breite, dann die beiden desktop.js und desktop.css laden würde - aktivieren Funktionen/Vermögenswerte, die nicht unter 501px und dass sind nicht erforderlich.

Suchte ich für die gleiche Frage und kann nicht Stimmen mit nickhar Worten:

display: none verringert nicht die Ladezeit der

Machte ich speed-tests und mit display: none DOM-laden 2-mal schneller.

Aber +1 für nützliche Hinweise.