Eine kurze Diskussion über Front-End-Netzwerk, JavaScript-Optimierung und Entwicklungstipps

1. Netzwerkoptimierung

YSlow hat 23 Regeln. Diese Dutzenden von Regeln zielen hauptsächlich darauf ab, unnötige Netzwerkverzögerungen zu vermeiden oder zu reduzieren und die zu übertragenden Daten auf ein Minimum zu komprimieren.

1) CSS, JavaScript und Bilder zusammenführen und komprimieren sowie statische Ressourcen auf CDN zwischenspeichern

Mithilfe des Build-Tools Gulp können Sie das Zusammenführen und Komprimieren während der Entwicklung gleichzeitig durchführen.

Der Grund für das Zusammenführen und Komprimieren liegt darin, dass HTTP 1.x nicht zulässt, dass mehrere Antwortdaten einer Verbindung verschachtelt ankommen (Multiplexing). Daher muss eine Antwort vollständig zurückgegeben werden, bevor mit der Übertragung der nächsten Antwort begonnen werden kann.

Dies bedeutet, dass der Server zuerst die HTML-Antwort sendet und dann das CSS liefert, auch wenn der Client zwei Anfragen gleichzeitig sendet und die CSS-Ressource zuerst bereit ist.

Der Zweck der Verwendung von CDN besteht darin, Benutzern beim Zugriff die Verwendung der nächstgelegenen Ressourcen zu ermöglichen und so die Roundtrip-Übertragungszeit zu verkürzen.

HTTP2.0 verbessert HTTP1.x in vielen Aspekten.

2) Platzieren Sie CSS oben und JavaScript unten

CSS kann parallel heruntergeladen werden, während JavaScript nach dem Laden blockiert wird.

Es gibt jedoch immer Ausnahmen. Wenn Sie das Inline-Skript nach dem Stylesheet einfügen, verzögert sich der Download der Ressource erheblich (das Ergebnis ist, dass nachfolgende Ressourcen erst heruntergeladen werden können, nachdem das Stylesheet heruntergeladen und das Inline-Skript ausgeführt wurde).

Dies liegt daran, dass Inline-Skripts Code enthalten können, der von Stilen im Stylesheet abhängt, z. B. document.getElementsByClassName().

 <Kopf>
  <link rel="stylesheet" href="css/all-normal.css" type="text/css" />
</Kopf>
<Text>
  <div id="Inhalt"></div>
  <Skript>
    var Inhalt = '';
    für (i = 1; i < 1000000; i++)
        Inhalt += 'Auf Seite schreiben';
    document.getElementById('content').innerHTML = Inhalt;
  </Skript>
  <img src="images/ui.png" />
</body>

Sehen wir es uns mit den Tools von Chrome an:

3) Optimieren Sie die DNS-Auflösung und reduzieren Sie Weiterleitungen

Wenn Sie eine „Göttinnenauswahl-Aktivität“ durchführen, müssen Sie in WeChat auf die OpenID des Benutzers zugreifen. WeChat muss mehrere Schritte durchlaufen, um die grundlegenden Informationen des Benutzers abzurufen:

Holen Sie sich zuerst den Code, dann die OpenID über den Code und springen Sie schließlich, um auf die statische Seite zuzugreifen.

Da das Unternehmen sein Geschäft auf mehrere Gruppen aufgeteilt hat, erfordern die drei kurzen Schritte tatsächlich die Zusammenarbeit dreier Gruppen und die Umleitung mehrerer Domänennamen.

Die folgende Abbildung ist ein Wasserfalldiagramm vor der Optimierung, aber es ist nicht der schlimmste Fall. Manchmal dauert es mehr als 10 Sekunden, um auf eine statische Seite zuzugreifen, was völlig inakzeptabel ist. In der folgenden Abbildung werden 4 Domänennamen umgeleitet:

Anstatt zum Indexdomänennamen zu springen, springt es direkt zum WeChat-Operationsdomänennamen, wodurch der Sprung um einen Domänennamen reduziert wird. Die Codes jeder Gruppe wurden weiter optimiert, aber der Effekt war immer noch nicht ideal und es war nur ein paar Sekunden schneller.

Schließlich stellte ich fest, dass die DNS-Auflösung bei der Interaktion mit dem WeChat-Server zu viel Zeit in Anspruch nahm! Als letzten Ausweg fügen Sie einen Datensatz im Host des Servers hinzu und verweisen Sie per IP direkt darauf.

Das finale Optimierungsergebnis zeigt die folgende Abbildung. Diese lässt sich zwar nicht in Sekundenschnelle öffnen, ist aber immerhin akzeptabel:

2. JavaScript-Optimierung

1) Bildvorladen

Bei der Durchführung eines „Akina Mountain-Events“ wurde das Vorladen von Bildern verwendet. Diese Kampagne umfasst über 120 Bilder.

Der Vorgang ist ganz einfach: Beantworten Sie einfach die Fragen, kommentieren Sie die Ergebnisse und teilen Sie sie dann.

Da es keine gute Idee wäre, so viele Bilder auf einmal zu laden, haben wir uns letztendlich dazu entschlossen, beim Laden der Seite zuerst einige allgemeine Bilder zu laden.

Beim Beantworten von Fragen lädt die aktuelle Seite die Bilder der Folgeseiten vor, um zu verhindern, dass die Bilder beim Aufruf der Seite nicht angezeigt werden. Auch werden die Bilder passend zusammengeführt.

Geben Sie die Website-Adresse in den Test von gtmetrix.com ein. Das Folgende ist das endgültige Wasserfalldiagramm. Sie können feststellen, dass sich die Bilder hinter anderen statischen Ressourcen befinden, sodass die Seite den Benutzern so schnell wie möglich angezeigt werden kann:

Die Optimierung ist noch lange nicht abgeschlossen. Nach der Simulation von gutem 2G, gutem 3G und 4G in Chrome sind die Ergebnisse nicht optimal.

gutes 2G:

gutes 3G:

4G:

2) Äste reduzieren

Beim Schreiben von Geschäftslogik werden häufig logische Urteile wie if else und switch verwendet. Wenn jedes Mal so viele Urteile getroffen werden, kann dies leicht die Leistung beeinträchtigen.

Es gibt also Möglichkeiten, zu viele Urteile zu vermeiden.

1. Fauler Modus

Das ist mir beim Lesen von „JavaScript Design Patterns“ aufgefallen.

Reduzieren Sie wiederholte Verzweigungsbeurteilungen bei jeder Codeausführung und schützen Sie die Verzweigungsbeurteilungen im ursprünglichen Objekt, indem Sie das Objekt neu definieren.

Es gibt zwei Arten von Lazy-Modus: Der erste besteht darin, die Objektmethode unmittelbar nach dem Laden der Datei neu zu definieren, und der zweite besteht darin, das Methodenobjekt bei der ersten Verwendung neu zu definieren.

Das Unternehmen wollte einer Drittanbieter-App eine Seite zur Verfügung stellen, stellte jedoch letztendlich fest, dass die Drittanbieter-App den localStorage-Cache nicht nutzen konnte und daher eine kompatible Methode verwenden musste.

Um jedoch zu vermeiden, dass bei jeder Referenzierung einer Methode eine Beurteilung vorgenommen werden muss, definieren Sie sie unmittelbar nach dem Laden neu:

 var getFn = function() {
  wenn (sore.aktiviert)
    gib sore.get zurück;
  Cookie.get zurückgeben;
}();
var setFn = function() {
  wenn (sore.aktiviert)
    gebe sore.set zurück;
  Cookie.set zurückgeben;
}();

2. Mapping-Beziehung herstellen

Auf der Seite werden häufig Eingabeaufforderungen in Form von Popup-Fenstern benötigt, deshalb habe ich später selbst eines erstellt. Es gibt jedoch viele Arten von Popup-Fenstern.

Wenn Sie den einfachen Factory-Modus zum Erstellen verwenden, müssen Sie zwangsläufig die Switch-Branch-Beurteilung verwenden. Anschließend können Sie direkt verschiedene Schlüssel zuweisen und diese auch nur einmal zwischenspeichern und initialisieren.

 /**
 * Popup-Box-Singleton-Modus */
var Fabriken = {};
var DialogFactory = Funktion(Typ, Optionen) {
  wenn (Fabriken[Typ])
    Fabriken zurückgeben [Typ];
  Rückgabefabriken [Typ] = neuer iDialog (Optionen);
};
/**
 * Eingabeaufforderungsfeld*/
var Alert = Funktion(Inhalt, Optionen) {
  var d = DialogFactory('alert', Optionen);
  //Andere Logik ausgelassen return d;
};
/**
 * Bestätigungsfeld */
var Confirm = Funktion(Inhalt, Optionen) {
  var d = DialogFactory('bestätigen', Optionen);
  //Andere Logik ausgelassen return d;
};

3) Asynchrones Laden von Drittanbietercode

Codes von Drittanbietern, wie etwa Baidu Statistics, WeChat SDK usw., können nach dem Laden der Geschäftsressourcen hinzugefügt werden.

 /**
 * Baidu-Statistikeinstellungen */
util.baidu = Funktion(Schlüssel) {
  global._hmt = global._hmt || [];
  (Funktion() {
    var hm = document.createElement("Skript");
    hm.src = "//hm.baidu.com/hm.js?" + Schlüssel;
    var s = document.getElementsByTagName("Skript")[0];
    s.parentNode.insertBefore(hm, s);
  })();
};

4) Cookies und localStorage Cache

Durch Caching können Sie die Kommunikation mit dem Server reduzieren und Vorgänge lokal ausführen.

Das Unternehmen ist auf die Kontrolle von Verkehrsverstößen spezialisiert. Nach dem lokalen Hinzufügen eines Fahrzeugs muss beim erneuten Aufrufen der Seite die Möglichkeit bestehen, das zuvor hinzugefügte Fahrzeug direkt auszuwählen.

Am besten ist es, die Daten nach dem Hinzufügen lokal zwischenzuspeichern und bei der nächsten Eingabe direkt abzurufen.

Ich würde lieber localStorage verwenden. Die folgende Tabelle ist ein Vergleich:

Für den lokalen Speicher sieht die bisherige Historie ungefähr so ​​aus:

In Bezug auf die Browserkompatibilität wird localStorage auch von IE8 unterstützt.

5) Eventdelegation

Durch die Verwendung der Ereignisdelegierung können Sie vermeiden, jedem einzelnen Knoten Ereignislistener hinzuzufügen.

Ereignis-Listener werden ihren übergeordneten Elementen hinzugefügt und ihre Ausführung wird durch Event-Bubbling ausgelöst.

Während der Entwicklung ist es üblich, Elemente dynamisch hinzuzufügen.

Wenn Sie das Ereignis jedes Mal neu binden, kommt es zu vielen redundanten Vorgängen. Wenn Sie es jedoch an das übergeordnete Element dieses Elements binden, müssen Sie es nur einmal binden.

 Dokument.getElementById('ul').onclick = Funktion(e) {
  var e = e || Fenster.Ereignis,
    tar = e.target || e.srcElement;
  wenn (tar.nodeName.toLowerCase() == 'li') {
    tar.style.background = "schwarz";
  }
}

6) Drosselung und Entprellung

Drosselung: Legt einen Ausführungszyklus fest. Wenn der Zeitpunkt des Aufrufs der Aktion größer oder gleich dem Ausführungszyklus ist, wird die Aktion ausgeführt und anschließend der nächste neue Zyklus gestartet.

Beispielsweise das Mousemove-Ereignis, die Größenänderungs- und Bildlaufereignisse des Fensterobjekts.

Debounce: Die Aktion wird n Millisekunden nach dem Aufruf ausgeführt. Wird die Aktion innerhalb von n Millisekunden erneut aufgerufen, wird die Ausführungszeit neu berechnet.

Beispielsweise Texteingabe: Keydown-Ereignis, Keyup-Ereignis, Autovervollständigung usw.

Der größte Unterschied zwischen Drosselung und Entprellung besteht in der Art und Weise, wie die endgültige Ausführungszeit berechnet wird. In der bekannten Open-Source-Toolbibliothek Underscore gibt es zwei integrierte Methoden.

Bei der Arbeit an einem System innerhalb des Unternehmens hofft der Benutzer, beim Scrollen der Tabelle nach links oder rechts die erste Spalte ganz links fixieren zu können, um eine einfachere Anzeige zu ermöglichen.

Um den Vorgang reibungsloser zu gestalten, habe ich hier eine Drosselung verwendet. Bei einigen Browsern kommt es zu Verzögerungen, daher muss die Zykluszeit erhöht werden.

3. Tipps

1) Drucken Sie Variablen im Telefon

Beim Verschieben von Seiten müssen Sie häufig Felder debuggen, können dafür aber console.log nicht verwenden. Wenn Sie eine Warnung erhalten, können Sie den Inhalt nicht sehen, wenn Sie das Objekt berühren.

Ich kann nur eine kleine Methode zum Ausdrucken schreiben, JSON.stringify, mit der die Funktion einfach implementiert werden kann.

 var print = Funktion(Objekt, Leerzeichen) {
  Leerzeichen = Leerzeichen || 4;
  var html = JSON.stringify(obj, null, Leerzeichen);
  html = html.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp');
  var pre = document.createElement('pre');
  var div = document.createElement('code');
  pre.style.cssText = 'Rahmen: 1px durchgehend #000; Polsterung: 10px; Hintergrund: #FFF; Rand unten: 20px;';
  div.innerHTML = html;
  vor.anhängenKind(div);
  var body = document.querySelector('body');
  body.insertBefore(pre, body.children[0]);
};

drucken({a:1, b:'Demo', c:{Text:'Inhalt'}});

2) JSON-Handle des Chrome-Plugins

Viele der vom Server zurückgegebenen Daten liegen im JSON-Format vor. Normalerweise erhalten Sie nach dem Schreiben eine Schnittstelle und einige Demoparameter.

Beim Öffnen in einem Browser ist es eine Zeichenfolge, aber wenn Sie es anderen zeigen möchten, müssen Sie es formatieren. Damit es anderen angezeigt wird, wird dieses Plug-In verwendet.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.