动态载入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 日期对象Date扩展方法
May 30 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
JavaScript数组去重的几种方法
Apr 07 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
详解JavaScript中的链式调用
Nov 27 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
咖啡与水的关系
2021/03/03 冲泡冲煮
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
Symfony2安装第三方Bundles实例详解
2016/02/04 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
php简单统计中文个数的方法
2016/09/30 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Django框架模板介绍
2019/01/15 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
Python文件操作的面试题
2013/06/22 面试题
乡镇网格化管理实施方案
2014/03/23 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
MySQL 5.7常见数据类型
2021/07/15 MySQL