Front-End-Leistungsoptimierung – die Schwachstellen, über die Front-End-Ingenieure sprechen müssen
|
Vorwort <br />Im vorherigen Artikel „Mein CSS-Architekturkonzept“ wurde mir der ganze Weg dank der Freundlichkeit meiner Freunde im Park empfohlen, was bei mir, einem kleinen Front-End-Ingenieur, Überraschung, Aufregung und dann Panik auslöste. Was mir Sorgen bereitet, ist meine begrenzte Qualifikation und mein mangelndes Wissen. Außerdem habe ich große Angst, junge Menschen in die Irre zu führen. Das ist die Wahrheit! Aber ich werde weiterhin darauf bestehen, Artikel zu schreiben, wenn ich Zeit habe. Ich kann nicht nur zusammenfassen, sondern auch neues Wissen lernen und es mit Ihnen teilen. Ich glaube, dass das Teilen eine verdienstvolle Sache ist. Ist das Internet nicht dadurch bunter? In den Kommentaren zum vorherigen Artikel stellten viele Freunde meine CSS-Architektur in Bezug auf HTTP-Anfragen in Frage. Ich wollte ihnen antworten, wusste aber nicht, wo ich anfangen sollte. Ich habe kein tiefes Verständnis für die Leistung von Front-Ends. Ich habe ein oder zwei Bücher über Refactoring durchgelesen, suche gerne nach Informationen und lese Artikel, die von einigen Experten geschrieben wurden. Ich denke, was sie getan haben, macht Sinn, also habe ich das, was sie gelernt haben, kopiert und verwendet und einige Zusammenfassungen erstellt, so ist dieser Artikel entstanden. Nichts davon ist neu, aber da es so viele kleine Wissenshäppchen sind, hoffe ich, dass die darin enthaltenen Informationen Ihnen die Antworten geben können, nach denen Sie suchen. Front-End-Leistungsoptimierung - das Problem, über das Front-End-Ingenieure sprechen müssen 1.html, CSS und JS sind getrennt. Gründlich trennen! Ich glaube, jeder versteht, warum diese drei getrennt werden müssen, deshalb werde ich es nicht im Detail erklären. 2. So importieren Sie CSS. CSS verwendet „Link“ statt „@import“, da die „@import“-Direktive im Internet Explorer gleichbedeutend damit ist, den Link-Tag am Ende des HTML zu schreiben, was die Ladezeit von CSS verlängert und möglicherweise auch die Reihenfolge des Dateidownloads ändert. 3. Gehen Sie vernünftig mit jQuery um. Mit jQuery können wir „weniger schreiben und mehr tun“. Es bietet zu viele Vorteile: leistungsstarke Selektoren, perfekte Kapselung von DOM-Operationen, vollständiges Ajax und gute Kompatibilitätsverarbeitung. Aber sind wir wirklich untrennbar davon verbunden? Ich denke, es sollte auf Nachfrage und Geschäftslogik basieren. Wenn eine Seite mit nur wenigen oder Dutzenden Zeilen JS-Code erstellt werden kann, warum sollte man dann jQuery verwenden? Die Seite zuerst jquery.js laden lassen und dann Ihren eigenen Code schreiben? Das ist nicht nötig. 4. Gestalten Sie den Inhalt der Seite sinnvoll. Die Ladereihenfolge des DOM ist von oben nach unten. Wenn CSS auftritt, CSS laden, JS auftreten, anhalten, JS laden und analysieren. Beim Layout einer Seite ist es eine bessere Lösung, zuerst den Hauptinhalt anzuzeigen, den wichtigen Inhalt oben zu platzieren und ihn zuerst vom Browser analysieren zu lassen. 5. So importieren Sie js. „Die Rückkehr des JavaScript-Königs“ vergleicht die Vor- und Nachteile von JS-Importmethoden. Ich persönlich denke, dass ohne Berücksichtigung der Wiederverwendung und Wartung von JS-Code (aber dies wird oft zu meinem wichtigsten Maßstab) der JS-Code mit wichtigen Geschäftsmodulen im Titel und der sekundäre JS-Code mit Betriebseffekten nach dem entsprechenden Objekt im DOM platziert werden sollte. Die theoretische Grundlage hierfür ist die Ladereihenfolge von DOM. Die obige Aussage ist nicht leicht zu verstehen. Zum Beispiel:  Das obige Bild zeigt die Navigation der Homepage von QQ Music. Die Bedeutung der Hauptnavigation ist offensichtlich. Im Folgenden sind zwei entsprechende Codes aufgeführt: Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" /> <title>Test - JS-Importmethode 1</title> <Skripttyp="text/javascript"> </Skript> </Kopf> <Text> <ul> <li><a href="">Startseite</a></li> <li><a href="">Musikbibliothek</a></li> <li> <a href="" id="mv">MV</a> <div Klasse=""> <a href="">MV-Empfehlung</a> <a href="">MV-Bibliothek</a> <a href="">Musikszene</a> <a href="">MV-Spezial</a> </div> </li> <li><a href="">Meine Musik</a></li> <li><a href="">Laden Sie den Client herunter</a></li> </ul> </body> </html> Code kopieren Der Code lautet wie folgt:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <Kopf> <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" /> <title>Test - JS-Importmethode 1</title> </Kopf> <Text> <ul> <li><a href="">Startseite</a></li> <li><a href="">Musikbibliothek</a></li> <li> <a href="" id="mv">MV</a> <div Klasse=""> <a href="">MV-Empfehlung</a> <a href="">MV-Bibliothek</a> <a href="">Musikszene</a> <a href="">MV-Spezial</a> </div> </li> <li><a href="">Meine Musik</a></li> <li><a href="">Laden Sie den Client herunter</a></li> </ul> <Skripttyp="text/javascript"> </Skript> </body> </html> Der JS-Effekt der beiden Codeteile besteht darin, die Untermenüoptionen anzuzeigen, wenn die Maus zum MV-Menüelement bewegt wird. Im ersten Codesegment, wenn der Browser das <script>-Tag analysiert, hält er an, bis die Analyse abgeschlossen ist, und fährt dann fort. Wenn das MV angezeigt wird, wird das Untermenü angezeigt, sobald wir die Maus darüber bewegen. Im zweiten Codesegment, wenn der Browser das MV und dann das <script> analysiert, muss er zuerst js laden, und das Untermenü wird erst angezeigt, wenn es abgeschlossen ist. Für ein so wichtiges Funktionsmodul ist der erste Code offensichtlich besser geeignet. In Bezug auf dieses Prinzip weiß ich nicht, ob es Abweichungen oder Fehler in meinem Verständnis gibt. Freunde im Garten, die gründliche Nachforschungen dazu angestellt haben, korrigieren Sie mich bitte. 6.Wählen Sie das Bilddateiformat. In Bezug auf diesen Punkt wurden das Bildformat und das Design von Taobao UED sehr ausführlich diskutiert. Ich persönlich habe das Gefühl, dass ich viel davon profitiert habe, aber der Artikel ist zu lang und zu ausführlich und ich kann ihn wirklich nicht ohne Geduld lesen, also habe ich ihn später selbst zusammengefasst. Sie können sich auf die folgenden drei Auswahlmöglichkeiten für Bilddateiformate beziehen. Nachdem ich diesen Artikel zusammengefasst hatte, befolgte ich ihn bei meiner Arbeit strikt. 7.Sprites-Mapping-Technologie. Dies ist seit ihrem Erscheinen eine umstrittene Technologie. Zuerst müssen wir PS öffnen und viele kleine Symbole ordentlich anordnen. Zweitens müssen wir PS öffnen und am besten fünfmal hineinzoomen, dann zwei Referenzlinien horizontal und vertikal nach unten ziehen und sie dann am Lineal ausrichten, die linken/oberen Werte aufschreiben und in die CSS-Datei schreiben. Drittens ist die Sprites-Mapping-Technologie eng mit Höhe und Zeilenhöhe verbunden. Aus diesem Grund wird die Position der linken/oberen Position am zweiten Punkt ungenau. Zu diesem Zeitpunkt sollten Sie einen gewissen Abstand zwischen den Symbolen lassen, da sonst nur die Hälfte der Symbole angezeigt wird. Mir fehlt wirklich die Energie, Screenshots zu machen und Code zu schreiben, um zu beweisen, dass ich Recht habe, aber Sie können das selbst tun. Ich scheine diese Technologie trivialisiert zu haben, was Dave Shea in Verlegenheit bringt! Ich denke, der Hauptgrund, warum die Texturtechnologie immer noch weit verbreitet ist, liegt darin, dass sie die Anzahl der Anfragen erheblich reduziert und die Gesamtgröße der Bilder bis zu einem gewissen Grad verringert. Im Vergleich zu diesen beiden Punkten erscheinen die zuvor genannten Mängel unbedeutend. 8. Verbessern Sie die Seite schrittweise. Kombinieren Sie Auflösung, Betriebssystem, Browser und Zielgruppe des Projekts und übernehmen Sie beim Erstellen der Seite das Prinzip der schrittweisen Verbesserung. Wenn die Zielgruppe des Projekts im Allgemeinen einen Browser mit 1024 x 768, Mac OS X und IE7+ verwendet, sollte beim Entwerfen der Seite die Breite entsprechend begrenzt werden. Es sollte am besten keine horizontale Bildlaufleiste geben. Die Schriftart sollte nicht mehr Songti sein, sondern andere websichere Schriftarten. Dann sind wir zufrieden, weil wir IE6 nicht berücksichtigen müssen. Haben Sie nicht das Gefühl, dass die Arbeit plötzlich sehr angenehm geworden ist? Progressive Enhancement kann nicht nur im Gesamtbild, sondern auch im Einzelseitenmodul angewendet werden.  (Abbildung 1) (Abbildung 2)Abbildung 1 und Abbildung 2 sind Screenshots von einem li in einer Liste. Abbildung 2 zeigt den Effekt, wenn die Maus über das li bewegt wird - es wird „Nicht mehr folgen“ angezeigt. Ich werde in diesem Modul das Prinzip der progressiven Verbesserung anwenden: Zunächst müssen wir IE6 berücksichtigen. Da IE6 den Hover-Effekt anderer Tags außer dem A-Tag nicht unterstützt und „unfollow“ eine wichtige Funktion ist, ist es nicht möglich, darauf zu verzichten. Daher können wir nur JS-Code verwenden, um den Mouse-In- und -Out-Effekt zu erzielen. Zweitens, wenn IE6 nicht berücksichtigt wird, können Sie es, vorausgesetzt, dass das Tag „unfollow“ span ist, wie folgt im CSS-Stylesheet schreiben: li:hover span{display:block;}. Drittens, wenn die Funktion „unfollow“ durch eine irrelevante Textanzeige, wie z. B. eine Zeitanzeige, ersetzt wird, kann auch die zweite Schreibmethode verwendet werden, sodass andere Browser sie anzeigen können und es keine großen Auswirkungen hat, wenn IE6 sie nicht anzeigt. 9. Verwenden Sie weniger Filter, Ausdrücke und Hacks. Dies wird in vielen Refactoring-Büchern erwähnt. Filter wurden im Projekt getestet. Wenn eine Fotowand mit angewendeten Filtern angezeigt wird, lädt der Browser die Seite sehr langsam. Ich habe es mit eigenen Augen gesehen! Der Ausdruck ist unbekannt. Ich habe das Hacken von Anfang an vermieden und es kaum jemals verwendet, deshalb kann ich dazu nichts sagen. 10. Verwenden Sie einige externe Anwendungen, um die Anzahl der Anforderungen für CSS- und JS-Dateien zu reduzieren. PHP-Programmierer können erwägen, minify zu verwenden, um CSS und JS jeder Seite zusammen zu integrieren und sie dann auf der Seite aufzurufen. Auf diese Weise fordert die Seite CSS und JS nur einmal an und die Leistung wird erheblich optimiert. Das ist alles, was mir im Moment einfällt. Es gibt noch viel mehr Möglichkeiten, die Front-End-Leistung zu optimieren. Dies sind nur die Grundlagen. Wir werden langsam tiefer in die Materie einsteigen. Okay, lass uns über etwas anderes reden! Front-End- und Grafikpersonal <br />Front-End-Ingenieure berichten an die Grafikdesigner oben, sind mit den Back-End-Ingenieuren unten verbunden und werden von den Produkten unterstützt; keiner von ihnen darf fehlen. Die Aufteilung der Verantwortlichkeiten muss klar sein. Der Frontend-Designer sollte dem Künstler sagen, dass er so wenig Bilder wie möglich verwenden soll, das Dateiformat der Bilder sinnvoll wählen soll, den Seitenstil der Website so konsistent wie möglich halten soll, der Website die Hauptfarbe für Geschäftslinks, die Farbe für sekundäre Links, die Haupttextfarbe und andere Textfarben usw. zuweisen soll. Das Artwork wird für eine einzelne Seite erstellt und es ist oft unmöglich, die endgültige Wirkung der gesamten Website zu berücksichtigen. Zu diesem Zeitpunkt sollte das Frontend eine richtungsweisende Rolle spielen. Wenn dieser Link nicht bestimmt, was bestimmt werden muss, wird es ziemlich schmerzhaft sein, die Version zu überarbeiten. Front-End- und Back-End-Personal <br />Kommunizieren Sie die Benennungsmethode klar, erläutern Sie dem Back-End-Personal die Ideen der Front-End-CSS-, JS- und Bildverzeichnisstrukturdefinitionen und bringen Sie ihnen die Arbeitsprinzipien des Back-Ends näher. Frontend- und Produktmanager <br />Für Menschen in jeder Position ist es nicht einfach, und für Produktmanager gilt das erst recht. Letztendlich ist der Produktmanager derjenige, der für das Produkt verantwortlich ist. Ich weiß nicht, ob es daran liegt, aber die Produktmanager, die ich getroffen habe, sind alle extrem gewissenhaft. Manche sind sogar so gewissenhaft, dass sie erkennen können, ob die Darstellung des Prototyps 2 oder 3 Pixel anders ist! Wenn der Produktmanager sich zu sehr auf Details konzentriert, wird das Front-End miserabel. Wie geht man mit einer solchen Situation um? Denken Sie wie ein Produktmanager über Probleme aus der Perspektive von Produkten und Benutzern nach. Denken Sie niemals aus Ihrer persönlichen Position über Probleme nach, sonst werden Sie ihn nie überzeugen können. Das ist natürlich etwas schwierig... Zum Schluss möchte ich noch ein paar Gedanken zum Programmdesign zusammenfassen: Programme sind wie das Leben, manchmal muss man Kompromisse eingehen. Man kann die Codewartung nicht einfach ignorieren, nur um die Anzahl der Anfragen zu reduzieren. Man kann nicht für Benutzer mit 2 Millionen und für Benutzer mit 10 Millionen dieselbe Behandlungsmethode anwenden. Auch die Anzahl der Website-Besuche muss berücksichtigt werden. Um eine optimale Lösung zu finden, müssen mehrere Aspekte berücksichtigt und abgewogen werden. Ich glaube, das ist das Vernünftigste. |
>>: Wie erreicht MySQL die Parallelität mehrerer Versionen?
Artikel empfehlen
So verwenden Sie den Linux-Befehl md5sum
01. Befehlsübersicht md5sum - MD5-Prüfcode berech...
So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)
Bevor wir JSX zum Erstellen eines Komponentensyst...
JS Leicht verständliche Funktion und Konstruktor
Inhaltsverzeichnis 1. Übersicht 1.1 Erstellen ein...
HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren
Fallbeschreibung: - Verwenden Sie Tabellen, um Se...
Detaillierte Erklärung zum Einfügen gängiger Nginx-Befehle in Shell-Skripte
1. Erstellen Sie einen Ordner zum Speichern von N...
Ein praktischer Leitfaden zu den Komponenten zur Leistungsoptimierung beim ersten Bildschirm von Vue-Projekten
Inhaltsverzeichnis Komponente zur Leistungsoptimi...
So steuern Sie den Anteil untergeordneter Flex-Elemente auf der Hauptachse
Hintergrund Durch das flexible Layout wird eine e...
So implementieren Sie geplante Sicherungen und inkrementelle Sicherungen hochgeladener Dateien in Linux
einführen Wenn Sie einen OSS-Speicherdienst wie A...
Vergleich der Leistung von int, char und varchar in MySQL
Im Internet kursieren viele scheinbar wahre „Gerü...
Einführung in die Containerfunktion of() in der Linux-Kernel-Programmierung
Vorwort Bei der Linux-Kernel-Programmierung werde...
Unterschiede zwischen proxy_pass in zwei Modulen in nginx
1. Die proxy_pass -Direktive des Moduls 1.ngx_str...
Wozu dient das Feld „enctype“ beim Hochladen von Dateien?
Das enctype-Attribut des FORM-Elements gibt den Ko...
Detaillierte Verwendung von Echarts in vue2 vue3
Inhaltsverzeichnis 1. Installation 2. Verwenden S...
Vue Element-ui implementiert Baumsteuerungsknoten und fügt Symbole hinzu, detaillierte Erläuterung
Inhaltsverzeichnis 1. Rendern 2. Daten binden und...
Lernen Sie, wie Sie Portainer zur Verwaltung mehrerer Docker-Containerumgebungen verwenden.
Inhaltsverzeichnis Portainer verwaltet mehrere Do...