在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将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
jquery 输入框数字限制插件
Nov 10 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
可选择和输入的下拉列表框示例
Nov 05 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
js实现计算器功能
Aug 10 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 图像尺寸调整代码
2010/05/26 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
JavaScript实现GriwView单列全选(自写代码)
2013/05/13 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Js自定义多选框效果的实例代码
2017/07/05 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
巴西购物网站:Onofre Agora
2020/06/08 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
2014年上半年工作自我评价
2014/01/18 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
个人欠条范本
2015/07/03 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
Java 异步任务计算FutureTask
2022/04/28 Java/Android