在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" > </ script >
     < script  language ="javascript" > </ script >
</ body >
</ html >

本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。

目录
相关文章
|
4天前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
14 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
3天前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
17天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
19天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
28天前
|
JavaScript 前端开发
js教程——函数
js教程——函数
24 4
|
2月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
27天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
15 2
|
30天前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
22 5
|
30天前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
19 3
|
1月前
|
前端开发 JavaScript
探索JavaScript函数基础
探索JavaScript函数基础
17 3