动态载入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中void(0)的具体含义解释
Aug 02 Javascript
js 编写规范
Mar 03 Javascript
利用JS实现浏览器的title闪烁
Jul 08 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
angularJS提交表单(form)
Feb 09 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
多种方式实现js图片预览
Dec 12 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 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自动给文章加关键词链接的函数代码
2012/11/29 PHP
php错误级别的设置方法
2013/06/17 PHP
如何让CI框架支持service层
2014/10/29 PHP
php实现把url转换迅雷thunder资源下载地址的方法
2014/11/07 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
javascript Object与Function使用
2010/01/11 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
uniapp实现可滑动选项卡
2020/10/21 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python实现检测文件MD5值的方法示例
2018/04/11 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
2021/01/10 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
求网格中的黑点分布
2013/11/06 面试题
农村产权制度改革实施方案
2014/03/21 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
2014年十一国庆节活动方案
2014/09/16 职场文书
2014年度培训工作总结
2014/11/27 职场文书
学校教师培训工作总结
2015/10/14 职场文书