动态载入js提高网页打开速度的方法


Posted in Javascript onJuly 04, 2014

一般来说如果一次性的载入所有需要的JavaScript代码,就会造成初始网页打开速度变慢,但是很多载入的代码又并不需要使用,这种无谓的性能浪费应该予以避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点,并将此结点的src属性(即 外联 Javascript文件)设置为需要动态载入的JavaScript代码。

下面就是完成这样功能的一个示例:

(1)、新建JsLoaderTest.html文件

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>按需载入JavaScript代码的例子</title> 
<script type="text/javascript"> 
  function JsLoader(){ 
  this.load=function(url){ 
      //获取所有的<script>标记 
      var ss=document.getElementsByTagName("script"); 
      //判断指定的文件是否已经包含,如果已包含则触发onsuccess事件并返回 
      for (i=0;i<ss.length;i++){ 
        if (ss[i].src && ss[i].src.indexOf(url)!=-1){ 
          this.onsuccess(); 
          return; 
        } 
      } 
      //创建script结点,并将其属性设为外联JavaScript文件 
      s=document.createElement("script"); 
      s.type="text/javascript"; 
      s.src=url; 
      //获取head结点,并将<script>插入到其中 
      var head=document.getElementsByTagName("head")[0]; 
      head.appendChild(s); 
      //获取自身的引用 
      var self=this; 
      //对于IE浏览器,使用readystatechange事件判断是否载入成功 
      //对于其他浏览器,使用onload事件判断载入是否成功 
      //s.onload=s.onreadystatechange=function(){ 
      s.onload=s.onreadystatechange=function(){ 
        //在此函数中this指针指的是s结点对象,而不是JsLoader实例, 
        //所以必须用self来调用onsuccess事件,下同。 
        if (this.readyState && this.readyState=="loading") return; 
        self.onsuccess(); 
      } 
      s.onerror=function(){ 
        head.removeChild(s); 
        self.onfailure(); 
      } 
    }; 
    //定义载入成功事件 
    this.onsuccess=function(){}; 
    //定义失败事件 
    this.onfailure=function(){}; 
  } 
  function btnClick(){ 
      //创建对象 
    var jsLoader=new JsLoader(); 
    //定义载入成功处理程序 
    jsLoader.onsuccess=function(){ 
       sayHello(); 
    } 
    //定义载入失败处理程序 
    jsLoader.onfailure=function(){ 
       alert("文件载入失败!"); 
    } 
    //开始载入 
    jsLoader.load("hello.js"); 
  } 
</script> 
</head> 
<body> 
<label> 
<input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件"> 
</label> 
</body> 
</html>

(2)、新建hello.js文件,包含如下代码:

// JavaScript Document 
function sayHello(){ 
  alert("Hello World!成功载入JavaScript文件");   
} 
// JavaScript Document
function sayHello(){
  alert("Hello World!成功载入JavaScript文件");  
}
Javascript 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
关于JavaScript的gzip静态压缩方法
Jan 05 Javascript
List the Codec Files on a Computer
Jun 11 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
清除输入框内的空格
Dec 21 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 #Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 #Javascript
JS根据年月获得当月天数的实现代码
Jul 03 #Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 #Javascript
window.returnValue使用方法示例介绍
Jul 03 #Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 #Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 #Javascript
You might like
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
javascript应用:Iframe自适应其加载的内容高度
2007/04/10 Javascript
js 事件小结 表格区别
2007/08/13 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
js实现div色块碰撞
2020/01/16 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python的依赖管理的实现
2019/05/14 Python
Python常用数据类型之间的转换总结
2019/09/06 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Pycharm修改python路径过程图解
2020/05/22 Python
python 操作excel表格的方法
2020/12/05 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
2014年消防工作总结
2014/11/21 职场文书
2015圣诞节贺卡寄语
2015/03/24 职场文书