由于浏览器是单线程的,因此脚本在载的时候会阻塞下载其它资源;虽然在现在浏览器已经有所改善,但仍然有待改进。
很显然,脚本必须按顺序执行,但没有必要按顺序下载,解决方法:
1。内嵌JS
通常由于页面大小和缓存能带来更多好处,因此外部文件引入JS更好一些;
在少数情况下,比如首页、少量JS情况下尚可接受。
2。XHR Eval
通过XMLHttpRequest从服务器端获取脚本。
主要缺陷是,通过XHR获取的脚本必须部署在和主页面相同的域中。
代码如下:
Ajax.get("test.js", function (xhr) {
eval(xhr.responseText);
});
3。XHR注入
使用XHR获取脚本并创建script标签。
同样,通过XHR获取的脚本必须部署在和主页面相同的域中。
代码如下:
Ajax.get('test.js', function (xhr) {
injectscript(xhr.responseText);
});
function injectscript(scriptText) {
var s = document.createElement('script');
s.text = scriptText;
document.getElementsByTagName('head')[0].appendChild(s);
}
4。Script in Iframe
将需要的脚本放入到一个页面中,然后通过iframe来加载该页面。
缺点是iframe本身的开销比较大,另外浏览器安全机制不允许iframe中的js访问跨域的父页面,反之亦然。
5。Script DOM Element
JS动态创建script DOM元素并设置其src属性。
代码如下:
var scriptElem = document.createElement('script');
scriptElem.src = 'http://domain.com/test.js';
document.ge('head')[0].appendChild(scriptElem);
6。Script Defer
给script标签添加defer属性。
缺点是只有IE和一些新浏览器支持。
代码如下:
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com