关于firefox对于href属性的特殊解析

今天项目遇到一个很奇怪的问题，使用firebug网络监控，发现同一页面，在firefox下会对后台请求多次，但是IE9，chrome没有这样的问题。

直接公布结果吧，经过不断的尝试，最终发现问题出在对一个CSS加载的地方

 

<link rel="stylesheet" href="" id="css_1"/>
<script type="text/javascript">
	if(window.screen.width >= 1280){
		$("#css_1").attr('href', '<%=cssBasePath%>/css/css_1.css');
	}else{
		$("#css_1").attr('href', '<%=cssBasePath%>/css/css_1_1024.css');

	}
</script>

 

 问题就出在href=“”的位置，firefox对于这种href=“”的解析，会再次请求url地址栏处的url，但是并不会将页面返回(如果返回，将成死循环)，于是，将代码改成

<link rel="stylesheet" id="css_1"/>

即可~

 

经验总结，浏览器对页面的加载，应该会判断缓存中是否已经加载过的js和css，如果已经加载，不会再后台请求。但是当js代码修改了css的<link>标签，再次进入页面时，href="" 遇到这这个标签，则会再次解析url地址栏中的地址。今天这个问题出在，我们一个JSP页面INCLUDE的好几个JSP，子JSP又很不规范都加载了以上的代码，所以，firefox遇到这种情况，会先解析href=“”，然后执行JS后，继续解析href="..css",因为..css已经加载，ff不会再去服务器上请求。所以导致，css并未重复加载，但是href=""会执行多次