动态载入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基础函数整理汇总
Jan 30 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 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中的8个魔术常量
2020/07/06 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JavaScript Array扩展实现代码
2009/10/14 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
搭建vue开发环境
2018/07/19 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
Python计算程序运行时间的方法
2014/12/13 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
详解Python:面向对象编程
2019/04/10 Python
python实现的发邮件功能示例
2019/09/11 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
中学生爱国演讲稿
2013/12/31 职场文书
管理信息系学生的自我评价
2014/01/11 职场文书
行政助理的岗位职责
2014/02/18 职场文书
生产文员岗位职责
2014/04/05 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
单位租车协议书
2015/01/29 职场文书
班主任自我评价范文
2015/03/11 职场文书