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
So erhalten Sie den Maximal- oder Minimalwert einer Zeile in SQL
Originaldaten und Zieldaten SQL-Anweisungen imple...
Beispielskript für inkrementelle MySQL-Sicherungs- und Breakpoint-Wiederherstellung
Einführung Inkrementelles Backup bedeutet, dass n...
Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten
#String-Verkettung concat(s1,s2); verkette die St...
Detaillierte Erklärung zur Verwendung relativer Pfade in HTML, um Dateien auf allen Verzeichnisebenen abzurufen
Das Konzept des relativen Pfades Verwenden Sie de...
Implementierung einer einfachen Web-Uhr mit JavaScript
Verwenden Sie JavaScript, um eine Webseitenuhr zu...
Vue implementiert Tab-Beschriftung (Beschriftung übertrifft automatisches Scrollen)
Wenn die erstellte Registerkartenbeschriftung den...
Zusammenfassung der mit dem Abfangen von MySQL-Zeichenfolgen verbundenen Funktionen
In diesem Artikel werden MySQL-Funktionen zum Abf...
Grundlegende Verwendung von exists, in und any in MySQL
【1】existiert Verwenden Sie eine Schleife, um die ...
Beispielcode für den Anzeigeeffekt zum Schütteln und Vergrößern von JS-Albumbildern
Im vorherigen Artikel wurde erläutert, wie Sie mi...
Fünf Verzögerungsmethoden für die MySQL-Zeitblindinjektion
Fünf Verzögerungsmethoden für die MySQL-Zeitblind...
So überwachen Sie Tomcat mit LambdaProbe
Einführung: Lambda Probe (früher bekannt als Tomc...
Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle
Ich habe zwei Jahre lang im Betrieb und in der Wa...
Was ist SSH-Portweiterleitung? Was nützt das?
Inhaltsverzeichnis Vorwort 1. Lokale Portweiterle...
JavaScript implementiert Tab-Leisten-Umschalteffekte
Hier ist ein Fall, den Frontend-Entwickler kennen...
So ändern Sie den Speicherort von Datendateien in CentOS6.7 mysql5.6.33
Problem: Die Partition, in der MySQL Datendateien...