background-image:url为空引发的两次请求问题
参考文章: https://blog.csdn.net/jsjhushilei/article/details/51101014
1.Nicholas 在 2009 年就开始推动各浏览器厂商,现在看起来就 IE 修复得还可以,Firefox 依旧会从本地缓存中读取一次(重复读取有可能会导致 js/css 的再次 parse + execute,浪费呀)。对于#值,则目前所有浏览器都未考虑周全。
改变代码习惯。严禁代码中,url/href/src 值为空或 # . 这应该是目前最好的一种方式。
经验教训:对于开放 CSS 的系统,源码检查时,要加入对 background/background-image: url()/url(#) 的检查。
2.避免空链接属性空的链接属性是指img、link、script、ifrrame元素的src或href属性被设置了,但是属性却为空。如,我们创建了一个图片,并且暂时设置图片的地址为空,希望在未来动态的去修改它。但是即使图片的地址为空,浏览器依旧会以默认的规则去请求空地址:
Internet Explorer 8及以下版本浏览器只在img类型元素上出现问题,IE会把img的空地址解析为当前页面地址的目录地址。例如:如果当前页面地址为http://example.com/dir/page.html,IE会把空地址解析为http://example.com/dir/地址并请求。
早些版本的Webkit内核浏览器 与Firefox 会把空地址解析为当前页面的地址。如果页面内有多个空链接属性元素,当前页面的服务器则会被请求多次,增加服务器的负载。相较桌面浏览器对内核的更新升级较积极,这个问题在ios与android系统的移动浏览器上问题可能较严重。
幸运的是所有主流浏览器面对iframe的src属性为空时,会把空地址解析为about:blank地址,而不会向服务器发出额外的请求。
经过一番调查,最终发现该问题链接或者url其实在开发中会出现取变量值得情况,因此就避免不了出现空的情况,可以用about:blank来代替空的情况。
————————————————
版权声明:本文为CSDN博主「jsjhushilei」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jsjhushilei/article/details/51101014
background-image:url为空引发的两次请求问题的更多相关文章
- img标签src=""和background-image:url();引发两次请求页面bug
img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时 ...
- vue动态绑定background:url绑不上的问题
场景: 利用swipper做轮播图,在联调的时候发现有些图片存在有些图片不存在 原因:图片路径中存在 (),和 background:url() 会冲突 解决方法: 一:oss图片路径避免出现括号 ( ...
- ajax发送请求的时候url为空或者undefined会发生什么
$.ajax()里的url为空,ajax请求发送到当前自己的页面. 例如index.html里$.ajax()的url为空就发送到index.html
- 用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证
看了网上文章学习了下vue的抽象组件,感觉就跟react的高阶组件一样的使用场景,只是更加面向vue的底层编程 ,网上介绍的抽象组件一般有2种用法,1 用来加防抖和节流 2 用来控制按钮是否允许点击做 ...
- jquery table 发送两次请求 解惑
版本1.10 以下链接为一个较低版本解决方案: http://blog.csdn.net/anmo/article/details/17083125 而我的情况有点作, 情况描述: 1,一个页面两个t ...
- Ajax中的get和post两种请求方式的异同
Ajax中我们经常用到get和post请求.那么什么时候用get请求,什么时候用post方式请求呢? 在做回答前我们首先要了解get和post的区别. 1. get是把参数数据队列加到提交表单的A ...
- Ajax的get和post两种请求方式区别
Ajax的get和post两种请求方式区别 (摘录):http://ip-10000.blog.sohu.com/114437748.html 解get和post的区别. 1. get是把参数数据队列 ...
- .net中对HTTP请求的两种请求:Get和Post的操作
.net中对HTTP请求的简单操作总结 第一部分,HTTP协议的简单了解 一. 什么是HTTP协议 超文本传输协议 (HTTP-Hypertext transfer protoco ...
- vue使用axios发送请求,都会发送两次请求
vue 使用axios,每次的请求都会发送两次,第一次的请求头为options CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sha ...
随机推荐
- [UE4] Adding a custom shading model
转自:https://blog.felixkate.net/2016/05/22/adding-a-custom-shading-model-1/ This was written in Februa ...
- 浅谈 Docker 安全合规建设
通过阅读网上帖子及浏览相关信息,大家可能会产生一种错觉:Docker 安全性不足,对 Docker 导入生产环境持保守态度.不过实际情况是,虽然我们需要对容器的安全性高度关注,但只要使用得当,完全可以 ...
- understanding backpropagation
几个有助于加深对反向传播算法直观理解的网页,包括普通前向神经网络,卷积神经网络以及利用BP对一般性函数求导 A Visual Explanation of the Back Propagation A ...
- VirtualBox 配置 CentOS7网卡信息
在实际配置虚拟机的过程中,网络配置时候一个很繁琐的过程,经常一个点没注意到,就访问不了了.在此,做一个简单的教程以供后续使用时可以参考! 方法一: 使用NAT网络 1. 选择网卡 安装centos7的 ...
- .whl文件安装cuda10.0版本的pytorch1.3.0+torchvision0.4.1
$ python3 -m venv env3$ source env3/bin/activate$ cd env3/share/python-wheels 在此找到对应的版本:https://down ...
- 了解HTML/CSS/JS/JQuery/ajax等前端知识
什么是HTML 超文本标记语言 浏览器通过识别相应的标签来加载页面 通过HTTP协议传输,不是编程语言 HTML常用标签 title script style link meta link body ...
- C++ Primer中文第四版
C++ Primer中文第四版 在简书上发现有挂羊头卖狗肉的,发的plus,而且压缩包还得付钱获取密码,我直接去github搜到了第四版,在此分享一下. 格式:pdf 书签目录:有 下载地址: ...
- python3 安装 pyinstaller 时报错的解决办法
如上图所示,在安装的过程中发现是所关联的一个 future模块安装失败,庵后我有单独安装了一下这个future,发现还是失败 然后在网上寻找解决办法,最后找到了这个指令,pip install fut ...
- Go语言【学习】defer和逃逸分析
defer 什么是defer? defer是Go语言的一中用于注册延迟调用的机制,使得函数活语句可以再当前函数执行完毕后执行 为什么需要defer? Go语言提供的语法糖,减少资源泄漏的发生 如何使用 ...
- JAVA8的java.util.function包
一 概述 name type description Consumer Consumer< T > 接收T对象,不返回值 Predicate Predicate< T > 接收 ...