一个IE6下重复加载的BUG

上周接到一个需求,有人反馈淘宝的搜索结果页会对某些资源文件进行重复不停地重新载入,问题严重。经过一系列排查,最终发现问题所在:

IE6在window.onload(或模拟的domready)时执行脚本,会引发一些cache的问题:

  • 问题1. 此时JS对dom进行渲染级的变动,如设置宽高、innerHTML等,会对元素的背景图进行重新请求
  • 问题2. 此时JS对多个Image元素设置同一src,此src会被请求多次

先来看下搜索结果页fix前后的对比:

  • fix前 http://www.chencheng.org/test/srp-bug/demo.php (788 requests) (瀑布图部分)
  • fix后 http://www.chencheng.org/test/srp-bug/demo.php?fix (35 requests) (瀑布图)

Tests:(加fix参数查看fix后效果,看完fix版再看未fix版需重启浏览器)

问题1 Test:背景图会被重复载入
http://www.chencheng.org/test/srp-bug/css-sprites-test.php

问题2 Test:占位图会被载入三次
http://www.chencheng.org/test/srp-bug/img-src-test.php

解决方案:

问题1. 在页头CSS加入如下代码

html {
zoom: expression(function(ele){
	ele.style.zoom = "1";
	document.execCommand("BackgroundImageCache", false, true);
}(this));
}

问题2. 没找到什么好方法,暂时只能避免,即:不在window.onloaddomready时进行类似操作

参考文档:

http://ajaxian.com/archives/no-more-ie6-background-flicker
http://www.fivesevensix.com/studies/ie6flicker/
http://blog.sina.com.cn/s/blog_49e464d80100fm9h.html

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索重复
, 问题
, http
, 重复请求
, test
, www
, 重复加载
, Fix
, BackgroundImageCache
SRP
ie6双边距bug、ie6 bug的解决方法、常见的ie6bug、ie6bug解决方法、ie6bug,以便于您获取更多的相关知识。

时间: 2024-10-26 06:02:49

一个IE6下重复加载的BUG的相关文章

推荐一个IE6下js调试工具(Companion.JS)

做web开发的朋友都清楚,js程序的调试是相当郁闷的,因为首先这种语言语法比较灵活,它是一种弱类型的脚本语言,很多错误是无法控制的,这些不谈,最痛苦的是没有什么好的调试工具,现在的情况比以前稍好,在Firefox下还有firebug,这的确是一个不错的js调试工具,但在IE下使用就很麻烦,而且效果很不好,鄙人一直苦于寻找一个很好的IE下的js调试工具,能够自动捕获错误,并定位位置和原因,没想到今天竟在无意中寻找到了这么个好工具,不敢私藏,共享出来,希望能为各位web开发者带来方便 这个工具的名字

!important在ie6下的一个BUG和CSS的优先级。

在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的. 一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢

一个 utf-8 网页在 IE6下的BUG

网页 一个 utf-8 网页在 IE6 下的BUG 自己测试的,不一定100%准确,仅供参考. 触发条件:1. title标签里的内容为中文其他双字节字符2. 指定网页编码的 meta 信息在 title 标签的下方,即 <title>中文或其他双字节字符title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3. 另存或

ie6下display:none的BUG

display:none引起的3像素的BUG,如果你也有解决方案,欢迎分享. 今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码: <div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">    <div style="background:green;

IE6下frameset横向滚动条BUG

IE6下frameset横向滚动条BUG 如果想要解决这个问题, 你需要选择一个最适合自己的解决方案. 方案 1: 在CSS定义中粘贴下面的代码: html { overflow-y: scroll; } 这会强制默认出现垂直滚动条, 这样一来, 从某些理由上来讲, 便消去了IE对水平滚动条的需求. 优点: 完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点: 即使不需要垂直滚动条的时候也强制其出现. 请注意, 不要把它放在关联其它页面的CSS中, 比如说, 框架的inde

IE6下使用滤镜后链接无法点击的BUG

有个div的背景是个png的图片,在IE6下使用滤镜使它透明,但它下面的a标签的hover效果就没法显示,且链接也无法点击. 通常的解决方法是:给a标签加个相对定位(position:relative;),但在这里我在a标签上有个绝对定位(position:absolute;),这样的话该怎么解决的呢? 办法有两种:1.在使用滤镜的容器外面再加上一个容器,这个容器加上绝对定位.a标签上加相对定位的属性(position:relative)就可以点击了. 2.使用IE6下PNG图片透明插件DD_b

IE6下js通过css隐藏select的一个bug_表单特效

今天遇到一个问题, 当隐藏表格行 Tr 时 $id("tr_" + id + "_1").style.setAttribute('cssText',"display:none;");, 表格行 Tr 里面的 select 在 IE6 中隐藏不了,还是会显示在页面当中.想单独设置 select 的样式为隐藏 $id("new_attpm_id2_" + id).style.setAttribute('cssText',"

IE6下DIV高度显示的Bug收藏

IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高.所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层. 要解决这个问题,可以强制定义该 div 的字体尺寸,或者定义 overflow 属性来限制 div 高度的自动调整.比如 <div style="height: 6px; font: 0px Ari

【原】如何实现IE6下块级元素的内容自动收缩

近期在做提示层组件的开发,遇到了一个IE6常见的bug....想出了几个解决的办法,挺有意思的,这里分享给大家. 由于IE6浏览器中,display:inline-block只能触发IE的haslayout属性使得元素具有布局属性,当对div元素使用display:inline-block,div元素仍然为块状布局而占据一行. 那么如何在IE6下使得块级元素的内容自动收缩呢?开发圆角小提示层模块,让它来解答这个问题. 结构和样式: /** * @name : prompt * @explain