前端开发人员估计很多人都不清楚这些标签的空地址会带来哪些让人意想不到的问题。包括我,很长一段时间都认为这是无伤大雅的事情,直到有一次遇到莫名其妙的问题,下面会拿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

图像,script,link 空地址带来的困惑的更多相关文章

  1. JS动态引入js,CSS——动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...

  2. JS动态引入js、CSS动态创建script/link/style标签

    一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...

  3. 为什么ASCII是7位(导致各家编码的128~256字符都不同,给我带来很多困惑)——在标准ASCII中,其最高位(b7)用作奇偶校验位,附ASCII每个控制符的中文解释

    ASCII编码 ASCII是基于拉丁字母的一套电脑编码系统.它主要用于显示现代英语和其他西欧语言.它是现今最通用的单字节编码系统,并等同于国际标准ISO/IEC 646. 请注意,ASCII是Amer ...

  4. 将ant Design本地化,可通过link以及script直接引入html中使用

    一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...

  5. 实现图像剪裁 jquery.Jcrop

       配合 jquery.Jcrop 实现上传图片进行剪裁保存功能    <script src="js/jquery.min.js"></script> ...

  6. [技术翻译]预加载响应式图像,从Chrome 73开始实现

    本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...

  7. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

  8. jQuery 图像裁剪插件Jcrop

    ,    // 设置框的最大宽度          setSelect: [ 175, 100, 400, 300 ]        });                $('#text-input ...

  9. html/css基础篇——link和@inport详解以及脚本执行顺序探讨

    先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...

随机推荐

  1. 【Linux】touch命令

    用途 touch命令参数可更改文档或目录的日期时间,包括存取时间和更改时间. 全称 touch全称即为touch 参数 -a   :或--time=atime或--time=access或--time ...

  2. java反射--动态加载

    Class.forName("类的全称") 1)不仅表示类的类类型,还表示了动态加载类 2)请区分编译,运行 3)编译时刻加载类是静态加载类,运行时刻加载类是动态加载类 比如下面: ...

  3. 【小程序】微信小程序之地图功能

    转载请注明出处:http://blog.csdn.net/crazy1235/article/details/55004841 基本使用 地图组件使用起来也很简单. .wxml <map id= ...

  4. sql2008拒绝了对对象 (数据库 ,架构'dbo')的SELECT权限

    连接sql2008的时候,出现了这种一直报权限错误:错误截图如下: 所见效果描述:在windows身份验证的 情况下登陆进去数据库的表都是可以打开的,当换到sa或者别的账号登陆进去的时候这个时候我们点 ...

  5. C# Debug

    语法.IDE环境使用.Debug方法是学习一门语言的最少必须技能,本文总结C#中的最常用调试方法 一. 断点 如下图所示在欲插入断点的地方右键>断点>插入断点(或在行号左边点击)可在选中语 ...

  6. ui-router(三)controller与template

    这篇就是在以前的基础上,把客户端angular.js 负责的部分整体串起来演示一下. 我们按照angular执行顺序来做前提准备: (1)Client 根目录下 index.html 首先加载angu ...

  7. 飘逸的python - ord和chr以及unichr

    ord是unicode ordinal的缩写,即编号 chr是character的缩写,即字符 ord和chr是互相相应转换的. 可是因为chr局限于ascii,长度仅仅有256. 于是又多了个uni ...

  8. php检测iis环境是否支持htaccess

    php检测iis环境是否支持htaccess的方法. modrewrite.php <?php echo "mod_rewrite works"; ?> open_me ...

  9. MySQL 5.7 双主复制+keepalived,常规业务一般够用了

    业务需求: 为Zabbix搭建2个数据库,一个库给服务器监控用,一个库给网络监控用. 硬件: 两台服务器,硬盘是1.2 T SSD卡,内存128G 架构: 希望做双主复制+keepalived,架构大 ...

  10. UITableView__cell 距tableview顶端有间距

    UITableView__cell 距tableview顶端有间距     如何去掉这个间距呢?解决方法如下: //top 为cell距顶端的间距 (一般为负值) self.formTable.con ...