Lösung für die Auswirkungen leerer Pfade auf die Seitenleistung
|
Vor ein paar Tagen habe ich einen von Yu Bo geteilten Beitrag auf Google Reader gesehen – die Auswirkungen leerer Pfade auf die Seitenleistung. Tatsächlich führt die Verwendung von background:url(#) beim Schreiben von CSS immer noch zu einer zusätzlichen Anfrage an die Seite.
Da wir jedoch viel CSS schreiben, müssen wir normalerweise einen leeren Hintergrund verwenden, um Fehler zu beheben. Die Testergebnisse zeigen, dass die Verwendung von background:url(about:blank) genau das ist, was wir wollen: Fehlerbehebung ohne Leistungseinbußen. Das ist einfach, gibt es keine Lösung? Warte, lass uns einen Test machen. Code kopieren Der Code lautet wie folgt:<!DOCTYPE html> <html lang=""> <Kopf> <meta charset="utf-8" /> <title>leere Quelle</title> <style>body{font-family:courier, 'courier new';}code{background:#f7f7f7;border:1px solid #ddd;padding:0 3px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;font-size:12px;color:#080;}p{font-size:12px;color:#999;}cite{font-size:14px;color:#c30;}</style> </Kopf> <Text> <h3>1. Senden Sie eine Anfrage:</h3> <p>Browser: <code>Alle</code>, einige Browser wie <code>Chrome</code>, <code>hash(#)</code> und empty fordern nur diesen Pfad an</p> <ol> <li><img src="" alt="leeres Bild src"/></li> <li><div style="background:url(#background)">Hintergrundbilder verwenden <code>background:url(#)</code> und senden auch eine Anfrage</div></li> <li><img src="#bild" alt="Bildquelle mit Hash(#)"></li> <li><img src="http://www.apple.com/favicon.ico" /></li> </ol> <h3>2. Teilweiser Sendeauftrag:</h3> <p>Browser (sehr kleine Verzögerung): <code>Safari</code>, <code>Chrome (mehrere about:blank senden mehrere Anfragen)</code></p> <cite>Verwenden Sie <code>about:blank</code></cite> <ol> <li><img src="about:blank" alt="leeres Bild src"/></li> <li><div style="background:url(about:blank)">Hallo Welt</div></li> <li><code><iframe /></code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li> </ol> <h3>2. Keine Anfrage senden:</h3> <p>Browser: <code>alle</code>, <code>Chrome (Verzögerung ist ungültig, entspricht dem Nichtsenden einer Anfrage)</code></p> <cite>Verwenden Sie <code>javascript:''</code></cite> <ol> <li><img src="javascript:''" alt="leeres Bild src"/></li> <li><code><script /></code> <script type="text/javascript" src="javascript:''"></script></li> <li><code><iframe /></code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li> </ol> </body> </html> Ich bin zu faul, Screenshots zu machen, also probier es einfach selbst aus. Die Browsing-Ergebnisse sind grob auf der Testseite angegeben. Die endgültige Lösung war: Verwenden Sie ruhig about:blank anstelle von Leerzeichen oder „#“, insbesondere im Hintergrundbild. In img/script/iframe wird empfohlen, javascript:" zu verwenden, um das Problem zu lösen. Gibt es eine bessere Möglichkeit? Gibt es ein Problem mit diesem Testergebnis? Sie können es uns gerne mitteilen und korrigieren. Vielen Dank. |
<<: Nginx löst Cross-Domain-Probleme und bindet Seiten von Drittanbietern ein
>>: Vergleich der JS-Array-Loop-Methode und der Effizienzanalyse
Artikel empfehlen
Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer
1. Verwenden Sie auf einem vernetzten Computer di...
Teilen Sie den Installationsdatensatz für MySql8.0.19
Im vorherigen Artikel wurde der Installationsproz...
So zeigen Sie MySQL-Links an und löschen abnormale Links
Vorwort: Während des Betriebs und der Wartung der...
Docker-Compose - Bereitstellung der chinesischen Gitlab-Version per Mausklick - Methodenschritte
1. Einführung in Gitlab Offizielle Gitlab-Adresse...
Detailliertes Tutorial zur VMware-Installation des Linux CentOS 7.7-Systems
So installieren Sie das Linux CentOS 7.7-System i...
Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver
Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...
Docker-Netzwerkprinzipien und detaillierte Analyse benutzerdefinierter Netzwerke
Docker virtualisiert eine Brücke auf dem Host-Rec...
Schritte zum Kapseln von Element-UI-Popupkomponenten
Kapseln Sie el-dialog als Komponente ein Wenn wir...
Verwenden von JavaScript-Unterschieden zum Implementieren eines Vergleichstools
Vorwort Bei der Arbeit muss ich jede Woche die vo...
Eine kurze Diskussion über benutzerdefinierte VUE-Uni-App-Komponenten
1. Übergeordnete Komponenten können Daten über Re...
Grundlegendes Verständnis und Verwendung der HTML-Auswahloption
Detaillierte Erklärung von HTML (Option auswählen)...
CSS-Stil zurücksetzen und löschen (damit verschiedene Browser den gleichen Effekt anzeigen)
Damit die Seitenanzeige in verschiedenen Browsern ...
Installieren Sie ein CentOS-System basierend auf WindowsX Hyper-V
Derzeit nutzen die meisten Linux-Benutzer entwede...
Beispiele für die Verwendung der Operatoren && und || in JavaScript
Inhaltsverzeichnis Vorwort && Operator ||...
So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein
Dieser Artikel verwendet das Centos7.6-System und...