<track id="xxzxz"></track>

    <pre id="xxzxz"><ruby id="xxzxz"></ruby></pre>

      <address id="xxzxz"><pre id="xxzxz"><span id="xxzxz"></span></pre></address>

      <noframes id="xxzxz">
      <pre id="xxzxz"><pre id="xxzxz"></pre></pre>

          <track id="xxzxz"></track>

            使用DocumentFragments或innerHTML取代復雜的元素注入

            2016-03-28 14:57:08來源:imooc作者:

            DOM操作在瀏覽器上是要付稅的。盡管性能提升是在瀏覽器,DOM很慢,如果你沒有注意到,你可能會察覺瀏覽器運行非常的慢。這就是為什么減少創建集中的DOM節點以及快速注入是那么的重要了。

            DOM操作在瀏覽器上是要付稅的。盡管性能提升是在瀏覽器,DOM很慢,如果你沒有注意到,你可能會察覺瀏覽器運行非常的慢。這就是為什么減少創建集中的DOM節點以及快速注入是那么的重要了。

            現在假設我們頁面中有一個<ul>元素,調用AJAX獲取JSON列表,然后使用JavaScript更新元素內容。通常,程序員會這么寫:

            Javascript代碼

            var list = document.querySelector(‘ul‘); 
            ajaxResult.items.forEach(function(item) { 
                // 創建<li>元素 
                var li = document.createElement(‘li‘); 
                li.innerHTML = item.text; 

                // <li>元素常規操作,例如添加class,更改屬性attribute,添加事件監聽等 

                // 迅速將<li>元素注入父級<ul>中 
                list.apppendChild(li); 
            }); 

            上面的代碼其實是一個錯誤的寫法,將<ul>元素帶著對每一個列表的DOM操作一起移植是非常慢的。如果你真的想要 使用document.createElement,并且將對象當做節點來處理,那么考慮到性能問題,你應該使用DocumentFragement。

            DocumentFragement 是一組子節點的“虛擬存儲”,并且它沒有父標簽。在我們的例子中,將DocumentFragement想象成看不見的<ul>元素,在 DOM外,一直保管著你的子節點,直到他們被注入DOM中。那么,原來的代碼就可以用DocumentFragment優化一下:

            Javascript代碼

            var frag = document.createDocumentFragment(); 

            ajaxResult.items.forEach(function(item) { 
                // 創建<li>元素 
                var li = document.createElement(‘li‘); 
                li.innerHTML = item.text; 

                // <li>元素常規操作 
                // 例如添加class,更改屬性attribute,添加事件監聽,添加子節點等 

                // 將<li>元素添加到碎片中 
                frag.appendChild(li); 
            }); 

            // 最后將所有的列表對象通過DocumentFragment集中注入DOM 

            document.querySelector(‘ul‘).appendChild(frag); 

            為DocumentFragment追加子元素,然后再將這個DocumentFragment加到父列表中,這一系列操作僅僅是一個DOM操作,因此它比起集中注入要快很多。

            如果你不需要將列表對象當做節點來操作,更好的方法是用字符串構建HTML內容:

            Javascript代碼

            var htmlStr = ‘‘; 

            ajaxResult.items.forEach(function(item) { 
                // 構建包含HTML頁面內容的字符串 
                htmlStr += ‘<li>‘ + item.text + ‘</li>‘; 
            }); 

            // 通過innerHTML設定ul內容 

            document.querySelector(‘ul‘).innerHTML = htmlStr; 

            這當中也只有一個DOM操作,并且比起DocumentFragment代碼量更少。在任何情況下,這兩種方法都比在每一次迭代中將元素注入DOM更高效。

            關鍵詞:

            相關閱讀:

            果冻传媒剧情张芸熙百度网盘,污娱社,人妻绿帽yin乱

            <track id="xxzxz"></track>

              <pre id="xxzxz"><ruby id="xxzxz"></ruby></pre>

                <address id="xxzxz"><pre id="xxzxz"><span id="xxzxz"></span></pre></address>

                <noframes id="xxzxz">
                <pre id="xxzxz"><pre id="xxzxz"></pre></pre>

                    <track id="xxzxz"></track>