动态载入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 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
Aug 07 Javascript
js生成随机数的过程解析
Nov 24 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
如何理解Vue前后端数据交互与显示
May 10 Vue.js
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 array的学习笔记
2012/05/16 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
PHP使用openssl扩展实现加解密方法示例
2020/02/20 PHP
jQuery版仿Path菜单效果
2011/12/15 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
2016/05/12 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Html5实现文件异步上传功能
2017/05/19 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
优秀的教师个人的中文求职信
2013/09/21 职场文书
联欢晚会主持词
2014/03/25 职场文书
初中生期末评语大全
2014/04/24 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
党员转正介绍人意见
2015/06/03 职场文书
golang中的空接口使用详解
2021/03/30 Python
mysql死锁和分库分表问题详解
2021/04/16 MySQL
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技