Einige Front-End-Praxiszusammenfassungen der neuen Homepage von Alipay

Der wichtigste Punkt, auf den Sie bei der Anwendung von Tags achten sollten, ist die Kommunikation ihrer Semantik. Tags wie <header> und <footer> sind leicht zu verstehen, aber Tags wie <section> und <aside> sowie Tags wie <small>, die eine neue Semantik verwenden, sind allesamt eine genauere Untersuchung wert. Auch bei der Überarbeitung der neuen Homepage habe ich auf diesen Aspekt Wert gelegt, allerdings ist die Umsetzung noch nicht ganz optimal. Als nächstes werde ich in diesem Bereich einige Forschungen durchführen. Wenn Sie interessiert sind, können Sie meinem Team beitreten.

Erwähnenswert ist, dass eine der Eigenschaften von HTML5 lautet: „Toleranz macht es großartig“ und Tags sehr flexibel verwendet werden können. Sie können beispielsweise Links auf „Blockebene“ verwenden. Personen, die es gewohnt sind, XHTML zu schreiben, werden den folgenden Code sicherlich nicht gewohnt sein und ihn möglicherweise sogar als unangemessen empfinden, aber HTML5 ermöglicht genau dies.

Tatsächlich ist es etwas, das jeder erleben kann. Insgesamt hat man den Eindruck, dass die Homepage mehr Dinge bietet als die vorherige Version, aber die Geschwindigkeit ist überraschenderweise viel schneller. Ein weiteres offensichtliches Gefühl ist, dass die Bilder als letztes herauskommen. Ja, deshalb ist es trotz der vielen Anfragen immer noch schnell.

Beim sogenannten verzögerten Laden werden die Bildadressen aller Bilder mit den entsprechenden Tags aufgezeichnet, anschließend mithilfe von JS ein Bild erstellt und der Quellwert in die auf der Seite markierte Adresse geändert. Dies hat zwei Vorteile. Erstens wird zuerst der Textinhalt angezeigt und dann das Bild geladen. Dieser Vorgang des sequentiellen Ladens der Bilder beruhigt den Benutzer psychologisch und gibt ihm das Gefühl, dass die Seite geladen wird. Zweitens werden die Bilder parallel geladen, was die Seite tatsächlich beschleunigt.

Dies birgt jedoch ein Risiko: Wenn JS nicht aktiviert ist, können Benutzer das Bild nicht sehen. Daher müssen wir die Benutzerfreundlichkeit der Seite weiter verbessern, damit sie auch ohne JS angezeigt werden kann. Was mir damals in den Sinn kam, war das Tag <noscript>, ein Tag, der speziell für kein JS entwickelt wurde. Deaktivieren Sie jetzt JS in Ihrem Browser und besuchen Sie die Alipay-Homepage erneut. Richtig, sie werden alle angezeigt, oder? Der Zweck wurde erreicht. Die Methode ist wie folgt: Folgen Sie der Struktur von noscript > img und platzieren Sie außerhalb jedes <img>-Tags ein <noscript>-Tag. Wenn JS vorhanden ist, verwenden Sie JS, um das <img> außerhalb des <noscript> zu verschieben.

In Bezug auf die technische Implementierung gibt es ein relativ problematisches Problem: Das von Noscript erhaltene innerHTML ist in fortgeschrittenen Browsern wie Firefox ein maskierter Text, im IE jedoch nicht. Das Wichtigste ist, dass es mit innerHTML im IE7 überhaupt nicht erhalten werden kann. Das Entkommen ist eine triviale Angelegenheit und Sie können einen Hack schreiben, um es zu erreichen, aber es nicht zu schaffen, ist das größte Problem. Also müssen wir ein Bild folgendermaßen schreiben:

Ich empfehle Ihnen dringend, einen Blick auf die Vorschläge von Google zu werfen. Fast alle meine Optimierungen basieren auf diesem: http://code.google.com/speed/page-speed/docs/overview.html

Abschluss

Okay, das ist alles, was ich zu sagen habe. Es gibt nur zwei Hauptpunkte, die anderen werden dazwischengemischt, ohne vollständig erläutert zu werden. Es wird noch an vielem mehr gearbeitet. Ich war in letzter Zeit einfach sehr faul und es ist viel passiert. Ich bin zu müde, um Blogs zu schreiben. Man sollte trotzdem immer noch Blogs schreiben und zwischendurch auch mal zusammenfassen, sonst versagt das Gehirn schnell und man schafft es nicht mehr, einzelne Wörter zu einem ganzen Satz aneinanderzureihen. Für diese Überarbeitung wurden die meisten HTML/CSS-Codes von Praktikanten geschrieben, was ich letztes Mal auch auf Weibo erwähnt habe . Ich bin hauptsächlich für JS, die allgemeine Übersicht und Optimierungsaspekte verantwortlich. Ich finde, dass die jetzigen Praktikanten alle sehr gut sind. Als ich noch Junior war, konnte ich nicht einmal Code schreiben. Ha ha…