Wer dominiert Redraw und Reflow in der Rendering-Phase?
Neuzeichnen und Reflow in der Rendering-Phase: Wer spielt die Hauptrolle?
Mit der kontinuierlichen Weiterentwicklung der Web-Technologie ist der Rendering-Prozess von Webseiten immer komplexer geworden. Beim Rendern von Webseiten im Browser sind Repaint und Reflow zwei sehr wichtige Konzepte. In diesem Artikel werden die Konzepte des Neuzeichnens und Reflows sowie ihre Rolle im Rendering-Prozess ausführlich vorgestellt und ihre Funktionsweise anhand spezifischer Codebeispiele weiter veranschaulicht.
Zunächst muss klar sein, dass Neuzeichnen und Neufließen zwei unabhängige Phasen der Webseitendarstellung sind. Eine Neuzeichnung erfolgt, wenn sich das Erscheinungsbild eines Elements ändert, ohne dass sich dies auf sein Layout auswirkt. Reflow bezieht sich auf den Vorgang, der ausgeführt wird, wenn sich Größe, Position oder andere Layouteigenschaften eines Elements ändern. Der Reflow-Vorgang ist relativ rechenintensiv, da er eine Neuberechnung des Layouts erfordert.
Wer spielt also im Rendering-Prozess die Hauptrolle: Neuzeichnen oder Reflow? Tatsächlich hängt es von den Kompromissen zwischen verschiedenen Faktoren ab. Wenn es nur einen Neuzeichnungsvorgang gibt, spielt im Allgemeinen das Neuzeichnen eine dominierende Rolle, da die Kosten für das Neuzeichnen relativ niedrig sind. Und wenn es einen Reflow-Vorgang gibt, spielt Reflow unabhängig davon, wo die Reflow-Markierung auftritt, eine führende Rolle, da die Reflow-Kosten höher sind.
Als nächstes verwenden wir ein bestimmtes Codebeispiel, um die Beziehung zwischen Neuzeichnen und Umfließen zu veranschaulichen. Nehmen wir an, wir haben ein einfaches Weblayout, das ein Schaltflächenelement und ein Textfeldelement enthält. Wenn auf die Schaltfläche geklickt wird, werden die Vorgänge zum Neuzeichnen und Umfließen des Textfeldelements durch Ändern des Werts des Textfelds ausgelöst. Der Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<title>重绘和回流示例</title>
<style>
.container {
width: 200px;
height: 100px;
background-color: #ccc;
}
.btn {
padding: 10px;
background-color: #f00;
color: #fff;
}
.input {
width: 180px;
height: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<button class="btn" onclick="changeText()">改变文本</button>
<input class="input" type="text" value="原始文本">
</div>
<script>
function changeText() {
var input = document.querySelector('.input');
input.value = '改变后的文本';
}
</script>
</body>
</html>Wenn wir in diesem Beispiel auf die Schaltfläche klicken, wird der Wert des Textfelds durch JavaScript-Code geändert. Dieser Vorgang löst die Vorgänge zum Neuzeichnen und Umfließen des Textfeldelements aus. Insbesondere führt das Ändern des Werts des Textfelds dazu, dass sich Größe und Inhalt des Textfelds ändern, was zu einem Umfließen führt. Gleichzeitig führt eine Änderung des Erscheinungsbilds des Textfelds auch zu einer Neuzeichnung.
Zusammenfassend lässt sich sagen, dass Neuzeichnen und Reflow zwei wichtige Konzepte beim Rendern von Webseiten sind. Beim Neuzeichnen handelt es sich hauptsächlich um eine Änderung des Erscheinungsbilds eines Elements, während es beim Reflow um eine Änderung des Layouts eines Elements geht. Während des Rendering-Prozesses sind die Kosten für das Neuzeichnen und Umfließen unterschiedlich und müssen von Fall zu Fall abgewogen werden. Beim Schreiben von Webseitencode können Sie durch angemessenes Layoutdesign und Codeoptimierung die Neuzeichnungs- und Reflow-Vorgänge der Webseite reduzieren und so die Renderleistung der Webseite verbessern.
Referenzen:
- https://developers.google.com/web/fundamentals/performance/rendering#css
- https://developers.google.com/web/fundamentals/performance/rendering/avoid-large - komplexe-Layouts-und-Layout-Thrashing
Das obige ist der detaillierte Inhalt vonWer dominiert Redraw und Reflow in der Rendering-Phase?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1374
52
So rendern Sie eine orthogonale Draufsicht in Kujiale_Tutorial zum Rendern einer orthogonalen Draufsicht in Kujiale
Apr 02, 2024 pm 01:10 PM
1. Öffnen Sie zunächst den Entwurfsplan, der in Kujiale gerendert werden soll. 2. Öffnen Sie dann das Rendering der Draufsicht im Rendering-Menü. 3. Klicken Sie dann in den Parametereinstellungen in der Renderoberfläche der Draufsicht auf Orthogonal. 4. Klicken Sie abschließend nach dem Anpassen des Modellwinkels auf Jetzt rendern, um die orthogonale Draufsicht zu rendern.
Ist Ace Racing Post-Holiday-Syndrom: Die wirklich erfahrenen Fahrer haben bereits begonnen, sich auf das Laternenfest vorzubereiten
Feb 21, 2024 pm 06:04 PM
Das Laternenfest steht vor der Tür. Ace Racing hat speziell für alle eine Rätselrate-Aktivität vorbereitet. Wenn Sie die Rätsel erraten und 6 Fragen richtig beantworten, können Sie eine Goldmünzen-Belohnung erhalten können auch großzügige Belohnungen erhalten. Spezifische Details Werfen wir einen Blick auf die Details dieser Veranstaltung. Ist Ace Racing Post-Holiday-Syndrom: Die wirklich erfahrenen Fahrer haben bereits begonnen, sich auf das Laternenfest vorzubereiten. Hallo, liebe Fahrer, sie alle sagen, dass das Frühlingsfest erst nach dem Laternenfest zu Ende ist. Essen Sie Klebreisbällchen und zünden Sie ein Feuerwerk ... das Festival of Speed ist überall. In der festlichen und lebhaften Atmosphäre des Festivals hat Xili auch einige interessante Laternenrätsel vorbereitet, die „nur wirklich erfahrene Fahrer“ für jedermann zugänglich sind Machen Sie sich im Voraus warm. Lassen Sie uns gemeinsam raten. (PS: Fahrer können zum heutigen öffentlichen Account-Tweet gehen, um die Antwort zu sehen!) Wie wäre es, Fahrer?
„Collapsed Star Railroad' Mikhail Wo gehst du hin Erfolgsführer
May 09, 2024 pm 09:20 PM
Einklappen Star Railroad Wohin gehst du? Mikhail-Erfolgsführer. Mit dem Update auf Version 2.2 von Honkai Dome Railway können viele neue Inhalte im Spiel erlebt werden. Ich glaube, dass viele Freunde beim Abschluss des Erfolgs „Wohin gehst du, Mikhail?“ auf einige Schwierigkeiten gestoßen sind Ich weiß nicht, wie ich es abschließen soll, deshalb werde ich Sie heute durch den detaillierten Prozess führen. Leitfaden zur eingestürzten Star Railroad Wohin gehst du? Mikhail 1. Als wir die Fähigkeiten der Tongtun-Pioniere übernahmen und die Krise in Sinoconni lösten, beruhigte sich alles und wir kehrten zum Gipfel des Flowing Dream Reef zurück das Bild unten; 2. Nachdem Sie es erreicht haben, schauen Sie sich Mikhail noch einmal an und untersuchen Sie den Balkon vor ihm. 3. Nachdem Sie die Untersuchung abgeschlossen haben, können Sie den Erfolg Mikhail erhalten
„Let's Go Muffin' startet eine neue Verknüpfung und die PV im Welpenstil der Linie wird angekündigt
Apr 28, 2024 pm 04:46 PM
Gute Nachrichten! Das von Xindong entwickelte heilsame Abenteuerspiel „Let's Go, Muffin“ wurde offiziell angekündigt – das Spiel wird am 15. Mai eine öffentliche Beta des nationalen Servers starten! Der Server wird auch am Tag der öffentlichen Beta gestartet. In Zusammenarbeit mit zwei IPs hat Maifen offiziell den Slogan „Puppy auch mit Weizen, glücklich, Hallo zu sagen!“ ins Leben gerufen und sich mit der beliebten IP „Line Line Puppy“ zusammengetan Um diese Verknüpfung zu begrüßen, wurde von Line Puppy auch speziell eine Verknüpfungs-PV erstellt, die den einfachen Stil eines Welpen mit Linien verwendet. Wir können das Wildmaskottchen Muffin, den niedlichen weißen Malteser und den kleinen Golden Retriever dabei beobachten, wie sie sich in der Welt der Linienmuffins vergnügen. Sie fuhren im Wohnmobil herum, durchquerten die Schichten der Liebe, benutzten Regenbögen als Rutschen, gingen zum Tanzen an den Strand und besiegten mitten in der Nacht den gruseligen schwarzen Schatten.
Ist Android 12 flüssiger als Android 11? „Leistungsvergleich zwischen dem neuesten Android 12 und Android 11'
Feb 07, 2024 am 08:13 AM
Android 12 ist ein brandneues System, das am 19. Mai 2021 von Google veröffentlicht wurde. Es ist die offizielle Version von Android 11 und gleichzeitig die neueste Version des aktuellen Android-Systems. Alle großen inländischen Mobiltelefonhersteller werden ab Ende 2021 größere Versionen herausbringen Dieses Jahr bis Anfang nächsten Jahres werden große Versionsaktualisierungen auf Basis von Android 12 durchgeführt. Beispielsweise wurde bestätigt, dass das kommende MIUI 13 auf Android 12 basiert (einige Low-End-Modelle basieren auf Android 11). Welche Verbesserungen wird Android 12 im Vergleich zu Android 11 bringen? Welche Änderungen gibt es für normale Benutzer? Lassen Sie uns in diesem Artikel darüber sprechen. 01. Änderungen an der Benutzeroberfläche. Intensität der Nutzerwahrnehmung: Die Wahrnehmung der inländischen Nutzer ist relativ gering. Eine der größten Verbesserungen in Android 12 kommt vom UI-Design, da wir sie in unserem Land jedoch möglicherweise selten sehen
Wie kann das Douyin-Verkehrslimit gelöst werden? Was soll ich tun, wenn der Verkehr begrenzt ist, sodass er zurückfließen kann?
Mar 22, 2024 am 09:00 AM
Mit der Popularität von Douyin nehmen auch die Probleme, mit denen Benutzer häufig konfrontiert sind, allmählich zu. Am besorgniserregendsten ist das Problem der Verkehrsbeschränkung von Douyin. Die Verkehrsbeschränkung von Douyin kann zu einer erheblichen Verringerung der Anzahl der Aufrufe, Likes und Kommentare zu den Videos der Nutzer führen und sich dadurch auf das Einkommen und die Bekanntheitsmöglichkeiten der Nutzer auswirken. 1. Wie kann das Verkehrslimit von Douyin gelöst werden? 1. Verbessern Sie die Qualität der Inhalte. Die zentrale Wettbewerbsfähigkeit von Douyin liegt im Inhalt. Nur qualitativ hochwertige Inhalte können mehr Benutzer anziehen. Daher ist die Verbesserung der Inhaltsqualität der Schlüssel zur Lösung des aktuellen Einschränkungsproblems von Douyin. Schöpfer müssen sich auf Content-Innovation konzentrieren, Benutzer mit einzigartigen Perspektiven und Kreativität anlocken und gleichzeitig sicherstellen, dass die Inhalte interessant, lehrreich und praktisch sind. Nur so kann die User Experience kontinuierlich verbessert und die User Stickiness erhöht werden. 2. Passen Sie die Veröffentlichungszeit an. Die Verkehrsverteilung von Douyin hat ein Zeitmuster.
Der Computer, für dessen Zusammenbau ich 300 Yuan ausgegeben habe, lief erfolgreich durch das lokale Großmodell
Apr 12, 2024 am 08:07 AM
Wenn 2023 als das erste Jahr der KI anerkannt wird, dann dürfte 2024 ein Schlüsseljahr für die Popularisierung großer KI-Modelle sein. Im vergangenen Jahr sind zahlreiche große KI-Modelle und zahlreiche KI-Anwendungen entstanden. Hersteller wie Meta und Google haben auch damit begonnen, ihre eigenen großen Online-/Lokalmodelle der Öffentlichkeit zugänglich zu machen, ähnlich der „KI-künstlichen Intelligenz“. " Das ist unerreichbar. Das Konzept kam plötzlich zu den Menschen. Heutzutage sind Menschen in ihrem Leben zunehmend künstlicher Intelligenz ausgesetzt. Wenn Sie genau hinschauen, werden Sie feststellen, dass fast alle der verschiedenen KI-Anwendungen, auf die Sie Zugriff haben, in der „Cloud“ bereitgestellt werden. Wenn Sie ein Gerät bauen möchten, mit dem große Modelle lokal ausgeführt werden können, ist die Hardware ein brandneuer AIPC mit einem Preis von mehr als 5.000 Yuan. Für normale Leute.
Dogelon Mars价格预测2024-2030
Mar 22, 2024 pm 03:33 PM
ELON 在 2023 年达到 0.0000005196 美元的峰值，此后一直在下跌。我们的 Dogelon Mars 价格预测估计到 2024 年底的价格为 $0.0000001409。根据我们 2025 年 Dogelon Mars 的价格预测，ELON 的交易价格为 0.0000004709 美元。
