成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

innerHTML vs createElement

paulli3 / 3554人閱讀

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

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

如何重復(fù)插入一個相同的html結(jié)構(gòu)呢？ 
//錯誤的
window.onload = function(){
var el = document.createElement("div");
el.appendChild(document.createTextNode("Hi"));
for (var i = 10; i > 0; --i)
document.body.appendChild(el);
};  //同一元素?zé)o法重復(fù)插入，
//正確的　　同時注意不要設(shè)置插入多次的元素的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，是因為當(dāng)時我的需求是克隆一個復(fù)雜的html結(jié)構(gòu)，而并非生成一個簡單的dom元素。

重排與重繪

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

使用方法

//利用文檔碎片 提高性能  frag相當(dāng)于一個容器 frag并不會插入body而是把frag的內(nèi)部元素全部插入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先，這個過程并不會觸發(fā)重排與重繪
};
document.body.appendChild(frag); //將生成的frag插入body中，將10此重排重繪的過程壓縮為一次

接下來，進入正題的比較

innerHTML vs createElement

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

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

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

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

可讀性與可維護上createElement會優(yōu)秀一些

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

    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結(jié)構(gòu)

Here is a link.

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

Advantages of createElement over innerHTML?

Advantages of createElement over innerHTML?

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78512.html

相關(guān)文章

  • 2017拼多多前端筆試

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

    Jioby 評論0 收藏0

  • 2017拼多多前端筆試

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

    caiyongji 評論0 收藏0

  • 2017拼多多前端筆試

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

    genefy 評論0 收藏0

  • Vue2.x踩坑與總結(jié)

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

    bovenson 評論0 收藏0

  • 1.前端自動化測試 之 視覺測試

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

    VioletJack 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<