空路徑對頁面性能影響的解決方案
發(fā)布時間：2011-10-30 22:05:54 作者：佚名 
我要評論
我要評論前幾天在 Google Reader 中看到玉伯博客的分享——空路徑對頁面性能的影響。確實，在寫 CSS 的時候，用 background:url(#) 還是會對頁面進行多一次請求的
前幾天在 Google Reader 中看到玉伯博客的分享——空路徑對頁面性能的影響。確實，在寫 CSS 的時候，用 background:url(#) 還是會對頁面進行多一次請求的。
不過，因為寫多 CSS，一般需要用空背景來解決 bug 的時候，測試結(jié)果用 background:url(about:blank) 才是我們想要的：解 bug，不影響性能。那很簡單，解決方案不就不出來？等等，讓我們來做個測試吧。
測試代碼:
復制代碼
代碼如下:<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<title>empty src</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>
<body>
<h3>一、發(fā)送請求：</h3>
<p>瀏覽器：<code>All</code>, 像 <code>chrome</code> 等部分瀏覽器，<code>hash(#)</code> 和空都只請求本路徑</p>
<ol>
<li><img src="" alt="empty image src"/></li>
<li><div style="background:url(#background)">背景圖片使用 <code>background:url(#)</code> 也是發(fā)送請求的</div></li>
<li><img src="#image" alt="image src using hash(#)"></li>
<li><img src="http://www.apple.com/favicon.ico" /></li>
</ol>
<h3>二、部分發(fā)送請求：</h3>
<p>瀏覽器（延時非常?。?lt;code>safari</code>, <code>chrome(多個 about:blank 會多次發(fā)送多次請求)</code></p>
<cite>使用 <code>about:blank</code></cite>
<ol>
<li><img src="about:blank" alt="empty image src"/></li>
<li><div style="background:url(about:blank)">hello world</div></li>
<li><code><iframe /></code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li>
</ol>
<h3>二、不發(fā)送請求：</h3>
<p>瀏覽器：<code>all</code>, <code>chrome(延時無效，相當于不發(fā)送請求)</code></p>
<cite>使用 <code>javascript:''</code></cite>
<ol>
<li><img src="javascript:''" alt="empty image 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>
懶得截圖了，自己自行搞搞吧，瀏覽結(jié)果已經(jīng)把大致的都寫在測試頁面上了。最終的解決方案是：
大膽使用 about:blank 來代替空，或者‘＃’，特別是在 background-image 中使用
在 img / script / iframe 這些推薦使用 javascript:” 來解決問題
其他更好的辦法？這個測試結(jié)果有問題？隨時歡迎提供、指正。謝謝。
相關(guān)文章
HTML相對路徑(Relative Path)和絕對路徑(Absolute Path)深入理解
web應(yīng)用程序功能強大就在于它的超鏈接（Hyper Link），比如在a頁面保存指向b頁面的鏈接地址（也就是URI），但問題就恰恰出在了這里，如何正確引用一個文件。比如，怎樣在一2012-12-21- 做個開發(fā)的人，對于文件或者文件夾的定義都是有一定的規(guī)范的，比如建立一個網(wǎng)站前端設(shè)計，要建立的文件夾有css,js，images,swf等等2012-10-12
- 在CSS中有用url語法來指定background-image或是其他引用文件中2011-07-22
- 在CSS中有用url語法來指定background-image或是其他引用文件中2011-07-10
- 如何表示上級目錄 ../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。 假設(shè)info.html路徑是：c:Inetpubwwwrootsitesblablainfo.html2009-06-16
- HTML初學者會經(jīng)常遇到這樣一個問題，如何正確引用一個文件。比如，怎樣在一個HTML網(wǎng)頁中引用另外一個HTML網(wǎng)頁作為超鏈接(hyperlink)？怎樣在一個網(wǎng)頁中插入一張圖片 如果2009-04-23
- css中加背景圖片根據(jù)圖片及css文件的相對位置分一下幾種類型1.同包下2.不同包，接下來針對這兩種情況做一下介紹，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-11