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
MySQL 1130-Ausnahme, Remote-Anmeldung nicht möglich – Lösung
Inhaltsverzeichnis Frage: 1. Aktivieren Sie die B...
Was tun, wenn Sie das ursprüngliche Passwort für MySQL auf dem MAC vergessen?
Die Lösung zum Vergessen des ursprünglichen MySQL...
NULL und leere Zeichenfolge in MySQL
Ich bin vor kurzem mit MySQL in Berührung gekomme...
Beispiel für die Einrichtung und Verwendung des HTML-Floating-Frames (Iframe lädt HTML)
Code kopieren Der Code lautet wie folgt: <!DOC...
Auf den Alibaba Cloud Server Tomcat kann nicht zugegriffen werden
Inhaltsverzeichnis 1. Einleitung 2. Lösung 2.1 Ko...
Beispielanalyse der von MySQL 5.7 generierten Spaltennutzung
Dieser Artikel veranschaulicht anhand von Beispie...
So zählen Sie das Datum mit Bash herunter
Sie möchten wissen, wie viele Tage es bis zu eine...
Vue öffnet ein neues Fenster und implementiert ein grafisches Beispiel für die Parameterübergabe
Die Funktion, die ich erreichen möchte, besteht d...
Webdesign-Tutorial (1): Schritte und Gesamtlayout
<br /> Hinweis: Alle Texte, mit Ausnahme der...
Designperspektive Technologie ist ein wichtiges Kapital der Designfähigkeit
Ein Designsoldat fragte: „Kann ich nur reines Des...
Detaillierte Erklärung der React-Ereignisbindung
1. Was ist In react Anwendungen werden Ereignisna...
Die Verknüpfungsmethode zwischen Menü und Registerkarte von vue+iview
Vue+iview-Menü und Tab-Verknüpfung Ich entwickle ...
HTML-Code zum Hinzufügen von Symbolen zum transparenten Eingabefeld
Ich habe vor Kurzem eine Website mit Anwaltsempfe...
Dynamische Vue-Komponente
Inhaltsverzeichnis 1. Komponente 2. Keep-Alive-Mo...
So verbessern Sie die MySQL Limit-Abfrageleistung
Bei MySQL-Datenbankoperationen hoffen wir immer, ...