通过 Dom 方法提高 innerHTML 性能

263 阅读 0 评论 174 点赞

我是靠谱客的博主优秀白羊，最近开发中收集的这篇文章主要介绍通过 Dom 方法提高 innerHTML 性能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

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 的方法更效率点。