Wondershare EdrawMind
Mindmap-Galerie Front-End-Full-Link-Leistungsoptimierung und Optimierung des FE-Entwicklungsprozesses
- 1
Front-End-Full-Link-Leistungsoptimierung und Optimierung des FE-Entwicklungsprozesses
Front-End-Full-Link-Leistungsoptimierung: Optimierung des F
Bearbeitet um 2021-01-01 19:46:28
Front-End-Full-Link-Leistungsoptimierung und Optimierung des FE-Entwicklungsprozesses
- Für Sie empfohlen
- Gliederung
Front-End-Full-Link-Leistungsoptimierung und Optimierung des F&E-Entwicklungsprozesses
4. HTTP: Wie kann die Anzahl der HTTP-Anfragen reduziert werden?
CSS-Sprites
Bilder verwenden DataURL, Web Font
JS/CSS-Dateizusammenführung
JS/CSS-Anforderungskombination
Schnittstellenzusammenführung
Schnittstellenspeicher LocalStorage
Statischer Ressourcenspeicher LocalStorage
5. Cookies: Strategien und Vorteile der Reduzierung der Cookie-Größe
Strategie
Legen Sie eine Whitelist auf der Startseite der Hauptwebsite fest
Löschen Sie regelmäßig Cookies, die nicht auf der Whitelist stehen
Nutzen
Reduzieren Sie die Übertragungsgröße zwischen Seiten
Verwalten Sie Cookies effektiv
6. Server
Cache-Konfigurations- und Optimierungslösungen
Läuft ab
Definition
Der Antwortheader enthält das Datum und die Uhrzeit, nach der die Antwort abläuft
Ein ungültiges Datum, z. B. 0, stellt ein Datum in der Vergangenheit dar, d. h. die Ressource ist abgelaufen
Wenn die Direktive „max-age“ oder „s-max-age“ im Cache-Control-Antwortheader festgelegt ist, wird der Expires-Header ignoriert.
Grammatik:
Läuft ab: Di, 17. Dezember 2019, 07:01:44 GMT
Beispiel:
Läuft ab: Di, 17. Dezember 2019, 07:01:44 GMT
Cache-Kontrolle
Definition
Ein allgemeines Nachrichten-Header-Feld, das den Caching-Mechanismus durch die Angabe von Anweisungen implementiert. Caching-Anweisungen sind unidirektional, was bedeutet, dass in der Anfrage festgelegte Anweisungen nicht unbedingt in der Antwort enthalten sind.
Grammatik
Cache-Control: max-age=[Legen Sie den maximalen Zeitraum für die Cache-Speicherung fest. Nach dieser Zeit gilt der Cache als abgelaufen (in Sekunden). Im Gegensatz zu Expires ist die Zeit relativ zum Zeitpunkt der Anfrage.]
Beispiel
Cache-Kontrolle:max-age=600
ETag
Definition
Ein HTTP-Antwortheader ist eine Kennung für eine bestimmte Version einer Ressource. Dies macht das Caching effizienter und spart Bandbreite, da der Webserver keine vollständige Antwort senden muss, wenn sich der Inhalt nicht geändert hat. Und wenn sich der Inhalt ändert, hilft die Verwendung von ETag, zu verhindern, dass sich gleichzeitige Aktualisierungen von Ressourcen gegenseitig überschreiben.
Bei einer freiwilligen Änderung einer bestimmten URL muss ein neuer ETag-Wert generiert werden. Daher ähneln ETags Fingerabdrücken und können von einigen Servern auch zur Nachverfolgung verwendet werden. Durch den Vergleich von ETags kann schnell festgestellt werden, ob sich diese Ressource geändert hat, sie können jedoch auch dauerhaft von Tracking-Servern gespeichert werden
Grammatik:
ETag: „<etag_value>“
Beispiel
ETag: „<5c6ccc12-1d45>“
Zuletzt bearbeitet
Lat-Modified ist ein Antwortheader, der das Datum und die Uhrzeit enthält, zu der die vom Quellserver identifizierte Ressource geändert wurde. Es wird häufig als Validator verwendet, um festzustellen, ob empfangene oder gespeicherte Ressourcen miteinander konsistent sind. Dies ist ein Fallback-Mechanismus, da er weniger genau als ETag ist. Bedingte Anfragen mit If-Modified-Since- oder If-Unmodified-Since-Headern verwenden dieses Feld
Grammatik
Zuletzt geändert: <Tagesname>, <Tag>, <Monat>, <Jahr>, <Stunde>: <Minute>: <Sekunde> GMT
Beispiel
Zuletzt geändert:Web, 20. Februar 2019 03:40:02 GMT
Datum
Definition:
„Datum“ ist ein allgemeiner Header, der das Datum und die Uhrzeit der Erstellung der Nachricht enthält
Grammatik
Datum: <Tagesname>, <Tag>, <Monat>, <Jahr>, <Stunde>: <Minute>: <Sekunde> GMT
Beispiel
Datum: Dienstag, 17. Februar 2019, 03:40:02 Uhr GMT
Status
Definition
HTTP-Antwortstatuscodes geben an, ob eine bestimmte HTTP-Anfrage erfolgreich abgeschlossen wurde. Die Antworten sind in fünf Kategorien unterteilt: Informationsantworten (100–199), erfolgreiche Antworten (200–299), Weiterleitungen (300–399), Clientfehler (400–499) und Serverfehler (500–599).
Beispiel
Status: 200
So aktivieren und konfigurieren Sie die GZIP-Komprimierung
Nutzen
Text komprimieren (HTML/CSS/JS)
Keine Komprimierung für Nicht-Text (jpg/gif/png)
Kompressionsverhältnis etwa 50 % – 70 %
Konfigurationsmethode
Nginx-Konfiguration: In der Datei nginx.conf wird gzip hinzugefügt
Apache-Konfiguration: AddOutputFilterByType und AddOutputFilter
Gültigkeitserkennung
Antwortheader Überprüfen Sie, ob Content-Encoding: gzip vorhanden ist, was bedeutet, dass gzip auf dem Server aktiviert ist.
7. HTTPS: So aktivieren Sie HTTPS für die gesamte Site
Basiskonzept
HTTPS, HyperText Transfer Protocol Secure, ist ein Übertragungsprotokoll für die sichere Kommunikation über Computernetzwerke
HTTPS kommuniziert über HTTP, verwendet jedoch SSL/TLS zur Datenverschlüsselung
Der Hauptzweck von HTTPS besteht darin, die Authentifizierung der Serveridentität bereitzustellen und den Datenschutz und die Integrität zu schützen.
Arbeitsprinzip
Der Browser initiiert eine HTTPS-Anfrage
Überweisungsbescheinigung
Der Browser analysiert das Zertifikat
Senden Sie verschlüsselte Informationen
Server entschlüsselt Informationen
Übertragen Sie verschlüsselte Informationen
Browser entschlüsselt Informationen
Vorteil
SEO
Sicherheit
implementieren
Kaufbescheinigung des Händlers
GoGetSSL
SSLs.com
SSLmate.com
Lokales Prüfzertifikat
Lokale HomeBrew-Installation: brew install mkcert
Installieren Sie das Stammzertifikat lokal: $ mkcert --install
Signatur lokal generieren: $mkcert 123.com //Zertifikat für 123.com generieren
Lokale Nginx-Konfiguration
8. HTTP-2: Welche Vorteile bietet ein Upgrade von HTTP-2? Wie aktualisiere ich?
HTTP/2-Konzepte
HTTP/2 (Hypertext Transfer Protocol Version 2, ursprünglich HTTP 2.0 genannt), auch als h2 (verschlüsselte Verbindung basierend auf TLS/1.2 oder höher) oder h2c (unverschlüsselte Verbindung) bezeichnet, ist die zweite Hauptversion des HTTP-Protokolls
Vorteile von HTTP/2
Übertragen Sie Daten im Binärformat
Multiplexing ermöglicht die Durchführung mehrerer Anfragen über eine einzige HTTP/2-Verbindung
Header-Komprimierung, kleines Übertragungsvolumen
Server Push: Der Server kann Ressourcen schneller an den Client übertragen
Vorteile von HTTP/2-Sites
Kann den Serverdruck reduzieren
Verbessern Sie die Geschwindigkeit des Website-Zugriffs
Schützen Sie Ihre Website
Aktivieren Sie HTTP/2 auf Nginx
OpenSSL aktualisieren: $ OpenSSL-Version
Neu kompilieren
$ cd nginx-xxx
$ ./configure --with-http_ssl_module --with-http_v2_module
$ make && make install
Überprüfen Sie HTTP/2
Überprüfen Sie im Browser, ob ein kleines grünes Schloss angezeigt wird
Screenshot der Browser-Anfrage
3. DNS: Was sind die gängigen DNS-Optimierungsmethoden?
Definition
Das Domain Name System ist eine verteilte Datenbank, die Website-Domänennamen und IP-Adressen einander zuordnet und so den Zugriff auf das Internet erleichtert.
Kundenbearbeitung
Android-DNS-Modul (okhttp)
Unterstützt HTTP/2. HTTP/2 unterstützt die Parallelität auf einer einzelnen TCP-Verbindung, indem es Multiplexing-Technologie zum Senden oder Empfangen von Daten verwendet, indem mehrere Anfragen gleichzeitig über eine einzelne Verbindung gesendet werden.
Wenn HTTP/2 nicht verfügbar ist, kann die Technologie zur Wiederverwendung des Verbindungspools auch die Latenz erheblich reduzieren
Unterstützt GZIP zur Komprimierung der Downloadgröße
Durch entsprechendes Caching können wiederholte Netzwerkanfragen vollständig vermieden werden
Wenn der Server mit mehreren IP-Adressen konfiguriert ist und die erste IP-Verbindung fehlschlägt, versucht OkHttp automatisch die nächste IP
iOS DNS-Modul (selbst entwickelt)
Wenn die App startet, speichert sie alle möglicherweise verwendeten Domänennamen und IPs im Cache und verarbeitet sie asynchron. Der Client muss die zwischengespeicherten Ergebnisse nicht abrufen.
Wenn im Cache ein Cache für diesen Domainnamen vorhanden ist, wird die zwischengespeicherte IP direkt zurückgegeben.
Wenn sich dieser Domänenname nicht im Cache befindet, wenden Sie sich erneut an den HTTPDNS-SERVER. Das Ergebnis wird in diesem Rückruf zurückgegeben.
Frontend-Verarbeitung
Beschränkung der Browser-Parallelität, Verteilung auf mehrere Domänennamen eingestellt
Benutzerzugriff: Java, PHP und andere API-Schnittstellen
Seiten und Stile: HTML/CSS/JS
Bilder: jpg, png, gif usw.
2. CDN: Wie konfiguriere ich den CDN-Cache richtig?
Definition
Das Content Delivery Network (CDN) nutzt den jedem Benutzer am nächsten gelegenen Server, um Dateien schneller und zuverlässiger an das Benutzerverteilungsnetzwerk zu senden.
Vorteil
Beschleunigen: Benutzern werden engere und reibungslosere Serverknoten zugewiesen, um Daten an Benutzer zu übertragen.
Geringe Kosten: Server werden an verschiedenen Standorten platziert, wodurch der Verbindungsverkehr und die Bandbreitenkosten reduziert werden.
Hohe Verfügbarkeit: Wenn ein Server ausfällt, werden automatisch Server in der Nähe angerufen
CDN zurück zum Ursprung
Zurück zum Ursprung bedeutet, dass, wenn der Browser auf statische Dateien im CDN-Cluster zugreift, der Dateicache abläuft und direkt in den CDN-Cluster eindringt, um auf den Ursprungscomputer zuzugreifen.
CDN-Cache
Cache der Ebene 3: lokaler Browser-Cache, CDN-Edge-Knoten-Cache, CDN-Ursprungs-Site-Cache
Cache-Einstellungen: Wenn die Cache-Zeit zu kurz eingestellt ist, fällt der CDN-Edge-Knoten-Cache häufig aus, was zu häufigen Ursprungsrückgaben führt, die Belastung der Ursprungsseite erhöht und der Zugriff langsam ist, wenn die Cache-Zeit zu lang ist sind langsam und der lokale Cache des Benutzers kann nicht rechtzeitig aktualisiert werden.
Cache-Zeit verschiedener statischer Ressourcentypen
HTML: 3 Minuten
JS, CSS: 10 Minuten, 1 Tag, 30 Tage
CDN-Graustufenversion
Prinzip: In einigen Regionen und einigen Betreibern werden zuerst statische Ressourcen freigegeben. Nach der Überprüfung werden sie vollständig freigegeben.
Implementierung: Richten Sie in Bezug auf Domänennamen spezielle VIPs ein, um sie in Bezug auf die Ursprungsstandortmaschinen aufzulösen, und konfigurieren Sie separate Ursprungsstandortmaschinen für Graustufenstädte und Betreiber, in die eine Auflösung erfolgen soll diese einzigartigen Maschinen
CDN bereitet sich auf große Werbung vor
Erhöhen Sie die Bandbreite im Computerraum
Erhöhen Sie den Betreiberverkehr
Notfallwiederherstellung: Die Cache-Zeit der CDN-Anwendung ist auf 10 Minuten bis 1 Stunde festgelegt und wird nach der großen Aktion wiederhergestellt.
1. Hybride Entwicklung
Einführung in den Kern und die Vorteile von Miniprogrammen
Vision
Immer zur Hand: Benutzer können die App durch Scannen oder Suchen öffnen
Nutzen Sie es und los geht’s: Machen Sie sich keine Sorgen über die Installation zu vieler Apps
Technische Vorteile
H5 hat eine niedrigere Entwicklungsschwelle als die App-Entwicklung
Besser als H5, nah an der Native-Erfahrung
Umfangreiche native Funktionen wie Kamera, Standort, Netzwerk, Speicher usw.
Das obere Dropdown-Menü, die Suche, der QR-Code und andere Eingänge sind einfach zu verwenden und verschwinden nach der Verwendung wieder, was einfach und bequem ist.
Kein Download wie bei einer App nötig, einfach direkt öffnen und beenden, Hot-Update wird unterstützt
zugrunde liegender Kernel
Business-Hintergrund
App-Plattformseite
Monetarisierung des Traffics
Miniprogramm Ökologie
Markt für den Vertrieb von Klassenanwendungen
Unternehmensanwendungsseite
Der mobile Verkehr versiegt, neuer Verkehr ist ein Bonus
Lösen Sie einige der Schwierigkeiten bei der Kundengewinnung und senken Sie die Kosten für die Gewinnung neuer Kunden
Reduzieren Sie die Entwicklungskosten drastisch
Mehr Möglichkeiten für Versuch und Irrtum im Geschäftsleben
Auswahlvorschläge
Erstveröffentlichung: Januar 2017 (WeChat-Miniprogramm)
Github startet: Closed Source
Community aktiv: OK
Bestandteile: sehr reichhaltig
Lernkurve: sehr niedrig
Native Leistung: OK
Umfassende Vorschläge: Plattformprodukte bieten jetzt Traffic-Ausgabe an Händler; im Vergleich zu RN und Flutter ermöglichen mehrere Apps die Geschäftsinteroperabilität. Kleinere Programme werden eher empfohlen
Einführung in den Flutter-Kern und seine Vorteile
Vision
Ein praktisches Toolkit für ein schönes Bauerlebnis, mit dem Sie Pixel an einer beliebigen Stelle auf dem Bildschirm zeichnen können
Technische Vorteile
Einmal schreiben und auf jedem Terminal bereitstellen: Web, Android/iOS, Mac/Linux/Windows, Fuchsia OS
Die unterste Ebene verwendet die Skia-Grafik-Engine und die Grafikleistung ist mit nativen Anwendungen vergleichbar.
Schnittstelle wie eine Vollbild-App oder ein 2D-Spiel
Schnell, verwendet native ARM-Binärdateien, wird im Voraus kompiliert, keine JVM erforderlich
Grundprinzipien
Auswahlvorschläge
Mai 2017
Github startet: 8.16w (Ende 2019)
Die Community ist grundsätzlich aktiv
Komponenten sind spezialisierte Widgets und nicht umfangreich genug
Der Lernaufwand ist relativ hoch, sich wieder mit der Dart-Sprache vertraut zu machen
Native schneidet am besten ab
Umfassende Vorschläge: In Anbetracht der Leistung ist das Unternehmen auf mehrere Terminals ausgerichtet und das App-Team verfügt über genügend Mitarbeiter. Es wird empfohlen, eine Auswahl zu treffen