14
一个IE6下重复加载的BUG
source link: https://blogread.cn/it/article/1572?f=hot1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
上周接到一个需求，有人反馈淘宝的搜索结果页会对某些资源文件进行重复不停地重新载入，问题严重。经过一系列排查，最终发现问题所在：
IE6在window.onload(或模拟的domready)时执行脚本，会引发一些cache的问题:
- 问题1. 此时JS对dom进行渲染级的变动，如设置宽高、innerHTML等，会对元素的背景图进行重新请求
- 问题2. 此时JS对多个Image元素设置同一src，此src会被请求多次
先来看下搜索结果页fix前后的对比：
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.onload或domready时进行类似操作
参考文档：
http://ajaxian.com/archives/no-more-ie6-background-flicker
http://www.fivesevensix.com/studies/ie6flicker/
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK