在JavaScript中使用inline函数的问题

前段时间被IE和JavaScript脚本引擎的Memory Leak问题弄得郁闷坏了，不过幸好现在总算是柳暗花明了，并且找到了一些IE中使用脚本避免ML问题的方法。继续研究JavaScript的编写，有发现一些不算ML问题，但是可以节约IE内存使用的方法，在此和大家讨论讨论。

我们在JavaScript中编写代码，对于定义函数的语句：

function foo()
{
    // TODO: . . .
    return x;
}

可以说是在熟悉不过了。当然除了这种定义函数的方法，我们还有另外几种方法也能定义函数：

var foo = function()
{
    // TODO: . . .
    return x;
}

var foo = new Function('{/*todo*/return x;}');

后两种方法定义的JavaScript函数，在调用起来和第一种没有任何效果上的区别。

不过由于JavaScript是解释性语言，当我们定义一个函数的时候，解析引擎生成一个Function对象实例，然后把函数内容保存下来。所以每执行一次函数定义语句，就会生成一个函数。而不像编译语言，一个函数编译一次后就被任何语句调用。啊？难道JavaScript不能调用定义好的函数？不是这个意思了，当我们在制作JavaScript控件时，如果动态输出DHTML来作为控件的内容，就容易出现这样的问题。比如我们在一个HTML对象生成过程中，使用了inline方式定义的函数，那么这个元素生成几次，那个函数也就要同时生成几次。

 function TestObject.prototype.Render(doc, id)
 {
    var span = doc.createElement('SPAN');
    span.Object = this;
    this.m_Element = span;

    if ( id == "NamedMethod" )
    {
        span.onclick = asdf;
    }
    else
    { 
        span.onclick = function()
        {
            var asdf01 = ['a', 's', 'd', 'f'];
            var asdf02 = ['a', 's', 'd', 'f'];
            var asdf03 = ['a', 's', 'd', 'f'];
            var asdf04 = ['a', 's', 'd', 'f'];
            var asdf05 = ['a', 's', 'd', 'f'];
            var asdf06 = ['a', 's', 'd', 'f'];
            var asdf07 = ['a', 's', 'd', 'f'];
            var asdf08 = ['a', 's', 'd', 'f'];
            var asdf09 = ['a', 's', 'd', 'f'];
            var asdf10 = ['a', 's', 'd', 'f'];
            var asdf11 = ['a', 's', 'd', 'f'];
            var asdf12 = ['a', 's', 'd', 'f'];
        };
    }
    span.Name = this.m_Description;
    span.innerText = this.m_Name;
    span.style.display = 'block';
    return span;
 }

函数span.onclick = function()中的内容是用来占位置的，这样inline方式定义函数，每次Render()都就会生成一个新的函数对象。使用inline方式有什么不好呢？当对象实例多了的时候，会很明显的浪费内存空间呀，试验数据如下：
















 Normal Method   Inline Method 
 Initialized  27.4 M 27.4 M
 Rendered  33.4 M 35.2 M

    // IE消耗的内存数量（PM+VM）

    单看绝对内存消耗差别不大，可是如果看相对内存消耗：(35.2-33.4)/(33.4-27.4) = 30% !!!，还是很可观的了，而且如果方法本省越大，inline时冗余数据就越多。

附测试代码：

<html>
<head>
    <title>JScript Function Spending</title>
    <meta name="author" content="birdshome@博客园" /> 
</head>
<body onunload="ReleaseElements()">
    <button id="NamedMethod" onclick="GenerateObjects(this)">
        Append Normal Elements</button>
    <button id="AnonymousMethod" onclick="GenerateObjects(this)">
        Append Inline Elements</button>
    <div id="container">
    </div>
    <script language="Javascript">
function GenerateObjects(elmt)
{
    var room = document.getElementById('container');
    for ( var i=0 ; i < 1000 ; ++i )
    {
         var obj = new TestObject('__Object__' + i);
         room.appendChild(obj.Render(document, elmt.id));
    } 
}

function TestObject(name)
{
    this.m_Name = name;
    this.m_Description = '';
    this.m_Element = null;
         
    this.toString = function()
    {
         return '[class TestObject]'; 
    }
}

function TestObject.prototype.Render(doc, id)
{
    var span = doc.createElement('SPAN');
    span.Object = this;
    this.m_Element = span;

    if ( id == "NamedMethod" )
    {
         span.onclick = asdf;
    }
    else
    { 
         span.onclick = function()
         {
             var asdf01 = ['a', 's', 'd', 'f'];
             var asdf02 = ['a', 's', 'd', 'f'];
             var asdf03 = ['a', 's', 'd', 'f'];
             var asdf04 = ['a', 's', 'd', 'f'];
             var asdf05 = ['a', 's', 'd', 'f'];
             var asdf06 = ['a', 's', 'd', 'f'];
             var asdf07 = ['a', 's', 'd', 'f'];
             var asdf08 = ['a', 's', 'd', 'f'];
             var asdf09 = ['a', 's', 'd', 'f'];
             var asdf10 = ['a', 's', 'd', 'f'];
             var asdf11 = ['a', 's', 'd', 'f'];
             var asdf12 = ['a', 's', 'd', 'f'];
         };
    }
    span.Name = this.m_Description;
    span.innerText = this.m_Name;
    span.style.display = 'block';
    return span;
}

function asdf()
{
    var asdf01 = ['a', 's', 'd', 'f'];
    var asdf02 = ['a', 's', 'd', 'f'];
    var asdf03 = ['a', 's', 'd', 'f'];
    var asdf04 = ['a', 's', 'd', 'f'];
    var asdf05 = ['a', 's', 'd', 'f'];
    var asdf06 = ['a', 's', 'd', 'f'];
    var asdf07 = ['a', 's', 'd', 'f'];
    var asdf08 = ['a', 's', 'd', 'f'];
    var asdf09 = ['a', 's', 'd', 'f'];
    var asdf10 = ['a', 's', 'd', 'f'];
    var asdf11 = ['a', 's', 'd', 'f'];
    var asdf12 = ['a', 's', 'd', 'f'];
}
</script>
    <script language="javascript">
function ReleaseElements()
{
    var room = document.getElementById('container');
    var spans = room.all.tags('SPAN');
    for ( var i=0 ; i < spans.length ; ++i )
    {
         spans[i].Object = '';
    }
} 
</script>
</body>
</html>

赞 (0)

相关推荐

  • C++ 关键字 inline详细介绍

    C++ 关键字 inline详细介绍

    1.  内联函数 在C++中我们通常定义以下函数来求两个整数的最大值: 复制代码 代码如下: int max(int a, int b){ return a > b ? a : b;} 为这么一个小的操作定义一个函数的好处有: ① 阅读和理解函数 max 的调用,要比读一条等价的条件表达式并解释它的含义要容易得多 ② 如果需要做任何修改,修改函数要比找出并修改每一处等价表达式容易得多 ③ 使用函数可以确保统一的行为,每个测试都保证以相同的方式实现 ④ 函数可以重用,不必为其他应用程序重写代码 虽

  • C++实现inline hook的原理及应用实例

    本文实例简述了C++实现inline hook的原理及应用,对于大家更好的理解inline hook原理及其应用有很大的帮助.具体内容如下: 一.Inline Hook简介: 1.INLINE HOOK原理: Inline Hook通过硬编码的方式向内核API的内存空间(通常是开始的一段字节,且一般在第一个call之前,这么做是为了防止堆栈混乱)写入跳转语句,这样,该API只要被调用,程序就会跳转到我们的函数中来,我们在自己写的函数里需要完成3个任务: 1)重新调整当前堆栈.程序流程在刚刚跳转的

  • C语言中的内联函数(inline)与宏定义(#define)详细解析

    先简明扼要,说下关键:1.内联函数在可读性方面与函数是相同的,而在编译时是将函数直接嵌入调用程序的主体,省去了调用/返回指令,这样在运行时速度更快. 2.内联函数可以调试,而宏定义是不可以调试的.内联函数与宏本质上是两个不同的概念如果程序编写者对于既要求快速,又要求可读的情况下,则应该将函数冠以inline.下面详细介绍一下探讨一下内联函数与宏定义. 一.内联函数是什么?内联函数是代码被插入到调用者代码处的函数.如同 #define 宏(但并不等同,原因见下文),内联函数通过避免被调用的开销来提

  • C/C++中static,const,inline三种关键字详细总结

    一.关于staticstatic 是C++中很常用的修饰符,它被用来控制变量的存储方式和可见性,下面我将从 static 修饰符的产生原因.作用谈起,全面分析static 修饰符的实质. static 的两大作用: 一.控制存储方式 static被引入以告知编译器,将变量存储在程序的静态存储区而非栈上空间. 引出原因:函数内部定义的变量,在程序执行到它的定义处时,编译器为它在栈上分配空间,大家知道,函数在栈上分配的空间在此函数执行结束时会释放掉,这样就产生了一个问题: 如果想将函数中此变量的值保

  • 深入C++中inline关键字的使用

    一.在C&C++中 一.inline 关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义.     表达式形式的宏定义一例:     #define ExpressionName(Var1,Var2) ((Var1)+(Var2))*((Var1)-(Var2))为什么要取代这种形式呢,且听我道来:       1． 首先谈一下在C中使用这种形式宏定义的原因,C语言是一个效率很高的语言,这种宏定义在形式及使用上像一个函数,但它使用预处理器实现,没有了参数压栈,代码生

  • c++ 尽量不要使用#define 而是用const、enum、inline替换。

    例如:这里程序文件开头有如下#define语句 复制代码 代码如下: #define N 10 #define PI 3.14 #define MAX 10000 #define Heigth 6.65 ... ... 假设这里程序运行出错误,而且就是在我们使用这些常量有错误,此时编辑器应该会抛出错误信息.如果该信息提示6.65这里有错误,Ok如果你运气好你正好记得或者程序简单一眼能找到6.65表示什么,如果程序很复杂,而且报出6.65的文件是引用该文件,不记得,那么你会困惑这是什么?或许会花大

  • C++中inline函数详解

    C++中inline函数详解

    本文主要记录了C++中的inline函数,也就是内联函数,主要记录了以下几个问题: 一.C++为什么引入inline函数? 主要目的:用它代替C语言中表达式形式的宏定义来解决程序中函数调用的效率问题. C语言中的宏定义:#define ExpressionName(var1,var2) (var1+var2)*(var1-var2)这种宏定义,它使用预处理器实现,没有了参数压栈.代码生成等一系列得到操作,因此效率很高.但缺点如下: 仅仅是做预处理器符号表中的简单替换,因此不能进行参数有效性的检测

  • c++中inline的用法分析

    在函数声明或定义中函数返回类型前加上关键字inline即把min()指定为内联. inline int min(int first, int secend) {/****/};inline函数对编译器而言必须是可见的,以便它能够在调用点内展开该函数.与非inline函数不同的是,inline函数必须在调用该函数的每个文本文件中定义.当然,对于同一程序的不同文件,如果inline函数出现的话,其定义必须相同.对于由两个文件compute.C和draw.C构成的程序来说,程序员不能定义这样的min(

  • c++内联函数(inline)使用详解

    介绍内联函数之前,有必要介绍一下预处理宏.内联函数的功能和预处理宏的功能相似.相信大家都用过预处理宏,我们会经常定义一些宏,如 复制代码 代码如下: #define TABLE_COMP(x) ((x)>0?(x):0) 就定义了一个宏. 为什么要使用宏呢?因为函数的调用必须要将程序执行的顺序转移到函数所存放在内存中的某个地址,将函数的程序内容执行完后,再返回到转去执行该函数前的地方.这种转移操作要求在转去执行前要保存现场并记忆执行的地址,转回后要恢复现场,并按原来保存地址继续执行.因此,函数调

  • 在JavaScript中使用inline函数的问题

    在JavaScript中使用inline函数的问题

    前段时间被IE和JavaScript脚本引擎的Memory Leak问题弄得郁闷坏了,不过幸好现在总算是柳暗花明了,并且找到了一些IE中使用脚本避免ML问题的方法.继续研究JavaScript的编写,有发现一些不算ML问题,但是可以节约IE内存使用的方法,在此和大家讨论讨论. 我们在JavaScript中编写代码,对于定义函数的语句: function foo(){    // TODO: . . .    return x;} 可以说是在熟悉不过了.当然除了这种定义函数的方法,我们还有另外几种

  • javascript中Array()数组函数详解

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =

  • JavaScript中的工厂函数(推荐)

    JavaScript中的工厂函数(推荐)

    在学习jQuery的时候,我们经常会看到"工厂函数"这个概念,那么究竟什么是"工厂函数"呢?我们来看看概念,"所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于Javascript本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript并没有严格的"工厂函数",但是在Javascript中,我

  • JavaScript中字符串分割函数split用法实例

    本文实例讲述了JavaScript中字符串分割函数split用法.分享给大家供大家参考.具体如下: 先来看下面这段代码: <script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("&q

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • 深入认识javascript中的eval函数

    1)介绍javascript中的eval函数的用法 (2)如何在函数内执行全局代码 ►先来说eval的用法,内容比较简单,熟悉的可以跳过. eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法"{}"并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: 复制代码 代码如下: var code1='"a" + 2'; //表达式 var c

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • JavaScript中cookie工具函数封装的示例代码

    一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo

  • jQuery中的read和JavaScript中的onload函数的区别

    在JavaScript中,onload函数是最经常使用的,几乎涉及到JavaScript的童鞋都少不了要接触它.这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的时候需要用到. 复制代码 代码如下: window.onload = function(){     // 当网页加载完成后执行这里的代码块 }; 而在jQuery中也有一个对应的函数,即等待网页加载完后执行代码块 复制代码 代码如下: $(document

  • JavaScript中利用构造器函数模拟类的方法

    前言 本文小编带大家一起学习的是在 JavaScript 中使用构造器函数(construcor function)模拟类.下面话不多说,感兴趣的朋友们下面来一起看看吧. 构造器函数简介 你可以使用 ES6 的 class 关键字来实现类,不过我建议你使用传统的构造器函数来模拟类,因为这样可以给人一种你是个 JavaScript 老手的错觉,哈哈! 什么是构造器函数?构造器函数是编写对象的方法之一.一般情况下,你可以这样编写一个对象: var obj = { a:1, b:2 }; 但也可以使用

随机推荐