图像,script,link 空地址带来的困惑
前端开发人员估计很多人都不清楚这些标签的空地址会带来哪些让人意想不到的问题。包括我,很长一段时间都认为这是无伤大雅的事情,直到有一次遇到莫名其妙的问题,下面会拿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 空地址带来的困惑的更多相关文章
- JS动态引入js,CSS——动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. 二.动态创建style方式 但是,这样的话,需要加载整个css文件,但是那样有可能浪费一个http请求并占用一个服务器请求数,并等 ...
- JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.create ...
- 为什么ASCII是7位(导致各家编码的128~256字符都不同,给我带来很多困惑)——在标准ASCII中,其最高位(b7)用作奇偶校验位,附ASCII每个控制符的中文解释
ASCII编码 ASCII是基于拉丁字母的一套电脑编码系统.它主要用于显示现代英语和其他西欧语言.它是现今最通用的单字节编码系统,并等同于国际标准ISO/IEC 646. 请注意,ASCII是Amer ...
- 将ant Design本地化,可通过link以及script直接引入html中使用
一直想着能本地化antd的,不用npm以及dva那么复杂的配置环境来开发,并且本地化以后对以后链接flask的模板渲染机制也能很好的结合.下面是具体的实现方法: 1.将react的相关链接引入: &l ...
- 实现图像剪裁 jquery.Jcrop
配合 jquery.Jcrop 实现上传图片进行剪裁保存功能 <script src="js/jquery.min.js"></script> ...
- [技术翻译]预加载响应式图像,从Chrome 73开始实现
本次预计翻译三篇文章如下: 01.[译]9个可以让你在2020年成为前端专家的项目 02.[译]预加载响应式图像,从Chrome 73开始实现 03.[译]您应该知道的13个有用的JavaScript ...
- 通过link的preload进行内容预加载
Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...
- jQuery 图像裁剪插件Jcrop
, // 设置框的最大宽度 setSelect: [ 175, 100, 400, 300 ] }); $('#text-input ...
- html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...
随机推荐
- (四)hibernate关联映射之——一对多映射
0. 映射分四种类型: 一对多 多对一 一对一 多对多 前两者最常用 1.单向一对多关联 1.1 如何在JAVA和数据库中表示一对多的关系. 2.多对一关联 以学生对应班级来解释 步骤(1)创建 ...
- ios开发-Object-C可变参数函数
简介 一个可变参数函数是指一个函数拥有不定的参数,即为一个函数可接收多个参数.有时我们会遇到一些算术问题需要用到,比如是计算传入参数的总和,字符串的连接或是其它操作过程,我们在 OC 里也经常使用,最 ...
- bzoj-4003 城池攻占
题意: 给出一个n个结点的有根树,和m个骑士: 树上的结点--城池有一个防御值,骑士有一个战斗力: 当骑士的战斗力大于等于城池时,城池被攻破.骑士的战斗力变化,并向树上的父节点前进: 否则骑士死亡. ...
- EntityFramework Data Annotations
详细的实体映射介绍(Data Annotation) http://msdn.microsoft.com/en-us/data/jj591583
- RFID UHF(EPC)标签使用常识
文章复制来的,原作者原文点击这里 现在做UHF应用的越来越多了,如何根据实际应用设计系统以达到更佳的使用效果,其中对UHF标签相关内容的了解至关重要,很多朋友对标签的了解不多,在此不才,整理了一些资料 ...
- GridControl摘录
gvCabTotalInfo.Columns["出线平均<br>电压"].SummaryItem.SummaryType = DevExpress.Data.Summa ...
- Android系统应用信息中存储和缓存的计算方法
进行例如以下操作: 设置->应用->选择一个应用->应用信息 会到达例如以下界面: 能够看到这个应用占用的磁盘空间. 先说结果,这几项会计算哪些文件(夹). 1.应用,由三项相加组成 ...
- Atitit.获取验证码图片通过web
Atitit.获取验证码图片通过web 1. WebRequest进行较为底层的访问(不推荐) 1 2. WebBrowser截图 1 3. 剪贴板复制法Clipboard(推荐) 1 4. C# 取 ...
- atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js
atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要 ...
- Struts2的OGNL遍历数组、List、简单的Map
一.简介 <s:iterator />可以遍历 数据栈里面的任何数组,集合等等 在使用这个标签的时候有三个属性值得我们关注 1. value属性:可选的属性,value属性是指一 ...