在JavaScript中使用inline函数的问题


Posted in Javascript onMarch 08, 2007

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

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

在JavaScript中使用inline函数的问题function foo()
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题    
// TODO: . . .
在JavaScript中使用inline函数的问题
    return x;
在JavaScript中使用inline函数的问题}

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

在JavaScript中使用inline函数的问题var foo = function()
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题    
// TODO: . . .
在JavaScript中使用inline函数的问题
    return x;
在JavaScript中使用inline函数的问题}

在JavaScript中使用inline函数的问题var foo = new Function('{/*todo*/return x;}');

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

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

在JavaScript中使用inline函数的问题 function TestObject.prototype.Render(doc, id)
在JavaScript中使用inline函数的问题 {
在JavaScript中使用inline函数的问题    
var span = doc.createElement('SPAN');
在JavaScript中使用inline函数的问题    span.Object 
= this;
在JavaScript中使用inline函数的问题    
this.m_Element = span;
在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题    
if ( id == "NamedMethod" )
在JavaScript中使用inline函数的问题    {
在JavaScript中使用inline函数的问题        span.onclick 
= asdf;
在JavaScript中使用inline函数的问题    }
在JavaScript中使用inline函数的问题    
else
在JavaScript中使用inline函数的问题    { 
在JavaScript中使用inline函数的问题        span.onclick 
= function()
在JavaScript中使用inline函数的问题        {
在JavaScript中使用inline函数的问题            
var asdf01 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf02 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf03 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf04 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf05 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf06 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf07 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf08 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf09 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf10 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf11 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题            
var asdf12 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题        };
在JavaScript中使用inline函数的问题    }
在JavaScript中使用inline函数的问题    span.Name 
= this.m_Description;
在JavaScript中使用inline函数的问题    span.innerText 
= this.m_Name;
在JavaScript中使用inline函数的问题    span.style.display 
= 'block';
在JavaScript中使用inline函数的问题    
return span;
在JavaScript中使用inline函数的问题 }

    函数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时冗余数据就越多。

    附测试代码:

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

在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题
function TestObject(name)
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题    
this.m_Name = name;
在JavaScript中使用inline函数的问题    
this.m_Description = '';
在JavaScript中使用inline函数的问题    
this.m_Element = null;
在JavaScript中使用inline函数的问题         
在JavaScript中使用inline函数的问题    
this.toString = function()
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题    
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题         
return '[class TestObject]'; 
在JavaScript中使用inline函数的问题    }

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

在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题
function TestObject.prototype.Render(doc, id)
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题    
var span = doc.createElement('SPAN');
在JavaScript中使用inline函数的问题    span.Object 
= this;
在JavaScript中使用inline函数的问题    
this.m_Element = span;
在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题    
if ( id == "NamedMethod" )
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题    
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题         span.onclick 
= asdf;
在JavaScript中使用inline函数的问题    }

在JavaScript中使用inline函数的问题    
else
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题    
在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题         span.onclick 
= function()
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题         
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题             
var asdf01 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf02 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf03 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf04 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf05 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf06 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf07 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf08 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf09 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf10 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf11 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题             
var asdf12 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题         }
;
在JavaScript中使用inline函数的问题    }

在JavaScript中使用inline函数的问题    span.Name 
= this.m_Description;
在JavaScript中使用inline函数的问题    span.innerText 
= this.m_Name;
在JavaScript中使用inline函数的问题    span.style.display 
= 'block';
在JavaScript中使用inline函数的问题    
return span;
在JavaScript中使用inline函数的问题}

在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题
function asdf()
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题    
var asdf01 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf02 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf03 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf04 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf05 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf06 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf07 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf08 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf09 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf10 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf11 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题    
var asdf12 = ['a', 's', 'd', 'f'];
在JavaScript中使用inline函数的问题}

在JavaScript中使用inline函数的问题
</script>
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题    
<script language="javascript">在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题
function ReleaseElements()
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题    
var room = document.getElementById('container');
在JavaScript中使用inline函数的问题    
var spans = room.all.tags('SPAN');
在JavaScript中使用inline函数的问题    
for ( var i=0 ; i < spans.length ; ++i )
在JavaScript中使用inline函数的问题在JavaScript中使用inline函数的问题    
在JavaScript中使用inline函数的问题{
在JavaScript中使用inline函数的问题         spans[i].Object 
= '';
在JavaScript中使用inline函数的问题    }

在JavaScript中使用inline函数的问题}
 
在JavaScript中使用inline函数的问题
</script>
在JavaScript中使用inline函数的问题
</body>
在JavaScript中使用inline函数的问题
</html>
在JavaScript中使用inline函数的问题

Javascript 相关文章推荐
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
js原生map实现的方法总结
Jan 19 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
JS类中定义原型方法的两种实现的区别
Mar 08 #Javascript
JavaScript语言中的Literal Syntax特性分析
Mar 08 #Javascript
从JavaScript的函数重名看其初始化方式
Mar 08 #Javascript
翻译整理的jQuery使用查询手册
Mar 07 #Javascript
用window.location.href实现刷新另个框架页面
Mar 07 #Javascript
javascript中的location用法简单介绍
Mar 07 #Javascript
JsEasy简介 JsEasy是什么?与下载
Mar 07 #Javascript
You might like
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
[00:20]TI9观赛名额抽取Ⅱ
2019/07/24 DOTA
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
生产部统计员岗位职责
2014/01/05 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
小学毕业感言500字
2014/02/28 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
岗位明星事迹材料
2014/05/18 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
教师工作总结范文2014
2014/11/10 职场文书
英语复习计划
2015/01/19 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL