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插件源码
Jun 24 Javascript
javascript将url中的参数加密解密代码
Nov 17 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 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 session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
2020/02/12 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
javascript版2048小游戏
2015/03/18 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
清除输入框内的空格
2016/12/21 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
2021/02/25 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python通过yield实现数组全排列的方法
2015/03/18 Python
Python多层嵌套list的递归处理方法(推荐)
2016/06/08 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
2014年迎新年活动方案
2014/02/19 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
介绍信怎么写
2015/05/05 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle