1. 程式人生 > >document.createElement和document.createDocumentFragment

document.createElement和document.createDocumentFragment

這裡對我目前瞭解的DOM API createElement和createDocumentFragment進行簡單的闡述:

  1. createElement()
    該方法一般帶有一個標籤名引數,用於建立nodeType=1的元素節點,如:
var div = document.createElement('div')
  1. createDocumentFragment()
    該方法不帶引數,用於建立nodeType=11的文件片段節點,如:
var ftagment = document.createDocumentFragment()

建立的fragment不在主DOM樹中,且它本身不作為一個DOM節點,而是一個容器,將其他的子節點包含其中。因為它不在主DOM樹中這個特點,當需要在其中新增大量的子節點的時候,最後再將其新增到主DOM樹中並不會引起頁面中元素的迴流

重繪,因此可以提升頁面效能。

這裡要注意的是,用createDocumentFragment生成的fragment只能append一次,即只能被放進DOM樹中一次(這裡貌似跟記憶體有關,不是很清楚)

迴流:元素的位置/尺寸/內容發生變化,或者啟用CSS偽類(例如::hover),或者查詢某些屬性或呼叫某些方法(這篇文章中有對應的這些方法)會引起迴流。
重繪:元素的顏色/背景色/可見性等不影響其位置的屬性發生變化會引起重繪。

因此,當對頁面效能要求比較高市,可儘量採用createDocumentFragment方法來動態生成文件片段。