js加载之使用DOM方法动态加载Javascript文件


Posted in Javascript onNovember 08, 2013

传统上,加载Javascript文件都是使用<script>标签。
就像下面这样:
<script type="text/javascript" src="example.js"></script>
js加载之使用DOM方法动态加载Javascript文件 
<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。

(1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。

(2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。
为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。

function loadScript(url){ 


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


script.type = "text/javascript"; 


script.src = url; 


document.body.appendChild(script); 

}

这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。
Javascript 相关文章推荐
jquery实现居中弹出层代码
Aug 25 Javascript
关于锚点跳转及jQuery下相关操作与插件
Oct 01 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
JavaScript原生节点操作小结
Jan 17 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 Javascript
javascript获取url上某个参数的方法
Nov 08 #Javascript
jqgrid 编辑添加功能详细解析
Nov 08 #Javascript
动态加载JS文件的三种方法
Nov 08 #Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 #Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 #Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 #Javascript
JavaScript中this的使用详解
Nov 08 #Javascript
You might like
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
php中的路径问题与set_include_path使用介绍
2014/02/11 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Django框架模板介绍
2019/01/15 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python如何对齐字符串
2020/07/30 Python
django中ImageField的使用详解
2020/12/21 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
澳大利亚相机之家:Camera House
2017/11/30 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
竞聘书怎么写,如何写?
2014/03/31 职场文书
2014年营销工作总结
2014/11/22 职场文书
信访工作个人总结
2015/03/03 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书