位置:首页 > 软件操作教程 > 编程开发 > JavaScript > 问题详情

JavaScript 文档片段

提问人:刘团圆发布时间:2020-11-26

■知识点

    DocumentFragment是一个虚拟的节点类型,仅存在于内存中,没有添加到文档树,所以在网页中看不到渲染效果。使用文档片段的好处就是避免浏览器渲染和占用资源。当文档片段设计完善后,再使用JavaScript—次性添加到文档树中显示出来,这样可以提高效率。

    主要特征值:nodeType 值等于11、nodeName 等于"#document-fragment"、node Value 等于 null、parentNode 等于 null。

    创建文档片段的方法:

    var fragment = document.createDocumentFragment();

    使用appendChild()或insertBefore()方法可以把文档片段添加到文档树中。

    每次使用JavaScript操作DOM,都会改变页面呈现,并触发整个页面重新渲染(回流),从而消耗系统资源。为了解决这个问题,可以先创建一个文档片段,把所有的新节点附加到文档片段上,然后再把文档片段一次性添加到文档中,以减少页面重绘的次数。

■实例设计

下面的示例使用文档片段创建主流Web浏览器列表。

<ul id="ul"x/ul>

<script>

var element = document.getElementByld('ul');

var fragment = document.createDocumentFragment();

var browsers = ['Firefox', 'Chrome', 'Opera1, 'Safari', 'Internet Explorer'];

browsers.forEach(function(browser) {

    var li = document.createElement('li');

    li.textContent = browser;

    fragment.appendChild(li);                   //此处往文档片段插入子节点,不会引起回流

});

element.appendChild(fragment);                  //将打包好的文档片段插入ul节点

</script>

    上面的示例准备为ul元素添加5个列表项。如果逐个添加列表项,将会导致浏览器反复渲染页面。为避免这个问题,可以使用一个文档片段来保存创建的列表项,然后再一次性地将它们添加到文档中,这样能够提升系统的执行效率。

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部