新闻建站cms系统、政府cms系统定制开发

广州网站建设公司-阅速公司

asp.net新闻发布系统、报纸数字报系统方案
/
http://www.ysneo.com/
广州网站建设公司
您当前位置:首页>网站技术

网站技术

异步加载javascript脚本的几种方式(async)

发布时间:2017/7/3 12:30:29  作者:Admin  阅读:394  

广告:阿里云采购优惠专区

如果在head或者body的前面放入过多的script标签,并且内容很多的时候,会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白,给用户的体验会很差。但是如果所有的脚本都放在底部,又会造成dom加载完毕后有一段时间页面虽然能看到,但是和用户的交互却很差,因此需要让一些脚本与页面异步加载。

1.在html5中,script新增了async的属性,script添加了该属性之后,下载脚本时将可以与页面其他内容并行下载,但是该属性必须在ie9以上的浏览器中才可以使用,并且只能用于加载外部js脚本。

<script async src="siteScript.js" onload="myInit()"></script>

onload 在microsft edge和ihphone手机浏览器不支持,myinit事件最好写在 siteScripts.js里面。不然会导致不同步出错。

正确:<script async src="siteScript.js" ></script>

2.同样,在html4中也有一个defer属性,该属性的兼容性更好一点,但是与async一样,可以让js脚本实现异步加载,同样只能用于加载外部js脚本。

显示的顺序为:normal defer window.onload

3.利用XHR异步加载js内容并执行,代码如下

<script>

var xhr = new XMLHttpRequest();

xhr.open("get", "js/defer.js",true)

xhr.send();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

eval(xhr.responseText);

}

}

</script>

4.动态创建script标签,主要代码如下

var script = document.createElement("script");

script.src = "js/test.js";

document.head.appendChild(script);

5.iframe方式,利用iframe加载一个同源的子页面,让子页面内的js影响当前父页面的一种方式。

html5代码标准检验

http://validator.w3.org/

http://html5test.com/

说明:

1. js文件放在html页面底部,则不影响页面显示和图片下载,但是js事件要等到底部js下载完才会加载。

2. js文件放在head之间,则影响页面显示和图片显示,打开空白,要等js下载完才会加载文字和图片。

广告:阿里云新人采购专场

相关文章
异步
async
cms新闻系统购买咨询
扫描关注 广州阅速软件科技有限公司
扫描关注 广州阅速科技