Benchmark: escaping html 3232

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function esc(a, b, i) {
    let { 0: regex, 1: rep } = specialChars[i]
    return`${a.replace(regex, rep)}${typeof b === 'string' ? b.replace(regex, rep) : ''}`
}
function escape1(str) {
    return specialChars.reduce(esc, str)
}
const specialChars = [[/>/g, '&gt;'], [/</g, '&lt;'], [/&(?![#\w]+;)/g, '&amp;'], [/'/g, '&apos;'], [/"/g, '&quot;']]
let n = document.createElement('div')
function escape2(str) {
  n.textContent = str
  return n.innerHTML
}

Tests:

escape with regex
for(let i = 300; i--;) escape1(`<p>&"'hello</p>`.repeat(600))
built in escaping
for(let i = 300; i--;) escape2(`<p>&"'hello</p>`.repeat(600))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
escape with regex
built in escaping

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser/OS: Chrome 139 on Linux

View result in a separate tab

Test name	Executions per second
escape with regex	29.9 Ops/sec
built in escaping	90.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided measures the performance of two different methods for escaping HTML special characters in a string: one using regular expressions (`escape1`) and the other using a built-in DOM feature (`escape2`).

### Test Cases Explained

1. **escape1**:
   - **Method**: Utilizes regular expressions to replace special HTML characters with their corresponding HTML entities. The method iterates through a list of character replacements defined in `specialChars`.
   - **Functionality**: For each special character regex and its replacement, it applies the replacement to the input string using the `String.replace()` method.

```javascript
    function esc(a, b, i) {
        let { 0: regex, 1: rep } = specialChars[i];
        return `${a.replace(regex, rep)}${typeof b === 'string' ? b.replace(regex, rep) : ''}`;
    }
    
    function escape1(str) {
        return specialChars.reduce(esc, str);
    }
    ```

2. **escape2**:
   - **Method**: Uses the DOM's ability to parse and escape HTML by setting the `textContent` property of an element and then retrieving its `innerHTML`.
   - **Functionality**: Since setting `textContent` automatically handles escaping, this method is typically more efficient and safer in terms of preventing XSS attacks.

```javascript
    let n = document.createElement('div');
    
    function escape2(str) {
        n.textContent = str;
        return n.innerHTML;
    }
    ```

### Performance Metrics

According to the latest benchmark results, the `escape2` function (built-in escaping) achieved approximately **90.69 executions per second**, whereas `escape1` (escape with regex) achieved about **29.85 executions per second**. This demonstrates a substantial performance advantage for the built-in method.

### Pros and Cons of Each Approach

**escape1 (Regex-based Escaping) Pros:**
- Flexibility: Customizable for non-standard escaping needs beyond just HTML.
- Familiarity: Many developers are comfortable with regex and its syntax.

**Cons:**
- Performance: Significantly slower than DOM-based escaping as shown in the benchmark results.
- Complexity: May not handle all edge cases or complex HTML content reliably.

**escape2 (Built-in DOM Method) Pros:**
- Performance: Substantially faster as it leverages browser optimizations for DOM manipulation and parsing.
- Safety: Automatically handles various HTML/JavaScript injection attacks more effectively.

**Cons:**
- Limited scope: Primarily useful for HTML escaping; may not work for other types of content outside of HTML context.

### Other Considerations and Alternatives

- **Security**: Using `escape2` reduces XSS attack vectors compared to regex-based implementations, as it directly leverages the browser's parsing capabilities.
- **Readability and Maintainability**: Code using built-in DOM methods tends to be more understandable and less error-prone than complex regex operations.
  
**Alternatives:**
- For escaping JSON or other data formats, additional libraries or native functions should be employed.
- Libraries like **DOMPurify** can be utilized to sanitize and escape HTML securely if more complex handling is required.

### Conclusion

In this benchmark, escaping HTML special characters using the DOM is more efficient and safer than using regular expressions. When performance and security are paramount, leveraging built-in browser features is generally the best practice for such tasks.

Related benchmarks:

escaping html 3232 (version: 1)

Comparing performance of: escape with regex vs built in escaping

Created: 8 months ago by: Guest

Jump to the latest result

escape with regex

built in escaping

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 8 months ago):