innerHTML vs createElement

paulli3 發布于2019-08-19 17:26 / 3490人閱讀

摘要：，當元素插入后仍然保留對元素的指針。能夠獲得事件處理函數，而生成的新無法獲得原先設置的事件處理函數。某些情況下，更加快速。無疑，在大多數情況下，更為快速且更加易用，但是使用的時候小心上述的那個問題就好。

WilsonLiu"s blog 首發地址
兩者生成dom的方式有什么優劣呢？
首先讓我們看一個小問題再引入正題～

如何重復插入一個相同的html結構呢？

//錯誤的
window.onload = function(){
var el = document.createElement("div");
el.appendChild(document.createTextNode("Hi"));
for (var i = 10; i > 0; --i)
document.body.appendChild(el);
};  //同一元素無法重復插入，

//正確的　　同時注意不要設置插入多次的元素的id,否則造成錯誤
window.onload = function(){
var el = document.createElement("div");
el.appendChild(document.createTextNode("Hi"));
for (var i = 10; i > 0; --i)
document.body.appendChild(el.cloneNode(true));
};

上述之所以要用clone，是因為當時我的需求是克隆一個復雜的html結構，而并非生成一個簡單的dom元素。

重排與重繪

上述方法，雖然能夠成功生成相同的dom元素，但是性能上是存在問題的。
每次插入dom元素到body后，dom樹會重排，之后頁面會因為新的dom元素的插入而重新繪制，這兩個過程是極其耗時的。
因此，推薦使用文檔碎片document.createDocumentFragment()。

使用方法

//利用文檔碎片 提高性能  frag相當于一個容器 frag并不會插入body而是把frag的內部元素全部插入body
window.onload = function(){
var frag = document.createDocumentFragment();
var el = document.createElement("div");
el.appendChild(document.createTextNode("Hi"));
for (var i = 10; i > 0; --i)
frag.appendChild(el.cloneNode(true));  //先將生成的dom全部插入frag先，這個過程并不會觸發重排與重繪
};
document.body.appendChild(frag); //將生成的frag插入body中，將10此重排重繪的過程壓縮為一次

接下來，進入正題的比較

innerHTML vs createElement

生成Dom的兩種方式，孰優孰劣呢？
就我們的經驗看來，innerHTML這種采用字符串拼接生成dom的方式似乎更加方便，并且效率更高。但是那原生的createElement又有什么優勢呢？
以下，優勢觀點來自于stack overflow的言論，翻譯的也不一點準確，歡迎探討。

createElement，當元素插入后仍然保留對dom元素的指針。而innerHTML插入后，并沒有對dom元素的指針，你需要再通過getElementById重新選取。

createElement能夠獲得事件處理函數，而innerHTML生成的新dom無法獲得原先設置的事件處理函數。

某些情況下，createElement更加快速。如果你需要反復操作字符串，在每次處理后再次插入。每次插入都將進行解析與制作dom，在性能上會很差。

可讀性與可維護上createElement會優秀一些

下面提供一段封裝好了的讓你方便的使用createElement的函數

    function isArray(a) {
        return Object.prototype.toString.call(a) === "[object Array]";
    }

    function make(desc) {
        if (!isArray(desc)) {
            return make.call(this, Array.prototype.slice.call(arguments));
        }

        var name = desc[0];
        var attributes = desc[1];

        var el = document.createElement(name);

        var start = 1;
        if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {
            for (var attr in attributes) {
                el[attr] = attributes[attr];
            }
            start = 2;
        }

        for (var i = start; i < desc.length; i++) {
            if (isArray(desc[i])) {
                el.appendChild(make(desc[i]));
            }
            else {
                el.appendChild(document.createTextNode(desc[i]));
            }
        }

        return el;
    }

使用方式

make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);

你會得到這樣一個html結構

Here is a link.

綜上，兩者各有各的好處。無疑，在大多數情況下，innerHTML更為快速且更加易用，但是使用innerHTML的時候小心上述的那個問題就好。

Advantages of createElement over innerHTML?

JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78512.html

2017拼多多前端筆試

摘要：但是如果一個值不再用到了，引用次數卻不為，垃圾回收機制卻無法釋放這塊內存，從而導致內存泄漏。內存泄漏垃圾回收語言的內存泄漏主因是不需要的引用。常見內存泄漏意外的全局變量處理未定義變量的方式比較寬松未定義的變量會在全局對象創建一個新變量。簡答題： settimeout 與 setInterval的區別，及對他們的內存的分析區別 setTimeout是在一段時間后調用指定函數（僅一...

Jioby 2019-08-01 17:20 評論0 收藏0
2017拼多多前端筆試

摘要：但是如果一個值不再用到了，引用次數卻不為，垃圾回收機制卻無法釋放這塊內存，從而導致內存泄漏。內存泄漏垃圾回收語言的內存泄漏主因是不需要的引用。常見內存泄漏意外的全局變量處理未定義變量的方式比較寬松未定義的變量會在全局對象創建一個新變量。簡答題： settimeout 與 setInterval的區別，及對他們的內存的分析區別 setTimeout是在一段時間后調用指定函數（僅一...

caiyongji 2019-08-20 18:30 評論0 收藏0
2017拼多多前端筆試

摘要：但是如果一個值不再用到了，引用次數卻不為，垃圾回收機制卻無法釋放這塊內存，從而導致內存泄漏。內存泄漏垃圾回收語言的內存泄漏主因是不需要的引用。常見內存泄漏意外的全局變量處理未定義變量的方式比較寬松未定義的變量會在全局對象創建一個新變量。簡答題： settimeout 與 setInterval的區別，及對他們的內存的分析區別 setTimeout是在一段時間后調用指定函數（僅一...

genefy 2019-08-29 13:04 評論0 收藏0
Vue2.x踩坑與總結

摘要：年前就打算學習并總結一下，但是因為年前工作比較多，所以進展十分緩慢，現在終于學了一大部分，而且自己在學習開發中也踩了不少坑也總結了不少，所以將自己踩過的坑總結一下分享出來。因為在項目中使用了，所以對于也有一個踩坑總結，點擊鏈接。年前就打算學習并總結一下vue2.x，但是因為年前工作比較多，所以進展十分緩慢，現在終于學了一大部分，而且自己在學習開發中也踩了不少坑也總結了不少，所以將自己...

bovenson 2019-08-21 11:29 評論0 收藏0
1.前端自動化測試之視覺測試

摘要：視覺感知測試視覺回歸測試為了解決上面提到的各種問題，視覺感知測試孕育而生。第三種方式，無法進行視覺感知測試結果只能進行視覺回歸測試和上一版的繼續比較差異。前端自動化測試之視覺測試 showImg(https://segmentfault.com/img/remote/1460000014720180); 前端測試分類 showImg(https://segmentfault.co...

VioletJack 2019-08-26 11:53 評論0 收藏0