現在的位置: 首頁 > web前端 > 正文

createDocumentFragment()是什么意思?createDocumentFragment()怎么應用

2020年06月15日 web前端 ⁄ 共 1340字 ⁄ 字號 評論關閉

  每次JavaScript對DOM的操作都會改變當前頁面的呈現,并重新刷新整個頁面,從而消耗了大量的時間。為解決這個問題,可以創建一個文檔碎片,把所有的新節點附加其上,然后把文檔碎片的內容一次性添加到document中,這個就是createDocumentFragment()的用武之處。下面學步園小編來講解下createDocumentFragment()是什么意思?createDocumentFragment()怎么應用?

  createDocumentFragment()是什么意思

  DocumentFragment:表示文檔的一部分(或一段),更確切地說,它表示一個或多個鄰接的 Document 節點和它們的所有子孫節點。

  DocumentFragment 節點不屬于文檔樹,繼承的 parentNode 屬性總是 null。

  不過它有一種特殊的行為,該行為使得它非常有用,即當請求把一個DocumentFragment 節點插入文檔樹時,插入的不是 DocumentFragment 自身,而是它的所有子孫節點。這使得 DocumentFragment 成了有用的占位符,暫時存放那些一次插入文檔的節點。它還有利于實現文檔的剪切、復制和粘貼操作。

  可以用Document.createDocumentFragment() 方法創建新的空 DocumentFragment 節點。

  說明:添加多個dom元素時,先將元素append到DocumentFragment中,最后統一將DocumentFragment添加到頁面。 該做法可以減少頁面渲染dom元素的次數。經IE和FireFox下測試,在append1000個元素時,效率能提高10%-30%,FireFox下提升較為明顯。

  createDocumentFragment()怎么應用

  使用appendChild逐個向DOM文檔中添加1000個新節點:

  for (var i = 0; i < 1000; i++)   {   var el = document.createElement('p');   el.innerHTML = i;   document.body.appendChild(el);   }   使用createDocumentFragment()一次性向DOM文檔中添加1000個新節點:   var frag = document.createDocumentFragment();   for (var i = 0; i < 1000; i++)   {   var el = document.createElement('p');   el.innerHTML = i; frag.appendChild(el);   }   document.body.appendChild(frag);   不要小瞧這10%-30%,效率的提高是著眼于多個細節的,如果我們能在很多地方都能讓程序運行速度提高10%-30%,那將是一個質的飛躍,您也將步入骨灰級玩家的行列。   以上就是關于“createDocumentFragment()是什么意思?createDocumentFragment()怎么應用”的內容,希望對大家有用。更多資訊請關注學步園。學步園,您學習IT技術的優質平臺!

抱歉!評論已關閉.

奔驰宝马破解版下载 安徽快三开奖号码 20140130上证指数 asg游戏理财平台 江苏体彩七位数开奖官网 融资股票和股票的区别 广西11选5平台 北京pc蛋蛋28投注预测 幸运农场幸运3复式 河南快3推荐号码一定牛 爱配资网址导航 广东快乐十分助手开奖 江西快三历史最大遗漏 快三北京快3走势图 七星彩论坛开奖结果 宁夏11选5在线购买 000725京东方股票行情