Rumah > Artikel > hujung hadapan web > JS异步加载方法
defer
html4为script标签定义了一个扩展属性:defer。defer指明本元素所含的脚本不会修改dom,因此代码能安全地延迟执行。但是该属性并不是一个理想的跨浏览器解决方案。该属性只有IE4+和firefox3.5+的浏览器支持。用法如下:
<script type='text/javascript' src='test.js' defer></script>
带有defer属性的‘’script‘’标签可以放置在文档的任何位置,当一个带有defer属性js文件下载时,它不会阻塞浏览器的其他进程,因此这类文件可以与页面中的其他资源并行下载。带有defer属性的script标签在dom加载完成(onload事件触发前执行)
async
html5规范引入了async属性,用于异步加载脚本。
<script type='text/javascript' src='test.js' async></script>
async与defer的相同点是采用并行下载,在下载的过程中不会产生阻塞。区别在于async是加载完成后自动执行,而defer需要等待页面完成后执行。
主要原理:javascript可以动态创建html中几乎所有的内容,所以我们可以利用javascript动态地创建script标签并添加到html中。
var script = document.createElement("script"); script.type = "text/javasctipt"; script.src = "file.js"; document.getElementByTagName("head")[0].appendChild(script)
我们可以使用如下方法跟踪并确保脚本下载完成并准备就绪:
function loadScript(url,callback){var script = document.createElement("script"); script.type = "text/javasctipt"; //IE if(script.readyState){ script.onreadystatechange = function(){ if(script.readyState == 'loaded'||script.readyState =='complete'){ script.onreadystatechange = null; callback() } } }else{ script.onload = function(){ callback(); } } script.src = url; document.getElementByTagName("head")[0].appendChild(script) }
调用方法:
loadScript('files.js',function(){ alert("file is loaded") })
通过XHR对象获取脚本并注入到页面
/获取XMLHttpRequest对象,考虑兼容性。 var getXmlHttp = function(){ var obj; if (window.XMLHttpRequest) obj = new XMLHttpRequest(); else obj = new ActiveXObject("Microsoft.XMLHTTP"); return obj; }; //采用Http请求get方式;open()方法的第三个参数表示采用异步(true)还是同步(false)处理 var xmlHttp = getXmlHttp(); xmlHttp.open("GET", "file3.js", true); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 { if(xmlHttp.status >=200 && xmlHttp.status<300 || xmlHttp.status == 304){ var script = document.createElement("script"); script.text = xmlHttp.responseText; document.body.appendChild(script); } } } xmlHttp.send(null);
Atas ialah kandungan terperinci JS异步加载方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!