Vue中fragment.js使用方法小結(jié)
createDocumentFragment
如果要在一個節(jié)點上一次性插入多個元素怎么辦，比如說一次插入 10000 個節(jié)點？
最簡單粗暴的方式就是：
var parent = document.getElementById(`'parent'`);
for`(`var i = 0; i < 10000; i++) {
var child = document.createElement(`'div'`);
var text = document.createTextNode(`'' + i);`
child.appendChild(text);
parent.appendChild(child);
}
不過眾所周知的原因，對 DOM 反復(fù)操作會導(dǎo)致頁面重繪、回流，效率非常低，而且頁面可能會被卡死，這段代碼基本是沒人用的。
如果分段來進(jìn)行 DOM 操作呢，這樣就能避免卡死頁面了，js 忍者秘籍里面提到過可以用 setTimeout 來改進(jìn)：
var i = 0, max = 10000;
setTimeout(`function addNodes() {`
for`(`var step = i + 500; i < step; i++) {
var child = document.createElement(`'div'`);
child.appendChild(document.createTextNode(`'' + i));`
div.appendChild(child);
}
if`(i < max) {`
setTimeout(addNodes, 0);
}
}, 0);
當(dāng)然，更多能想到的方式應(yīng)該是，在內(nèi)存中直接操作節(jié)點，所有節(jié)點都湊在一起之后再跟 DOM 樹進(jìn)行交互，把所有節(jié)點都串在一個 div 上，然后再把 div 掛到 DOM 樹上：
var parent = document.getElementById(`'parent'`);
var div = document.createElement(`'div'`);
for`(`var i = 0; i < 10000; i++) {
var child = document.createElement(`'div'`);
var text = document.createTextNode(`'' + i);`
child.appendChild(text);
div.appendChild(child);
}
parent.appendChild(div);
如上，只跟 DOM 樹交互一次，性能方面肯定是大有改善的，不過額外插入了一個 div，如果說不是跟div之類的節(jié)點進(jìn)行交互呢，比如在 table 中插入 th、td？
這時候，createDocumentFragment 就該出馬了，翻譯過來叫“文檔片段”，按MDN的描述：
DocumentFragments 是一些 DOM 節(jié)點。它們不是 DOM 樹的一部分。通常的使用場景是創(chuàng)建一個文檔片段，然后將創(chuàng)建的 DOM 元素插入到文檔片段中，最后把文檔片段插入到 DOM 樹中。在 DOM 樹中，文檔片段會被替換為它所有的子元素。
因為文檔片段存在與內(nèi)存中，并不在 DOM 樹中，所以將子元素插入到文檔片段時不會引起頁面回流(對元素位置和幾何上的計算)。因此，使用文檔片段 document fragments 通常會起到優(yōu)化性能的作用。
簡單來說，就是上面一個例子的不需要 div 中轉(zhuǎn)版本，插入的時候，直接用其子元素替換其本身，非常完美。
雖然說，“好用的都不通用”（特別是針對某公司瀏覽器），不過這個好用的東西，甚至連 IE6 都支持。
具體代碼大概就長這樣：
var parent = document.getElementById(`'parent'`);
var frag = document.createDocumentFragment();
for`(`var i = 0; i < 10000; i++) {
var child = document.createElement(`'div'`);
var text = document.createTextNode(`'' + i);`
child.appendChild(text);
frag.appendChild(child);
}
parent.appendChild(frag);
具體性能方面的測試，有興趣的可以把所有代碼都跑一遍。
innerHTML
把一長串字符串轉(zhuǎn)換為對應(yīng)的 DOM 節(jié)點，正常而言，首先想到的肯定是 innerHTML。大概流程就是，先創(chuàng)建一個 div 節(jié)點，然后 div.innerHTML = str，根據(jù)需要把 div 的 children 取出來放到該放的地方去，div 本身給扔了。
如果想單獨生成一個 th 節(jié)點呢？
試試上面的流程：
var div = document.createElement(`'div'`); div.innerHTML = '<th>xxx</th>'`;` console.log(div);
實際輸出是（chrome 下）：
<`div>xxx</div`>
并沒有得到想要的：
<`div><th>xxx</th></div`>
對于這樣的結(jié)果是可以理解的，畢竟一個 th 放到 div 里面，怎么看都不對，直接把外圍的標(biāo)簽去掉，內(nèi)容扔到 div 里面也是相當(dāng)智能的。
不過架不住，有時候就是要獲取一個 th 節(jié)點。
其實也好辦，寫全了不就得了：
var node = document.createElement(`'div'`);
node.innerHTML = '<table><tbody><tr><th>xxx</th></tr></tbody></table>'`;`
// 把外面的幾層皮扒掉就是想要的 th 了
var depth = 3;
while`(depth--) {`
node = node.lastChild;
}
console.log(node.firstChild);
可以看出，結(jié)果正是所想要的。
fragment.js
// 需要單獨處理的一些特殊節(jié)點
var map = {
legend : [1, '<fieldset>', '</fieldset>'],
tr : [2, '<table><tbody>', '</tbody></table>'],
col : [2, '<table><tbody></tbody><colgroup>', '</colgroup></table>'],
_default : [0, '', '']
};
map.td = map.th = [3, '<table><tbody><tr>', '</tr></tbody></table>'];
map.option = map.optgroup = [1, '<select multiple="multiple">', '</select>'];
map.thead = map.tbody = map.colgroup = map.caption = map.tfoot = [1, '<table>', '</table>']
map.text = map.circle = map.ellipse = map.line = map.path = map.polygon = map.polyline = map.rect = [1, '<svg xmlns="http://www.w3.org/2000/svg" version="1.1">','</svg>'];
var TAG_RE = /<([\w:]+)/;
module.exports = function(templateString) {
var frag = document.createDocumentFragment(),
m = TAG_RE.exec(templateString);
// 單純字符串的情況
if(!m) {
frag.appendChild(document.createTextNode(templateString);
return frag;
}
var tag = m[1],
wrap = map[tag] || map._default,
depth = wrap[0],
prefix = wrap[1],
suffix = wrap[2],
node = document.createElement('div');
// 拼接節(jié)點字符串
node.innerHTML = prefix + templateString.trim() + suffix;
// 去除外包裹層，只留字符串轉(zhuǎn)化的節(jié)點
while(depth--) node = node.lastChild;
// 只有一個節(jié)點的情況
if(node.firstChild === node.lastChild) {
frag.appendChild(node.firstChild);
return frag;
}
// 多個節(jié)點，依序添加到 frag
var child;
while(child = node.firstChild) {
frag.appendChild(child);
}
return frag;
}
相關(guān)文章
vue+Element中table表格實現(xiàn)可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實現(xiàn)可編輯，實現(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
本文給大家分享了VUE制作點擊按鈕出現(xiàn)水波紋效果的組件過程，對此有需求的朋友可以跟著學(xué)習(xí)下。2018-04-04
今天小編就為大家分享一篇解決Vue打包上線之后部分CSS不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用Vue生成動態(tài)表單,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
這篇文章主要介紹了解決VUE在封裝了Axios后手動刷新頁面攔截器無效的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法
今天小編就為大家分享一篇vue跳轉(zhuǎn)同一個組件,參數(shù)不同,頁面接收值只接收一次的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文是主要介紹基于Vue的一個組件開發(fā)。本文給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友參考下吧2016-11-11
這篇文章主要介紹了vue實現(xiàn)鼠標(biāo)移入移出事件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要給大家介紹了關(guān)于vue中常見的問題及解決方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue數(shù)據(jù)監(jiān)聽器watch和watchEffect的使用
今天我們來學(xué)習(xí)一下watch監(jiān)聽器和它的好兄弟watchEffect監(jiān)聽器。這個相對來說比較簡單，用的不是很多，當(dāng)然了，根據(jù)自己的項目情況自行決定使用，希望對大家有所幫助2023-02-02