无阻塞加载js,防止因js加载不了影响页面显示的问题
更新时间：2016年12月18日 11:32:06 投稿：jingxian
下面小编就为大家带来一篇无阻塞加载js,防止因js加载不了影响页面显示的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来
浏览器加载静态资源和js的方式都是线性加载，所以一般情况可以将js放到</body>前，防止UI线程的阻塞。
而某些时候我们既希望js在整个网页的头部就加载，又担心js阻塞导致网站加载缓慢，就可以用到无阻塞加载js技术。
Dynamic Script Elements 动态脚本元素
DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容，一个新的<script>元素可以非常容易的通过标准DOM创建：
var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "file1.js";
document.body.appendChild(script);
新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。
当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕）。
大多数情况下，我们希望调用一个函数就可以实现Javascript文件的动态下载。下面的函数封装实现了标准实现和IE实现：
function loadScript(url, callback){
var script = document.createElement ("script") ;
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
}
else { //Others
script.onload = function(){ callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("file1.js", function(){ //调用
alert("File is loaded!");
});
此函数接受两个参数：Javascript文件的Url和一个当Javascript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性，并将javascript文件添加到head。
动态脚本加载是非阻塞Javascript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。
以上这篇无阻塞加载js,防止因js加载不了影响页面显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Javascript中3个需要注意的运算符,这3个运算符的使用有很多需要注意的地方和有意思的地方,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了js实现单张图片平移切换效果，一张图移动到左边以后，从底部移回最右，等待下一次循环，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了JS实现点击掉落特效,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
本篇文章主要是对JS获取地址栏参数的几种方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
Ionic项目中如何使用Native Camera？这篇文章主要介绍了Ionic项目中Native Camera的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
当页面上存在一个图片元素时如：<img src='xxxx' alt="" />,页面加载中ie7、8跟chrome下图片的onload事件非常奇怪，有后完全不触发，有时候触发后进行改变某些元素的操作，操作结果无效。2011-07-07
在开发中需要定义一个对象的类型,此类型必须包含某n个字段中的其中一种,这篇文章主要给大家介绍了关于TypeScript开发小状况记录之选且只选一个的相关资料,需要的朋友可以参考下2022-10-10
本文通过实例代码给大家介绍了bootstrap实现点击删除按钮弹出确认框的方法，需要的朋友参考下吧2018-08-08
这篇文章主要给大家介绍了关于微信小程序实现图片上传功能的相关内容，文中详细介绍了前端+PHP后端的示例代码，对大家的理解和学习具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
JS 事件绑定函数代码，解决了浏览器兼容，现在可以兼容IE6 7 8 FF 谷歌2010-04-04
最新评论