遞歸檢索包含子串的所有文本節(jié)點(diǎn)的最快方法
作者：dev
本文將深入探討幾種檢索HTML元素中所有子文本節(jié)點(diǎn)的方法，并通過性能測(cè)試找出最優(yōu)解。
在Web開發(fā)中，高效檢索文本節(jié)點(diǎn)對(duì)于實(shí)現(xiàn)關(guān)鍵詞高亮等功能至關(guān)重要，尤其是在處理動(dòng)態(tài)加載內(nèi)容的頁面時(shí)。本文將深入探討幾種檢索HTML元素中所有子文本節(jié)點(diǎn)的方法，并通過性能測(cè)試找出最優(yōu)解。
檢索方法概述
- 使用childNodes遞歸
- TreeWalker
- NodeIterator
- document.evaluate()配合XPath
性能測(cè)試
測(cè)試代碼基于一個(gè)由多個(gè)流行網(wǎng)站HTML代碼組合而成的樣本文檔。以下是幾種主要的檢索方法實(shí)現(xiàn)：
// childNodes遞歸
function recursiveChildNodes(el) {
var nodes = [];
function traverse(el) {
for (var i = 0; i < el.childNodes.length; i++) {
var node = el.childNodes[i];
if (node.nodeType == Node.TEXT_NODE) {
nodes.push(node);
} else traverse(node);
}
}
traverse(el);
return nodes;
}
// TreeWalker
function useTreeWalker(el) {
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
const nodes = [];
while (walker.nextNode()) nodes.push(walker.currentNode);
return nodes;
}
// NodeIterator
function useNodeIterator(el) {
const iterator = document.createNodeIterator(el, NodeFilter.SHOW_TEXT);
const nodes = [];
let node;
while (node = iterator.nextNode()) nodes.push(node);
return nodes;
}
// XPath
function useXPath(el) {
let iterator = document.evaluate("http://text()", el, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE);
const nodes = [];
let node;
while (node = iterator.iterateNext()) nodes.push(node);
return nodes;
}
測(cè)試結(jié)果顯示，TreeWalker、NodeIterator和XPath方法的性能相近，均比基于childNodes的遞歸方法快約5倍。
包含特定子串的文本節(jié)點(diǎn)檢索
對(duì)于需要查找包含特定子串的文本節(jié)點(diǎn)，比較了兩種方法：
- 使用TreeWalker獲取所有文本節(jié)點(diǎn)后過濾
- 直接使用XPath表達(dá)式查找包含特定字符串的文本節(jié)點(diǎn)
// TreeWalker + 過濾
function treeWalkerWithFilter(el, text) {
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
const nodes = [];
while (walker.nextNode()) {
if (walker.currentNode.nodeValue.includes(text)) {
nodes.push(walker.currentNode);
}
}
return nodes;
}
// XPath直接查找
function xpathDirectSearch(el, text) {
let iterator = document.evaluate(`//text()[contains(.,'${text}')]`, el, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE);
const nodes = [];
let node;
while (node = iterator.iterateNext()) nodes.push(node);
return nodes;
}
測(cè)試結(jié)果表明，使用TreeWalker獲取所有節(jié)點(diǎn)后再過濾的方法比直接使用XPath條件查詢更快。
結(jié)論與最佳實(shí)踐
- 對(duì)于檢索所有嵌套文本節(jié)點(diǎn)，document.createTreeWalker()和document.createNodeIterator()是最佳選擇。
- 當(dāng)需要查找包含特定子串的文本節(jié)點(diǎn)時(shí)，先使用TreeWalker獲取所有文本節(jié)點(diǎn)，然后進(jìn)行過濾是更高效的方法。
這些優(yōu)化技巧對(duì)于實(shí)現(xiàn)高性能的文本搜索和高亮功能尤為重要，特別是在處理大型、復(fù)雜的Web應(yīng)用時(shí)。通過選擇合適的方法，可以顯著提升頁面的響應(yīng)速度和用戶體驗(yàn)。
責(zé)任編輯：姜華
來源：
大遷世界
