动态载入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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
JavaScript实现的多个图片广告交替显示效果代码
Sep 04 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
Dec 03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
js Math数学简单使用操作示例
Mar 13 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调用三种数据库的方法(2)
2006/10/09 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
利用Python和OpenCV库将URL转换为OpenCV格式的方法
2015/03/27 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python中函数参数调用方式分析
2018/08/09 Python
python根据多个文件名批量查找文件
2019/08/13 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python实现控制台输出彩色字体
2020/04/05 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
瀑布模型都有哪些优缺点
2014/06/23 面试题
数控专业应届生求职信
2013/11/27 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
文秘大学生求职信
2014/02/25 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
销售团队获奖感言
2014/08/14 职场文书
邀请书模板
2015/02/02 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
警示教育观后感
2015/06/17 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书