空のパスがページのパフォーマンスに与える影響に対する解決策

数日前、Google Reader で Yu Bo さんが共有した投稿「空のパスがページのパフォーマンスに与える影響」を見ました。実際、CSS を記述するときに background:url(#) を使用すると、ページへの追加のリクエストが行われます。

ただし、CSS を大量に記述するため、通常はバグを解決するために空の背景を使用する必要があります。テスト結果から、background:url(about:blank) を使用することが、パフォーマンスに影響を与えずにバグを解決するのに望ましい方法であることがわかります。それは簡単です、解決策はないのでしょうか?ちょっと待って、テストをしてみましょう。
テストコード:

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html lang="">
<ヘッド>
<メタ文字セット="utf-8" />
<title>空のソース</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>
</head>
<本文>
<h3>1. リクエストを送信します:</h3>
<p>ブラウザ: <code>すべて</code>、<code>Chrome</code> などの一部のブラウザ、<code>hash(#)</code> および空の場合のみ、このパスが要求されます</p>
<オル>
<li><img src="" alt="空の画像 src"/></li>
<li><div style="background:url(#background)">背景画像は <code>background:url(#)</code> を使用し、リクエストも送信します</div></li>
<li><img src="#image" alt="ハッシュ(#)を使用した画像src"></li>
<li><img src="http://www.apple.com/favicon.ico" /></li>
</ol>
<h3>2. 部分送信リクエスト:</h3>
<p>ブラウザ (非常に小さな遅延): <code>Safari</code>、<code>Chrome (about:blank が複数あると複数のリクエストが送信されます)</code></p>
<cite><code>about:blank</code> を使用します</cite>
<オル>
<li><img src="about:blank" alt="空の画像 src"/></li>
<li><div style="background:url(about:blank)">こんにちは世界</div></li>
<li><code><iframe /></code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li>
</ol>
<h3>2. リクエストを送信しないでください:</h3>
<p>ブラウザ: <code>すべて</code>、<code>chrome (遅延は無効、リクエストを送信しないのと同じ)</code></p>
<cite><code>javascript:''</code> を使用してください</cite>
<オル>
<li><img src="javascript:''" alt="空の画像 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>
</本文>
</html>

スクリーンショットを撮るのが面倒なので、自分で試してみてください。テストページに閲覧結果が大まかに書かれています。最終的な解決策は次のとおりです。

特に背景画像では、空白や「#」の代わりに about:blank を自由に使用してください。img/script/iframe では、問題を解決するために javascript:" を使用することをお勧めします。他に良い方法はありますか? このテスト結果に問題はありますか? 遠慮なく提供して修正してください。ありがとうございます。

<<: MySQL シリーズ 14 MySQL 高可用性実装

>>: Nginxはクロスドメインの問題を解決し、サードパーティのページを埋め込む