遞歸檢索包含子串的所有文本節點的最快方法
作者：dev
本文將深入探討幾種檢索HTML元素中所有子文本節點的方法，并通過性能測試找出最優解。
在Web開發中，高效檢索文本節點對于實現關鍵詞高亮等功能至關重要，尤其是在處理動態加載內容的頁面時。本文將深入探討幾種檢索HTML元素中所有子文本節點的方法，并通過性能測試找出最優解。
檢索方法概述
- 使用childNodes遞歸
- TreeWalker
- NodeIterator
- document.evaluate()配合XPath
性能測試
測試代碼基于一個由多個流行網站HTML代碼組合而成的樣本文檔。以下是幾種主要的檢索方法實現：
// 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;
}
測試結果顯示，TreeWalker、NodeIterator和XPath方法的性能相近，均比基于childNodes的遞歸方法快約5倍。
包含特定子串的文本節點檢索
對于需要查找包含特定子串的文本節點，比較了兩種方法：
- 使用TreeWalker獲取所有文本節點后過濾
- 直接使用XPath表達式查找包含特定字符串的文本節點
// 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;
}
測試結果表明，使用TreeWalker獲取所有節點后再過濾的方法比直接使用XPath條件查詢更快。
結論與最佳實踐
- 對于檢索所有嵌套文本節點，document.createTreeWalker()和document.createNodeIterator()是最佳選擇。
- 當需要查找包含特定子串的文本節點時，先使用TreeWalker獲取所有文本節點，然后進行過濾是更高效的方法。
這些優化技巧對于實現高性能的文本搜索和高亮功能尤為重要，特別是在處理大型、復雜的Web應用時。通過選擇合適的方法，可以顯著提升頁面的響應速度和用戶體驗。
責任編輯：姜華
來源：
大遷世界
