返回列表

IE6 bug 之背景重复加载

默认分类 2014/08/09 07:20

原文地址: http://blog.sina.com.cn/s/blog_655388ed0100xvnd.html

新版就要上线,所以测试不停的提出新的要求,学到了很多的东西。共享一下~~

这个是性能上的要求,在IE6下,重复使用了一个图片作为背景,那么每用一次就会重新去服务器拉一次,给服务器带来巨大的压力,比如sprite 雪碧方法的应用,在ie6下还是让人愤怒的~~

就这个问题,我得知之后搜了一些帖子,果然淘宝UED走在前端啊~~~~嘿嘿

http://ued.taobao.com/blog/2010/05/17/ie6-duplicate-load-bug/

http://www.planabc.net/(淘宝ued某成员)

http://www.cnblogs.com/0417/archive/2010/06/22/1762739.html

http://www.51sea.com/view.asp?id=177

这个瀑布图有很多监测方法,可以用fiddler,或httpwatch,火狐下的网络。

其实ie6下吧我不清楚怎么监测的~~只知道fiddler可以。我自己电脑系统是ie6就没有httpwatch

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

解决方案:

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

调用JS的execCommand函数即可实现document.execCommand("BackgroundImageCache", false, true);

//缓存预加载设置   
BEUI.preLoadCacheSet = function(){    
    if ( $.browser.msie ){   
        if ( ie6的话 ){    
            document.execCommand("BackgroundImageCache", false, true);   
        }   
    }
};

可以使用js和css expression调用,考虑到改动成本,采用css expression的方式实现。

鼠标在页面上的移动,页面的滚动都会触发css expression去执行,配置较差的机器上会有性能问题。

如果让页面只在载入时运行一次该表达式,产生的影响就微乎其微了。

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

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