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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
原生JS实现层叠轮播图
May 17 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
JS Canvas接口和动画效果大全
Apr 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适配器模式(Adapter)
2014/11/25 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
jquery如何实现点击空白处隐藏元素
2017/12/05 jQuery
Node.js中sequelize时区的配置方法
2017/12/10 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
Python中的模块和包概念介绍
2015/04/13 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
关于读书的活动方案
2014/08/14 职场文书
庆祝教师节标语
2014/10/09 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
2014年民警工作总结
2014/11/25 职场文书
工作后的感想
2015/08/07 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
在NumPy中深拷贝和浅拷贝相关操作的定义和背后的原理
2022/04/14 Python