当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 通过 Dom 方法提高 innerHTML 性能

Javascript
[HTML/CSS/Javascript]WWTJS
DynamicOptionList连动菜单代码
用meta实现的页面跳转代码
带缓冲的 收缩与展开内容效果
删除数组条目中重复的条目(可能有多个),返回值是一个仅包含被删除的重复条目的新数组。
javascript入门·对象属性方法大总结
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
JavaScript 入门·JavaScript 具有全范围的运算符
用javascript实现模拟火焰
JavaScript加密解密7种方法总结分析
javascript一段创建层的代码
简洁的一个实现网页全屏代码
关于 byval 与 byref 的区别分析总结
表单填写时用回车代替TAB的实现方法
javascript currentTarget对象介绍
js文本中搜索关键词输入效果
javascript实现的左右选择框效果代码
JS网络游戏-(模拟城市webgame)提供的一些例子下载
javascript最短的拖动代码[兼容FF]
javascript实现的LI列表输出,隔行同色的代码

Javascript 中的 通过 Dom 方法提高 innerHTML 性能


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 181 ::
收藏到网摘: n/a

此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍,replace 50 倍。
复制代码 代码如下:

function replaceHtml(el, html) {
var oldEl = typeof el === "string" ? document.getElementById(el) : el;
/*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* 一旦我们从 DOM 上移除老的元素,则返回新的元素引用。*/
return newEl;
};

对于 Opera 也依然有性能提高,只是提高幅度没有上面两种浏览器惊人而已,
唯在 IE 中,则原始的 innerHTML 的方法更效率点。