遞歸檢索包含子串的所有文本節點的最快方法

作者：dev 2024-10-24 10:16:36

本文將深入探討幾種檢索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應用時。通過選擇合適的方法，可以顯著提升頁面的響應速度和用戶體驗。

責任編輯：姜華來源：大遷世界

HTML元素遞歸檢索 Web開發