动态载入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实现等比例缩放图片效果插件
Jul 24 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
JQuery实现ajax请求的示例和注意事项
2018/12/10 jQuery
Angular 多模块项目构建过程
2020/02/13 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python实现代码统计程序
2019/09/19 Python
python 并发下载器实现方法示例
2019/11/22 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
Django celery异步任务实现代码示例
2020/11/26 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
大学生演讲稿范文
2014/01/11 职场文书
九年级政治教学反思
2014/02/06 职场文书
银行内勤岗位职责
2014/04/09 职场文书
师德演讲稿范文
2014/05/06 职场文书
中专生自荐信
2014/06/25 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers