最近看JavaScript高级程序设计,大有收获,接下来几天写一下读书笔记。之前写了一篇Ajax初步理解的随笔,里面有个函数用来创建XmlHttpRequest对象,浏览器兼容性原因,写出的代码通过大量if判断或者try,catch语句将函数引导到正确代码处。

<script type="text/javascript">
function createXHR(){
var xhr = null;
try {
// Firefox, Opera 8.0+, Safari,IE7+
xhr = new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
xhr = null;
}
}
}
return xhr;
}
</script>

每次调用这个函数的时候,都要先进行浏览器能力检查,首先检查浏览器是否支持内置的XMLHyypRequest对象,如果不支持然后检查各版本基于ActiveX的XMLHttpRequest,每次调用该函数都是这样,其实当第一次执行完后,如果浏览器支持某个特定XMLHttpRequest对象,那么下次执行的时候这种支持性并不会改变,没必要再进行一边检测,即使只有一个if语句,执行也肯定比没有要慢,如果我们可以让if语句不必每次执行,那么就可以在频繁调用的情况下提高执行速度。解决方案就是称之为惰性载入的技巧。

惰性载入

惰性载入表示函数执行的分支只会在函数第一次掉用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了。createXHR函数可以被改写为这样

function createXHR(){
var xhr=null;
if(typeof XMLHttpRequest !='undefined'){
xhr = new XMLHttpRequest();
createXHR=function(){
return new XMLHttpRequest();
}
}else{
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
createXHR=function(){
return new ActiveXObject("Msxml2.XMLHTTP");
}
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
createXHR=function(){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
catch (e) {
createXHR=function(){
return null;
}
}
}
}
return xhr;
}

在这个惰性载入的createXHR中第一次执行的时候每个分支都会为createXHR重新赋值,覆盖原函数,返回xhr对象,而第二次执行的时候就会直接调用重写后的函数,这样就不必执行每个分支重新做检测了。

优点

惰性载入函数有两个主要优点,第一是显而易见的效率问题,虽然在第一次执行的时候函数会意味赋值而执行的慢一些,但是后续的调用会因为避免的重复检测更快;第二个是要执行的适当代码只有当实际调用函数是才执行,很多JavaScript库在在加载的时候就根据浏览器不同而执行很多分支,把所有东西实现设置好,而惰性载入函数将计算延迟,不影响初始脚本的执行时间。

JavaScript 函数惰性载入的更多相关文章

  1. JavaScript函数使用技巧

    JavaScript中的函数是整个语言中最有趣的一部分,它们强大而且灵活.接下来,我们来讨论JavaScript中函数的一些常用技巧: 一.函数绑定 函数绑定是指创建一个函数,可以在特定的this环境 ...

  2. 巧妙利用函数的惰性载入提高javascript 代码性能

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题. 例如,我们最常见的为 dom 节点添加事件的函 ...

  3. 利用函数的惰性载入提高 javascript 代码性能

    在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会在函数中包含了大量的 if 语句,以检查浏览器特性,解决不同浏览器的兼容问题.例如,我们最常见的为 dom 节点添加事件的函数 ...

  4. JavaScript之惰性函数

    前不久看到javascript的性能优化的这里,有关惰性函数 假如同一个函数有许多判断来检测函数,而我们每一次调用,都会判断检测函数 例如: function addEvent (type, elem ...

  5. javascript高级技巧篇(作用域安全、防篡改、惰性载入、节流、自定义事件,拖放)

    安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式字符串.每个类在内部都有一个[[Class]]属性 ...

  6. 深入理解javascript函数进阶系列第四篇——惰性函数

    前面的话 惰性函数表示函数执行的分支只会在函数第一次调用的时候执行,在第一次调用过程中,该函数会被覆盖为另一个按照合适方式执行的函数,这样任何对原函数的调用就不用再经过执行的分支了.本文将详细介绍惰性 ...

  7. javascript 性能惰性加载2016.12.13

    利用函数的惰性载入提高 javascript 代码性能 原文:利用函数的惰性载入提高javascript代码性能 作者:阿安 在 javascript 代码中,因为各浏览器之间的行为的差异,我们经常会 ...

  8. javascript函数中的三个技巧【一】

    在学习javascript中,函数是非常重要的,现在我来谈谈对函数的理解以及在工作和用法中的一些技巧 技巧一. [作用域安全的构造函数] 构造函数其实就是一个使用new操作调用的函数 function ...

  9. JavaScript 函数

    JavaScript 函数 介绍:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.嗯,就像Java中封装的方法一样. 将脚本编写为函数,就可以避免页面载入时执行该脚本. 函数包含着一些代码 ...

随机推荐

  1. 未在本地计算机上注册“OraOLEDB.Oracle.1”提供程序解决方案

    未在本地计算机上注册“OraOLEDB.Oracle.1”提供程序解决方案 一.现象:  C#程序中需要以Provider=OraOLEDB.Oracle.1方式访问ORACLE数据库.但程序执行时报 ...

  2. nginx环境下配置nagios-关于perl-fcgi.pl

    配置文件如下: 请注意,网上提供的官方文档在运行时可能会出现问题,此文中保证无问题. ; ; ; ;  ); ;  ); ; ;          my $pidnumber = $$;        ...

  3. AngularJS 中设置 AJAX get 请求不缓存的方法

    var app = angular.module('manager', ['ngRoute']); app.config(['$routeProvider', function($routeProvi ...

  4. java 链接jdbc

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  5. android及IOS的测试中容易疏漏或者测漏的点——持续更新

    1.控件的生命周期——控件消隐之后,会不会依然可点,导致出现进一步的响应?这个之前没想过,之后需要加入到测试点中 2.在登录界面同时出现弹窗: 如:特殊情况下,同时出现弹窗,又刚好退出登录,因此登录界 ...

  6. Nginx配置配置文件nginx.conf的设置

    引用自:http://www.ha97.com/5194.html #定义Nginx运行的用户和用户组user www www; #nginx进程数,建议设置为等于CPU总核心数.worker_pro ...

  7. Java语言环境(JDK的安装教学)

    //此文档由徐浩军编写(32/64位系统都适用) 1.下载JDK安装包你 2.点击安装包开始安装 3.首先你要选择安装地址一般情况下,都会选择默认地址. (请记住这个地址,之后配置环境变量的时候需要用 ...

  8. zabbix使用host metadata方式主动注册

    host metadata是zabbix2.2新增加的功能,该功能在zabbix-agent端可以自定义条件,在选择自动注册的时候,zabbix-server端可以根据host metadata来选择 ...

  9. Wpf 中使用gif格式的动态图

    第一种方法:使用winform插件 <WindowsFormsHost  xmlns:wf="clr-namespace:System.Windows.Forms;assembly=S ...

  10. POJ 2175 Evacuation Plan 费用流 负圈定理

    题目给了一个满足最大流的残量网络,判断是否费用最小. 如果残量网络中存在费用负圈,那么不是最优,在这个圈上增广,增广1的流量就行了. 1.SPFA中某个点入队超过n次,说明存在负环,但是这个点不一定在 ...