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 相关文章推荐
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 Javascript
javascript this用法小结
Dec 19 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
Vue实现购物车详情页面的方法
Aug 20 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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巧获服务器端信息
2006/12/06 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
javascirpt实现2个iframe之间传值的方法
2016/06/30 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python中的字典遍历备忘
2015/01/17 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python的垃圾回收机制详解
2019/08/28 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Python小整数对象池和字符串intern实例解析
2020/03/21 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
小学校长先进事迹材料
2014/05/13 职场文书
小学语文教研活动总结
2014/07/01 职场文书
幸福中国演讲稿
2014/09/12 职场文书
员工评语范文
2014/12/31 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
python b站视频下载的五种版本
2021/05/27 Python
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL