<sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

    <sub id="17nj5"></sub>
    <sub id="17nj5"></sub>

    <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

        <track id="17nj5"></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£¬并且将对象当做节点?#21019;?#29702;£¬那么考虑到性能问题£¬你应该使用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更高效¡£

        关键词£º

        相关阅读:

        赞助商链接:

        2018ÌØÂëÉúФ±í
        <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

          <sub id="17nj5"></sub>
          <sub id="17nj5"></sub>

          <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

              <track id="17nj5"></track>
              <sub id="17nj5"><progress id="17nj5"></progress></sub><th id="17nj5"><progress id="17nj5"><nobr id="17nj5"></nobr></progress></th>

                <sub id="17nj5"></sub>
                <sub id="17nj5"></sub>

                <progress id="17nj5"><rp id="17nj5"><big id="17nj5"></big></rp></progress>

                    <track id="17nj5"></track>