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
Lösung für das HTML-Kodierungsproblem in IE6, das zu JS-Fehlern und nicht angewendetem CSS führt
Im Test wurde festgestellt, dass wenn die Seitende...
Detaillierte Erklärung einiger Einstellungen für Tabellenanpassung und Überlauf
1. Zwei Eigenschaften des Tabellen-Resets: ①borde...
Einführung in /etc/my.cnf-Parameter in MySQL 5.7
Nachfolgend finden Sie einige allgemeine Paramete...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27
Detailliertes Download-, Installations- und Konfi...
JavaScript ist unzuverlässig undefiniert
undefined Wenn wir in JavaScript feststellen möch...
So kennzeichnen Sie die Quelle und Herkunft von CSS3-Zitaten
Wegen der Epidemie werde ich zu Hause fast schimm...
Der Unterschied zwischen den vier Dateierweiterungen .html, .htm, .shtml und .shtm
Viele Freunde, die gerade angefangen haben, Websei...
MySQL-Methode zur Sperrensteuerung für Parallelität
Inhaltsverzeichnis Vorwort 1. Optimistisches Sper...
Einfache Implementierung von Mini-Vue-Rendering
Inhaltsverzeichnis Vorwort Ziel Erster Schritt: S...
So erstellen Sie mit CSS eine Bildlaufleiste mit fester Navigation und Links- und Rechtsverschiebung
Wie oben gezeigt ist die Navigation oben fixiert ...
MySql-Entwicklung einer automatischen Synchronisierungstabellenstruktur
Schwachstellen bei der Entwicklung Während des En...
Implementierung interaktiver Daten zwischen QT und Javascript
1. Daten fließen von QT zu JS 1. QT ruft die JS-F...
Die perfekte Lösung für den Fehler bei der Installation von Mysql Applying Security in Windows Server 2014
Der Grund liegt darin, dass es nach der Installat...
HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
Inhaltsverzeichnis erreichen: Zusammenfassen: Daz...
3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag
Methode 1 Code kopieren Der Code lautet wie folgt:...