图像,script,link 空地址带来的困惑

简介: 前端开发人员估计很多人都不清楚这些标签的空地址会带来哪些让人意想不到的问题。包括我,很长一段时间都认为这是无伤大雅的事情,直到有一次遇到莫名其妙的问题,下面会拿image来详细介绍(其他类似)。 下面是两种空src的image对象写法: --------------------------------------- var img = new Image(); img.

前端开发人员估计很多人都不清楚这些标签的空地址会带来哪些让人意想不到的问题。包括我,很长一段时间都认为这是无伤大雅的事情,直到有一次遇到莫名其妙的问题,下面会拿image来详细介绍(其他类似)。

下面是两种空src的image对象写法:

<img src="" /> 
---------------------------------------
var img = new Image();
img.src = '';

会带来哪些问题呢?

1 造成垃圾请求

  不是空的src就不请求服务器资源了,事实是浏览器依然会为该对象请求一次服务器,只不过是ie请求的是当前目录,chrome和safari请求的当前页的ur。当然这个问题最新版本的一些浏览器已经解决了,就算遇到空src的image对象也不会请求服务器了。可是并不是所有的人都是用最新版本的浏览器。

  由上可见,大量的空src标签将对网站造成恐怖的影响:大量无用的空并发(刷流量吗。。。。),你懂得。当然如果你正在搞一个活动,准备抗住10倍~20倍流量,那么检查下空的请求地址是有用的。

2 破坏cookie数据

  这才是真正要讲的重点。也许你的网站上用cookie或者其他方式存放了用户数据,你要小心了,如果你的服务器端会根据每次请求变更这些数据,那么一个空的请求很有可能会破坏掉你的数据。真实很悲催的一件事情,话说作者当初。。。。哎 一言难尽。

 

或许有些兄弟想,哪有那么恐怖,谁会没事写那么多空image。可是很多情况下都是你不经意间造成的。比如你的服务器端代码给image直接赋值(可能是空值),比如你用了一个延迟加载控件(src可能是空)。。。太多各种你意想不到的事情会造成空请求。就算你的cookie数据不会被破坏(恭喜你好运),但是对于大流量高并发的页面来说也可能是灾难性质的,并且会影响你的流量分析。

所以,尽量避免空的image请求吧。对于一些控件要求的,你可以用一些统一的小的占位图,对于一些不可预见的你可以再服务器端做一些请求判断。

 

参考资料:Empty image src can destroy your site

目录
相关文章
|
4月前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
46 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
5月前
|
前端开发
纯 CSS 实现十个还不错的 Loading 效果,可直接用!
纯 CSS 实现十个还不错的 Loading 效果,可直接用!
|
6月前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
72 0
|
前端开发 容器
CSS补充
CSS补充
136 0
|
前端开发 容器
奇妙的 CSS MASK
奇妙的 CSS MASK
154 0
奇妙的 CSS MASK
|
前端开发
CSS 奇思妙想 | Single Div 绘图技巧
CSS 奇思妙想 | Single Div 绘图技巧
137 0
CSS 奇思妙想 | Single Div 绘图技巧
|
前端开发
纯 CSS 实现十个还不错的 Loading 效果
在推特上面看到 T. Afif 介绍的十个 Loading 效果。如上图。
纯 CSS 实现十个还不错的 Loading 效果
|
前端开发 JavaScript 开发者
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景
CSS3 中关于 *-of-type 和 *-child的差异性及适用场景