在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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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
ThinkPHP行为扩展Behavior应用实例详解
2014/07/22 PHP
php判断linux下程序问题实例
2015/07/09 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
用vue写一个日历
2020/11/02 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Numpy之random函数使用学习
2019/01/29 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
银行实习自我鉴定
2013/10/12 职场文书
新闻专业本科生的自我评价分享
2013/11/20 职场文书
服务之星获奖感言
2014/01/21 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
医药销售自荐书
2014/05/29 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书