总所周知,使用 script 放置在页面顶端,在DOM渲染的时候由于引擎的解析会延迟页面的加载时间,在 Yahoo!前端性能中也提到了有关内容。使用 script load 能够在页面加载速度上得到一定的提升,使用范围也包含了使用 dom 直接添加元素至 head,使用 Ajax 请求脚本路径,然后使用 eval 函数执行,也可以通过 iframe 加载。

当然,每种方法有每种方法不同的使用环境,效果也完全不一致。具体可以参考《高性能网站建设指南》一书。下面是使用 script dom write 的方法实现,有需要的朋友可以参考参考。


var loadScript = function (fileList, callBack) {
   var count = 0, i = 0, len = fileList.length, scriptObj, 
        d = document,
        headObj = d.documentElement.firstChild,
        done = function (idx) {
            if (++count == len && callBack) {
                callBack();
            }
        };
    while (i < len) {
        file = fileList[i];
        if (!file) {
            done(i);
            i++;
            continue;
        }
        scriptObj = d.createElement("script");
        scriptObj.type = "text/javascript";
        scriptObj.async = true;
        if (scriptObj.readyState) {
            scriptObj.onreadystatechange = function (idx) {
                return function () {
                    var state = this.readyState;
                    if (state == "loaded" || state == "complete" || state == "completed") {
                        this.onreadystatechange = null;
                        done(idx);
                    }
                };
            }(i);
        } else {
            scriptObj.onload = function (idx) {
                return function () {
                    done(idx);
                };
            }(i);
        }
        scriptObj.src = file;
        /* headObj.insertBefore(scriptObj, headObj.firstChild);*/
        /* This ensures execution order is preserved in browsers that support it - Gecko & Webkit*/
        headObj.appendChild(scriptObj);
        i++;
    }
}

a {}{
background:url(images/normal.gif);
}
a:hover {}{
background:url(images/hover.gif);
}

如果为超级链接定义上述的 css样式以实现鼠标悬浮时的动态效果,在firefox下是没有什么问题的,第一次加载之后,浏览器都会从缓存读取背景图片;而IE6在这里有一个 bug,它每次都从服务器端读取背景图片,结果就是,若服务器反应较慢hover效果就会出现短暂的空白,令人极度不爽。

一直以来都是通过“两张背景图片合并、background-postion控制位置”的方式解决问题的,效果差强人意。今天无意中从一个老外的 网站上发现了一个比较妥善的解决方案,具体来说就是在页面中加入一段简单的javascript脚本,告诉ie6:本地有背景图片的话就不要麻烦服务器 了。
document.execCommand(“BackgroundImageCache”,false,true);

关于这段脚本的放置方式有两种:

1.纯css方式,在css中加入如下代码
html {}{
filter: expression(document.execCommand(“BackgroundImageCache”, false, true));
}

2.随便在页面中哪个位置(head、body或者onload)调用上面提及的脚本,例如:
<script type=”text/javascript”>
document.execCommand(“BackgroundImageCache”, false, true);
</script>

鉴于expression严重影响浏览器效率,建议采用第二种方式。

最后,总结完整方案:普通、hover状态对应的图片合并成一张,css中通过background-postion控制其位置,页面中加入从缓存读取背景图片的javascript脚本。