首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

在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中使用inline函数的问题

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
javascript 计算两个整数的百分比值
Dec 26 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
jQuery使用之标记元素属性用法实例
Jan 19 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
Jun 02 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 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
数据合并(1) zabbix(9) BufferPool(1) http_stub_status_module(1) location(2) 缓存机制(1) 逻辑函数(1) 连接查询(1) 复合索引(1) element-ui(1)
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
[原创]ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法
2015/10/10 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
javascript编程起步（第二课）
2007/01/10 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
JS对象转换为Jquery对象示例
2014/01/26 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python之wxPython应用实例
2014/09/28 Python
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python回调函数用法实例详解
2015/07/02 Python
python3批量删除豆瓣分组下的好友的实现代码
2016/06/07 Python
Python中注释（多行注释和单行注释）的用法实例
2019/08/28 Python
python模式 工厂模式原理及实例详解
2020/02/11 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python如何求100以内的素数
2020/05/27 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
python实现二分查找算法
2020/09/18 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
美国最受欢迎的童装品牌之一：The Children’s Place
2016/07/23 全球购物
安全环保演讲稿
2014/08/28 职场文书
2014年人事行政工作总结
2014/12/03 职场文书
2014年底工作总结
2014/12/15 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年妇女工作总结
2015/05/14 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server