动态载入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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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中实现图片的锐化
2006/10/09 PHP
PHP 上传文件大小限制
2009/07/05 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
php遍历目录方法小结
2015/03/10 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
js微信分享实现代码
2020/10/11 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
python循环监控远程端口的方法
2015/03/14 Python
python使用webbrowser浏览指定url的方法
2015/04/04 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
兴趣小组活动总结
2014/05/05 职场文书
幼儿生日活动方案
2014/08/27 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
python实现局部图像放大
2021/11/17 Python
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android
Java 关于String字符串原理上的问题
2022/04/07 Java/Android