空路径对页面性能影响的解决方案
发布时间：2011-10-30 22:05:54 作者：佚名 
我要评论
我要评论前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响。确实，在写 CSS 的时候，用 background:url(#) 还是会对页面进行多一次请求的
前几天在 Google Reader 中看到玉伯博客的分享——空路径对页面性能的影响。确实，在写 CSS 的时候，用 background:url(#) 还是会对页面进行多一次请求的。
不过，因为写多 CSS，一般需要用空背景来解决 bug 的时候，测试结果用 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>一、发送请求：</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> 也是发送请求的</div></li>
<li><img src="#image" alt="image src using hash(#)"></li>
<li><img src="http://www.apple.com/favicon.ico" /></li>
</ol>
<h3>二、部分发送请求：</h3>
<p>浏览器（延时非常小）：<code>safari</code>, <code>chrome(多个 about:blank 会多次发送多次请求)</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>二、不发送请求：</h3>
<p>浏览器：<code>all</code>, <code>chrome(延时无效，相当于不发送请求)</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>
懒得截图了，自己自行搞搞吧，浏览结果已经把大致的都写在测试页面上了。最终的解决方案是：
大胆使用 about:blank 来代替空，或者‘＃’，特别是在 background-image 中使用
在 img / script / iframe 这些推荐使用 javascript:” 来解决问题
其他更好的办法？这个测试结果有问题？随时欢迎提供、指正。谢谢。
相关文章
HTML相对路径(Relative Path)和绝对路径(Absolute Path)深入理解
web应用程序功能强大就在于它的超链接（Hyper Link），比如在a页面保存指向b页面的链接地址（也就是URI），但问题就恰恰出在了这里，如何正确引用一个文件。比如，怎样在一2012-12-21- 做个开发的人，对于文件或者文件夹的定义都是有一定的规范的，比如建立一个网站前端设计，要建立的文件夹有css,js，images,swf等等2012-10-12
- 在CSS中有用url语法来指定background-image或是其他引用文件中2011-07-22
- 在CSS中有用url语法来指定background-image或是其他引用文件中2011-07-10
- 如何表示上级目录 ../表示源文件所在目录的上一级目录，../../表示源文件所在目录的上上级目录，以此类推。 假设info.html路径是：c:Inetpubwwwrootsitesblablainfo.html2009-06-16
- HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片 如果2009-04-23
- css中加背景图片根据图片及css文件的相对位置分一下几种类型1.同包下2.不同包，接下来针对这两种情况做一下介绍，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-11
最新评论