空相对路径对网页页面特性危害的处理计划方案

2021-03-22 01:41 jianzhan

前几日在 Google Reader 中看到玉伯blog的共享——空相对路径对网页页面特性的危害。的确,在写 CSS 的情况下,用 background:url(#) 還是会对网页页面开展多1次恳求的。

但是,由于写多 CSS,1般必须用空情况来处理 bug 的情况下,检测結果用 background:url(about:blank) 才是大家要想的:解 bug,不危害特性。那很简易,处理计划方案不就不出来?这些,让大家来做个检测吧。
检测编码:

拷贝编码
编码以下:

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf⑻" />
<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>1、推送恳求:</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>2、一部分推送恳求:</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>&lt;iframe /&gt;</code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li>
</ol>
<h3>2、不推送恳求:</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>&lt;script /&gt;</code> <script type="text/javascript" src="javascript:''"></script></li>
<li><code>&lt;iframe /&gt;</code><iframe src="javascript:''" frameborder="0" height="15"></iframe></li>
</ol>
</body>
</html>

懒得截图了,自身自主搞搞吧,访问結果早已把大概的都写在检测网页页面到了。最后的处理计划方案是:

胆大应用 about:blank 来替代空,或‘#’,非常是在 background-image 中应用
在 img / script / iframe 这些强烈推荐应用 javascript:” 来处理难题
别的更好的方法?这个检测結果有难题?随时欢迎出示、纠正。感谢。