Der Unterschied zwischen Div und Tabelle in Geschwindigkeit, Laden, Webanwendung usw.
|
1: Unterschiede bei Geschwindigkeit und Lademethoden Der Unterschied zwischen Div und Tabelle ist nicht die Geschwindigkeit, sondern die Lademethode. Geschwindigkeit kann sich nur auf die Netzwerkgeschwindigkeit beziehen. Wenn die Geschwindigkeit schnell genug ist, gibt es keinen Unterschied: Der Lademodus von div besteht darin, beim Lesen zu laden. Wenn <div>, aber nicht </div> gefunden wird, wird der Inhalt in div geladen. Der Inhalt wird geladen, sobald er gelesen wird. Der Lademodus von table besteht darin, nach Abschluss zu laden. Wenn <table> gefunden wird, aber </table> vor dem Lesen, wird der Inhalt in table nicht geladen oder er wird geladen, wenn die Übertragung unterbrochen wird (Ereignis document.onload()). Dies liegt daran, dass TABLE mehrere Zeilen und Spalten enthält. Daher weiß IE erst, wie der gesamte Inhalt von TABLE angezeigt wird, wenn er geladen ist. 2: Der Unterschied bei Webanwendungen <br />Wenn Sie am Anfang und am Ende der Seite eine Tabelle hinzufügen, müssen Sie warten, bis die gesamte Seite gelesen wurde, bevor Sie sie laden. Wenn Sie am Anfang und am Ende der Seite ein Div hinzufügen, hat dies keine Auswirkung. 3: Vergleich der Benutzerfreundlichkeit von DIV- und Tabellenlayouts auf großen Websites Zwischen DIV und TABLE selbst gibt es keine Vor- oder Nachteile. Der sogenannte Webstandard empfiehlt lediglich die korrekte Verwendung von Tags. Beispielsweise wird DIV für das Layout verwendet, während TABLE ursprünglich zum Konvertieren zweidimensionaler Daten verwendet wird. Lassen Sie TABLE tun, was es tun soll. Was allerdings nicht heißt, dass es so toll ist, wenn TABLE nicht auf der Seite erscheint. Der Vorteil der Verwendung von DIV für den Schriftsatz besteht darin, dass ich es nicht erklären muss, es aber jedem klar sein sollte. DIV ist ein Standard und ein allgemeiner Trend. Das bedeutet jedoch nicht, dass alle Seiten für die Verwendung geeignet sind. Es gibt einen großen Unterschied zwischen chinesischen und ausländischen Portalen. Chinesische Internetnutzer mögen keine Seiten mit wenigen Informationen. Die YAHOO-Seite in China hat viel mehr Inhalt, und als sie das letzte Mal in eine einfache Seite umgewandelt wurde, sank die Anzahl der Besuche so stark, dass sie nach einigen Tagen wieder zurückgeändert wurde. Gerade aufgrund der nationalen Gegebenheiten Chinas entstanden Portale wie Sohu und Sina. Warum ist DIV für sie nicht geeignet? Lassen Sie mich dies nacheinander aus mehreren Aspekten erklären: Vereinfachter Code: Jeder sagt, dass das DIV-Layout den Code vereinfacht, aber der Code, der durch die Verwendung von DIV anstelle von TABLE eingespart wird, wird von CSS (Stilen) belegt, und die meisten dieser Stile werden verwendet, um das Layout von DIV zu steuern. Dann könnten Sie sagen, dass CSS extern wiederverwendet werden kann. Um die Antwort auf diese Frage zu erfahren, lesen Sie bitte weiter. Wiederverwendbarkeit und Downloads: Durch die Verwendung einer einheitlichen CSS-Stylesheet-Datei können Sie die gesamte Site mit nur einer Änderung modifizieren, was die Wartungskosten senkt. Aber bitte betrachten Sie es aus einer anderen Perspektive. Wenn alle Seiten beim Laden auf eine Datei zugreifen müssen, wird das tägliche Downloadvolumen dieser Datei, insbesondere auf den Website-Plattformen von Sohu und Sina, Hunderte Millionen Mal erreichen. Dies erfordert eine Menge Front-End-Webserver zur Unterstützung, und die Backend-Kosten werden ebenfalls unbemerkt stark ansteigen. Wenn die Hintergrundunterstützung nicht gut gemacht ist, wird die Seite verzerrt erscheinen und die gesamte vorherige Arbeit war umsonst. Viele werden fragen: „Die Wahrscheinlichkeit, dass so etwas passiert, ist zu gering.“ Wir versuchen, ein oder zwei Unfälle zu verhindern. Sollte es zu einem Unfall kommen, wären die Folgen für das Portal katastrophal. HTTP-Kommunikation: Die vereinheitlichte Stylesheet-Datei liegt in Form eines externen Aufrufs vor, sodass bei jedem Laden einer einzelnen Seite eine zusätzliche HTTP-Anforderung an den Server gestellt wird und der Server eine zusätzliche Antwort erhält, was für den Front-End-Webserver einen großen Aufwand darstellt. Lange Zeit wurden CSS und JS auf der Vorderseite der Seite geschrieben (Sie können sich die Seiten von Sohu und Sina ansehen, die meisten haben diese Form) und nicht als externer Aufruf, um den Anstieg des Serververbrauchs zu minimieren. Seiten-Cache: Jedes Mal, wenn ein Benutzer eine Seite besucht, wird diese für einen bestimmten Zeitraum im Browser-Cache gespeichert, um sicherzustellen, dass die Seitenanzeigegeschwindigkeit beim nächsten Besuch des Benutzers erheblich verbessert werden kann. Jede Änderung führt dazu, dass die Seite erneut heruntergeladen wird. Dasselbe gilt für jede extern importierte Stildatei. Wenn die CSS-Datei geändert wird, wird jede auf der Website aufgerufene Seite erneut heruntergeladen. Bei der vorherigen Methode zum Schreiben des Stils auf der Seite muss nur die geänderte Seite erneut heruntergeladen werden. Kompatibilität: Nicht alle Browserversionen unterstützen CSS (Stylesheets) sehr gut. Browser vor IE5 unterstützen CSS beispielsweise nicht sehr gut. Heutzutage verwenden viele Benutzer Browserversionen vor IE5. Dies erfordert bei der Seitenerstellung Tests mit verschiedenen Browserversionen, um die Kompatibilität sicherzustellen, was den Arbeitsaufwand unbemerkt erhöht (zumindest die Entwickler, mit denen ich in Kontakt gekommen bin, brauchen länger, um eine Div-Seite zu erstellen als eine Tabellenseite). Querschnitt und Duktilität: Horizontales Schneiden - Um das Herunterladen der Seite zu beschleunigen, wird die Seite bei der herkömmlichen Layoutmethode von oben nach unten in mehrere Blöcke unterteilt. Diese Situation tritt jedoch häufig bei Seiten auf, die das DIV-Layout verwenden. Da die Anzahl der Inhaltselemente in der mittleren Spalte oder in anderen Spalten jedes Blocks nicht festgelegt ist, werden die Spalten auf beiden Seiten nicht gleichzeitig angepasst, was zu Leerräumen führt. Oben diskutieren wir nur die Verwendbarkeit einer bestimmten Technologie in einem bestimmten Bereich, nicht die Technologie selbst. Das alles gesagt bedeutet nicht, dass die DIV-Layoutmethode schlecht ist, sondern dass wir die Rolle der Tabelle in großen inhaltsbasierten Portalen richtig einschätzen sollten, anstatt anderen blind zu folgen. Der Grund, warum die DIV-Layoutmethode auf großen Websites nicht verwendet wird, liegt nicht darin, dass das Portal aufgrund rückständiger Technologie kein DIV verwendet oder die Leute darin nicht zukunftsorientiert sind, sondern es gibt mehrere Gründe dafür. Der Grund, warum NetEase das DIV-Format verwendet, liegt darin, dass der Inhalt nicht ihr Hauptaugenmerk ist. Bei anderen Portalen müssen derartige Entscheidungen im Laufe der Zeit überprüft werden. Die Zeit ist einfach noch nicht reif. 4: DIV+CSS Nun denke ich, dass DIV + CSS nicht so einfach ist wie die wörtliche Bedeutung, sondern zwei inhärente Bedeutungen hat: 1. Trennen Sie Struktur und Präsentation. Verwenden Sie DIV, um die Struktur zu vervollständigen, und CSS, um die Präsentation zu steuern. Dies bringt viele Vorteile. DIV vereinfacht die Seite und verbessert die Flexibilität. Designer mit CSS-Kenntnissen können die wiederholte Verschachtelung von DIVs vermeiden und so die Seitenladegeschwindigkeit und die Wartbarkeit der Site erheblich verbessern. 2. Der Grund für die Wahl von DIV zur Zusammenarbeit mit CSS besteht darin, dass der Kern von CSS das „Boxmodell“ ist und kein Tag die Essenz des „Boxmodells“ besser interpretieren kann als DIV. Die Struktur von TABLE ist zu kompliziert und kann dies nicht gut. Obwohl TABLE+CSS auch eine Option ist, vergessen Sie nicht, dass DIV einen weiteren Vorteil hat, nämlich Floating Stacking, und Websites, die TABLE für das Layout verwenden, die W3C-Verifizierung nicht bestehen können. Tatsächlich bietet DIV noch viel mehr Vorteile. Beispielsweise bietet DIV durch flexibles Layout und benutzerdefiniertes Layout eine unglaubliche Flexibilität und seine semantische Struktur ist suchmaschinenfreundlicher als TABLE, ganz zu schweigen von der plattformübergreifenden Anwendung. DIV+CSS bietet uns ein elegantes und standardisiertes technisches Framework, mit dem wir mit minimaler Wiederholungsarbeit immer schönere Seiten erstellen können. Dadurch wird die Effizienz des gesamten Teams verbessert und sogar das langjährige Problem gelöst, dass Webdesigner und Webprogrammierer nicht synchron arbeiten können. |
>>: JS generiert eindeutige ID-Methoden: UUID und NanoID
Artikel empfehlen
Mehrere Möglichkeiten zum Ändern der SELECT-Optionen in einer HTML-Dropdown-Box
Nachdem das Formular übermittelt wurde, wird die z...
Native JavaScript-Karussell-Implementierungsmethode
In diesem Artikel wird die Implementierungsmethod...
Vue implementiert eine kleine Countdown-Funktion
In vielen Projekten muss eine Countdown-Funktion ...
MySQL-Datenmigration mit dem Befehl MySQLdump
Die Vorteile dieser Lösung liegen in der Einfachh...
Implementierung der MySQL-Tabellenlöschoperation (Unterschiede zwischen Löschen, Abschneiden und Löschen)
In diesem Artikel werden hauptsächlich die Unters...
Lernen Sie die Prinzipien und allgemeinen Operationen von MySQL-Partitionstabellen anhand von Beispielen kennen
1. Bedeutung der Partitionstabelle Eine Partition...
Lösung für das Problem, dass die lokale MySQL-Anmeldung keine Portnummer zum Anmelden verwenden kann
Als ich mich kürzlich lokal unter Linux anmeldete...
ICO-Spiegelcode zu HTML hinzufügen (favicon.ico wird im Stammverzeichnis abgelegt)
Code: Code kopieren Der Code lautet wie folgt: <...
Der Ansichtsbereich im Meta-Tag steuert das Gerätebildschirm-CSS
Code kopieren Der Code lautet wie folgt: <meta...
Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks
Inhaltsverzeichnis mvc MVP mvv Die Quelle von Vue...
So kompilieren und installieren Sie PHP und Nginx in einer Ubuntu-Umgebung
Dieser Artikel beschreibt, wie man PHP und Nginx ...
Eine kurze Diskussion über die Implementierung der MySQL-Lösung zur Optimierung des Seitenlimits
MySQL begrenzt die Nutzung von Paging-Anweisungen...
Führen Sie die Schritte zur Installation von MySQL 8.0.x unter Linux aus.
MySQL Einführung in MySQL MySQL war ursprünglich ...
Wissen Sie, wie Sie das Flash-Wmode-Attribut in Webseiten verwenden?
Bei der Webentwicklung kann es vorkommen, dass Fl...
MySQL-Variablenprinzipien und Anwendungsbeispiele
In der MySQL-Dokumentation können MySQL-Variablen...