首页
所有分类
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 相关文章推荐
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
浅析Vue 中的 render 函数
Feb 28 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
Spring JPA(1) EditText(1) Spring Bean(1) Tsmoothie(1) TextInputLayout(1) Selenium(1) reduce(2) Django(9) openEuler(1) filter(1)
You might like
PHP4实际应用经验篇(4)
2006/10/09 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
PHP中Array相关函数简介
2016/07/03 PHP
jquery 操作单选框，复选框，下拉列表实现代码
2009/10/27 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
页面按钮禁用与解除禁用的方法
2014/02/19 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
2016/04/13 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python进阶教程之模块（module）介绍
2014/08/30 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python exit出错原因整理
2020/08/31 Python
用python计算文件的MD5值
2020/12/23 Python
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
母亲追悼会答谢词
2014/01/27 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
劳动竞赛活动方案
2014/02/20 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
主持人演讲稿
2014/05/13 职场文书
小学数学课题方案
2014/06/15 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL