首页
所有分类
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 相关文章推荐
一个不错的应用,用于提交获取文章内容，不推荐用
Mar 03 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
vue中的模态对话框组件实现过程
May 01 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
在实例中重学JavaScript事件循环
Dec 03 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
调频(4) 电台频率(32) 长波(3) 收音机(62) 保养(1) 中波(3) KDKA(1) Harman Kardon(1) ad hoc(1) 立体声(1)
You might like
咖啡店都有些什么常规豆子呢？有什么风味在里面
2021/03/04 咖啡文化
php图片的二进制转换实现方法
2014/12/15 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场
2014/05/26 DOTA
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
python根据路径导入模块的方法
2014/09/30 Python
用matplotlib画等高线图详解
2017/12/14 Python
python绘制简单折线图代码示例
2017/12/19 Python
PyQt5每天必学之组合框
2018/04/20 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
在python中计算ssim的方法（与Matlab结果一致）
2019/12/19 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
tensorflow 查看梯度方式
2020/02/04 Python
python应用Axes3D绘图（批量梯度下降算法）
2020/03/25 Python
python判断元素是否存在的实例方法
2020/09/24 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Spartoo瑞典：鞋子、包包和衣服
2018/09/15 全球购物
伦敦一家领先的精品零售商：IRIS Fashion
2019/05/24 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
作文评语集锦大全
2014/04/23 职场文书
学校节能减排方案
2014/06/13 职场文书
学校领导班子群众路线整改措施
2014/09/16 职场文书
尝试使用Python爬取城市租房信息
2022/04/12 Python
MySQL分布式恢复进阶
2022/07/23 MySQL