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

目录
相关文章
|
3天前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(12)连线(Link)
本文介绍了Twaver HTML5中的连线(Link)元素,包括设置起始和结束节点的方法,以及如何管理和操作多个连线。通过示例代码展示了如何在React组件中创建和管理Link,包括设置连线颜色和标签偏移量。
12 2
Twaver-HTML5基础学习(12)连线(Link)
|
1月前
|
前端开发 JavaScript C++
揭秘Web前端CSS引入秘籍:Link vs @import,你的选择决定页面加载速度,你选对了吗?
【8月更文挑战第26天】本文探讨了Web前端开发中CSS的引用方法,主要包括行内样式、内部样式表及外部样式表三种形式。重点对比了外部样式表中的`&lt;link&gt;`和`@import`两种引入方式。`&lt;link&gt;`作为HTML元素,在页面加载初期就开始加载样式资源,支持并行加载,对提高页面加载速度有益。而`@import`作为一种CSS规则,仅能在CSS文件中使用,其引入的样式表会在页面完成加载后才开始加载,可能导致渲染延迟且不支持并行加载。因此,在多数情况下,推荐采用`&lt;link&gt;`方式引入外部样式表,以确保更佳的性能表现和浏览器兼容性。
64 2
|
2天前
|
前端开发
Twaver-HTML5基础学习(34)Link显示流动效果
本文介绍了如何在Twaver-HTML5中为Link添加流动效果,通过设置流动颜色、模式等来实现动态视觉效果。
12 3
Twaver-HTML5基础学习(34)Link显示流动效果
|
2月前
|
前端开发 索引 Python
技术心得:xpath、CSS定位方法
技术心得:xpath、CSS定位方法
22 0
|
Web App开发 前端开发 安全
CSS学习完整篇
CSS 的主要使用场景就是美化网页,布局页面。 (1)HTML的局限性 他只关注内容的语义。 比如 <h1> 表明这是一个大标题,<p> 表明这是一个段落,<img> 表明这儿有一个图片,<a> 表示此处有链接。 HTML 可以做简单的样式,但是很臃肿和繁琐…… (2)CSS美化网页 CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称. 有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言,主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样
401 0
CSS学习完整篇
|
定位技术
Selenium成长之路-09简单对象定位之link text方法
Selenium成长之路-09简单对象定位之link text方法
261 0
Selenium成长之路-09简单对象定位之link text方法
|
前端开发 容器
奇妙的 CSS MASK
奇妙的 CSS MASK
128 0
奇妙的 CSS MASK
|
前端开发
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
104 0
奇妙的html 和 Css【关于html、Css 开发中重要的细节和一些小奇怪现象】
|
Web App开发 前端开发
Hammer.js分析(一)——基础结构
从github上面将源码下载下来,会发现有个src文件夹。当前版本是2.0.6。
Hammer.js分析(一)——基础结构
link 引入时 rel的作用
1. alternate 链接到该文档的替代版本(比如打印页、翻译或镜像)   2. author 链接到该文档的作者、   3.
1089 0