图像,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

目录
相关文章
|
30天前
|
存储 算法 数据挖掘
3D-Speaker说话人任务的开源项目问题之生成Must-Link和Cannot-Link的成对约束的问题如何解决
3D-Speaker说话人任务的开源项目问题之生成Must-Link和Cannot-Link的成对约束的问题如何解决
|
移动开发 前端开发 JavaScript
【前端每日一问001】HTML中script标签应该写在哪个位置
【前端每日一问001】HTML中script标签应该写在哪个位置
423 0
|
前端开发 JavaScript 容器
通俗重制系列--CSS基础
通俗重制系列--CSS基础
123 0
|
前端开发 容器
【HTML + CSS】模仿腾讯云页面——细节优化
【HTML + CSS】模仿腾讯云页面——细节优化
140 0
【HTML + CSS】模仿腾讯云页面——细节优化
|
前端开发 容器
奇妙的 CSS MASK
奇妙的 CSS MASK
124 0
奇妙的 CSS MASK
|
前端开发
CSS 奇思妙想 | Single Div 绘图技巧
CSS 奇思妙想 | Single Div 绘图技巧
121 0
CSS 奇思妙想 | Single Div 绘图技巧
|
前端开发
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
102 0
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
|
Web App开发 JavaScript 前端开发