...
Received a demand last week, someone feedback Taobao's search results page on some of the resource files repeated repeatedly reload, the problem is serious. After a series of investigation, finally found the problem lies:
IE6 executes a script when window.onload (or simulated domready) causes some cache problems:
- Question 1. At this point JS to the DOM for rendering level changes, such as setting the width, innerHTML, and so on, will be the elements of the background map to request
- Question 2. When JS sets the same src for multiple image elements, this src will be requested multiple times
...
let's look at the comparison before and after the search results page FIX:
- Fix before http://www.chencheng.org/test/srp-bug/demo.php (788 requests) (Waterfall Diagram section)
- Fix after Http://www.chencheng.org/test/srp-bug/demo.php?fix (requests) (waterfall chart)
...
Tests: (add fix parameters to see the effect after fix, see the fix version and then look at the fix version need to restart the browser)
Question 1 Test: Background image will be loaded repeatedly
http://www.chencheng.org/test/srp-bug/css-sprites-test.php
Question 2 Test: The bitmap will be loaded three times
http://www.chencheng.org/test/srp-bug/img-src-test.php
...
Solution:
Question 1. Add the following code to the page header CSS
html {
zoom: expression(function(ele){
ele.style.zoom = "1";
document.execCommand("BackgroundImageCache", false, true);
}(this));
}
Question 2. No good way to find, temporarily can only avoid, namely: window.onload
domready
do not do similar operations
...
Reference Documentation:
Http://ajaxian.com/archives/no-more-ie6-background-flicker
http://www.fivesevensix.com/studies/ie6flicker/
Http://blog.sina.com.cn/s/blog_49e464d80100fm9h.html
...
Finish