Benchmark: innerText - MeasureThat.net

HTML Preparation code:

<!DOCTYPE html>
<style>
.table-caption {
    visibility: hidden;
}
</style>
<div id="test" class="cart table-wrapper">
    <table class="cart items data table">
        <caption role="heading" aria-level="2" class="table-caption">Shopping Cart Items</caption>
        <thead convizit-ignore="true">
            <tr>
                <th class="col item" scope="col"><span>Product</span></th>
                <th class="col price" scope="col"><span>Price</span></th>
                <th class="col qty" scope="col"><span>Quantity</span></th>
                <th class="col subtotal" scope="col"><span>Subtotal</span></th>
            </tr>
        </thead>
        <tbody class="cart item">
            <tr class="item-info">
                <td data-th="Item" class="col item"> <a href="#"
                        title="Alyssa Boyleg" tabindex="-1" class="product-item-photo"> <span
                            class="product-image-container"><span class="product-image-wrapper"><img
                                    class="product-image-photo img-responsive"
                                    src=""
                                    alt="Alyssa Boyleg"></span></span> </a>
                    <div class="product-item-details"><strong class="product-item-name"> <a
                                href="#">Alyssa Boyleg</a> </strong>
                        <dl class="item-options">
                            <dt>Size</dt>
                            <dd> L </dd>
                            <dt>Color</dt>
                            <dd> Black </dd>
                        </dl>
                    </div>
                </td>
                <td class="col price" data-th="Price"> <span class="price-excluding-tax" data-label="Excl. Tax"> <span
                            class="cart-price"> <span class="price">MYR43.90</span></span> </span> </td>
                <td class="col qty" data-th="Qty">
                    <div class="field qty"><label class="label" for="cart-197870-qty"><span>Qty</span></label>
                        <div class="control qty"><input id="cart-197870-qty" name="cart[197870][qty]"
                                data-cart-item-id="XIP-3107-BLK-L" value="2" type="number" size="4" title="Qty"
                                class="input-text qty"></div>
                    </div>
                </td>
                <td class="col subtotal" data-th="Subtotal"> <address class="price-excluding-tax" data-label="Excl. Tax">
                        <span class="cart-price"> <address class="price">MYR87.80</address></span> </address> </td>
            </tr>
            <tr class="item-actions">
                <td colspan="100">
                    <div class="actions-toolbar">
                        <div id="gift-options-cart-item-197870"
                            class="gift-options-cart-item">
                        </div> <a class="action action-edit"
                            href="#"
                            title="Edit item parameters"><span class="fa fa-pencil"></span></a> <a href="#"
                            title="Remove item" class="action action-delete"><span
                                class="fa fa-trash"></span></a>
                    </div>
                  	<address>
                      Sensitive data
					</address>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Script Preparation code:

var element = document.querySelector("#test");

console.log(element.innerText);
console.log(innerText(element));
console.log(innerTextAdvanced(element));
console.log(innerTextMerge(element));

function innerText(el) {
  el = el.cloneNode(true) // can skip if mutability isn't a concern
  var nodes = el.querySelectorAll('address,*[convizit-ignore="true"]');
  nodes.forEach(s => s.remove())
  return el.innerText
}

function innerTextMerge(el) {
  	el = el.cloneNode(true);
	var nodes = [];
    var treeWalker = document.createTreeWalker(
        el,
        NodeFilter.SHOW_ELEMENT,
      	{ 
            acceptNode: function(node) {
                if(isIgnored(node)) {
                    nodes.push(node);
                    return NodeFilter.FILTER_REJECTACCEPT;
                }
                return NodeFilter.FILTER_SKIP
            }
        }
    );
    treeWalker.nextNode()
	nodes.forEach(s => s.remove())
    return el.innerText;
}

function innerTextAdvanced(el) {
    var treeWalker = document.createTreeWalker(
        el,
        NodeFilter.SHOW_ALL,
        { 
            acceptNode: function(node) {
                if(node.nodeType === Node.ELEMENT_NODE && (!isVisible(node) || isIgnored(node)) ) {
                    return NodeFilter.FILTER_REJECT;
                }
                if(node.nodeName === 'SCRIPT' && node.nodeName === 'STYLE' ) {
                    return NodeFilter.FILTER_REJECT;
                }
                return NodeFilter.FILTER_ACCEPT;
            }
        }
    );
    
    var text = '';
    while(treeWalker.nextNode()){
        var node = treeWalker.currentNode;

        if(node.nodeType === 3){
            var value = node.textContent.trim();
            if(value) {
                text += value + ' ';
            }
        }
    }

    return text.trim();
}

function isVisible(element) {
    const style = window.getComputedStyle(element);

    if (style.display === 'none') return false;

    if (style.visibility !== 'visible') return false;

    if (style.opacity < 0.1) return false;

    if (element.offsetWidth + element.getBoundingClientRect().width === 0) {
        return false;
    }

    if (element.offsetHeight + element.getBoundingClientRect().height === 0) {
        return false;
    }

    return true;
}

function isIgnored(element) {
    const ignoredTags = ['address'];

    if (ignoredTags.indexOf(element.nodeName.toLowerCase()) !== -1) return true;
    if (element.getAttribute('convizit-ignore') === 'true') return true;

    return false;
}

Tests:

Delete ignored nodes and get innerText
var text = innerText(element);
Itarate
var text = innerTextAdvanced(element);
Merge
var text = innerTextMerge(element);
innerText
var text = element.innerText;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Delete ignored nodes and get innerText
Itarate
Merge
innerText

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36

Browser/OS: Chrome 80 on Windows

View result in a separate tab

Test name	Executions per second
Delete ignored nodes and get innerText	7030.2 Ops/sec
Itarate	1528.1 Ops/sec
Merge	3726.4 Ops/sec
innerText	180042.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

I'll provide an answer based on the provided HTML code and benchmark results.

To delete ignored nodes, I assume it means removing any `<address>` or similar elements that contain sensitive data from the innerHTML of the element. In this case, there is one such element:

```
<address>
  Sensitive data
</address>
```

To iterate over the elements, I'll focus on the "Itarate" benchmark test, which likely involves extracting relevant information from each element.

To merge the results, I'll assume it means combining the innerText of multiple elements into a single string. The "Merge" benchmark test doesn't provide much context, so I'll focus on extracting the relevant parts of the `innerText` benchmark result.

Here's my answer:

Given the provided HTML code and benchmark results, here are some observations and possible solutions:

1. **Delete ignored nodes**: You can use the `replace()` method to remove any `<address>` elements from the innerHTML of an element:
```javascript
const text = innerHTML.replace(/<address>.*?<\/address>/g, '');
```
2. **Iterate over elements**: For the "Itarate" benchmark test, you can extract relevant information (e.g., the `innerText`) by iterating over the child elements of each node in the DOM:
```javascript
const elements = document.querySelectorAll('*');
elements.forEach((element) => {
  const text = element.innerText;
  console.log(text);
});
```
3. **Merge results**: For the "Merge" benchmark test, you can combine the innerText of multiple elements into a single string using the `join()` method:
```javascript
const texts = [];
document.querySelectorAll('*').forEach((element) => {
  texts.push(element.innerText);
});
const mergedText = texts.join('');
console.log(mergedText);
```
Please note that these are just possible solutions based on the provided information. The actual implementation might vary depending on your specific use case and requirements.

Related benchmarks:

innerText (version: 21)

Comparing performance of: Delete ignored nodes and get innerText vs Itarate vs Merge vs innerText

Created: 4 years ago by: Registered User

Jump to the latest result

Delete ignored nodes and get innerText

Itarate

Merge

innerText

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):