首页
所有分类
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插件写法笔记整理
Sep 06 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
js下将阿拉伯数字每三位一逗号分隔(如：15000000转化为15,000,000)
Jun 02 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
Sep 28 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
vue-cli如何添加less 以及sass
Jul 06 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 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
Coroutine(1) greenlet(1) 正则表达式(3) gevent(1) list(1) 进销存(1) Excel(4) 信息校验(1) pytest(3) csv(4)
You might like
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
PHP中常用的魔术方法
2017/04/28 PHP
不错的新闻标题颜色效果
2006/12/10 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
python实现合并两个数组的方法
2015/05/16 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python2.7的编码问题与解决方法
2016/10/04 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
实时获取Python的print输出流方法
2019/01/07 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
物流创业计划书
2014/02/01 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
行政司机岗位职责
2015/04/10 职场文书
请客吃饭开场白
2015/06/01 职场文书
师德师风培训感言
2015/08/03 职场文书