Benchmark: Sanitize - MeasureThat.net

HTML Preparation code:

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

Tests:

From preact sources
const strings = [ 'dsafsdafasdf', '>asdf<span>sdfsdf', 'sdfdsf&sdf"sdfadsfs\'sadf\nsadfasdf', '', '123#', ] const ENCODED_ENTITIES = /["&<]/ function encodeEntities(str) { // Skip all work for strings with no entities needing encoding: if (str.length === 0 || ENCODED_ENTITIES.test(str) === false) return str let last = 0, i = 0, out = '', ch = '' // Seek forward in str until the next entity char: for (; i < str.length; i++) { switch (str.charCodeAt(i)) { case 34: ch = '"' break case 38: ch = '&' break case 60: ch = '<' break default: continue } // Append skipped/buffered characters and the encoded entity: if (i !== last) out = out + str.slice(last, i) out = out + ch // Start the next seek/buffer after the entity's offset: last = i + 1 } if (i !== last) out = out + str.slice(last, i) return out } for (let i = 0; i < 100; i++) { strings.map(encodeEntities) }
Simple solution
const strings = [ 'dsafsdafasdf', '>asdf<span>sdfsdf', 'sdfdsf&sdf"sdfadsfs\'sadf\nsadfasdf', '', '123#', ] const sanitizeMap = { '<': '<', '>': '>', '"': '"', } const sanitize = value => { if (value === undefined || value == null) { return null } return String(value).replace(/[<>"]/g, char => sanitizeMap[char]) } for (let i = 0; i < 100; i++) { strings.map(sanitize) }
ChatGPT solution
const strings = [ 'dsafsdafasdf', '>asdf<span>sdfsdf', 'sdfdsf&sdf"sdfadsfs\'sadf\nsadfasdf', '', '123#', ] function sanitizeChatGPT(value) { if (!value) return '' return value .replace(/&/g, '&') .replace(/</g, '<') .replace(/>/g, '>') .replace(/"/g, '"') .replace(/'/g, ''') } for (let i = 0; i < 100; i++) { strings.map(sanitizeChatGPT) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
From preact sources
Simple solution
ChatGPT solution

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
From preact sources	26837.6 Ops/sec
Simple solution	21322.2 Ops/sec
ChatGPT solution	5815.6 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark tests performance of three different string sanitization approaches in JavaScript. This is particularly relevant for web applications where it's crucial to sanitize user input to prevent XSS (Cross-Site Scripting) attacks. The tests involve encoding certain characters, such as `<`, `>`, `&`, and `"` to safe HTML entities, ensuring they don't break the HTML structure or introduce security vulnerabilities.

### Approaches Compared:

1. **Preact Sources Approach**
   - **Implementation**: This approach utilizes a loop to process a list of strings and replaces specific characters with their corresponding HTML entities.
   - **Key Features**:
     - It checks the length of input and whether there are any characters that need encoding.
     - Uses a `switch` statement to determine which character to encode.
   - **Pros**:
     - Handles multiple characters and is explicit in converting them.
     - Efficiently skips strings that require no encoding.
   - **Cons**:
     - The use of a `switch` may be less optimal compared to a lookup table for larger character sets.
  
2. **Simple Solution Approach**
   - **Implementation**: This uses a predefined `sanitizeMap` to quickly look up the HTML entity corresponding to characters that need encoding.
   - **Key Features**:
     - Checks for `undefined` or `null` input, returning `null` in such cases.
     - Uses regular expressions to replace characters in one go.
   - **Pros**:
     - Fast performance due to the use of a lookup table.
     - Avoids complex looping with multiple condition checks.
   - **Cons**:
     - Only encodes three characters (`<`, `>`, `"`), potentially missing some broader edge cases.

3. **ChatGPT Solution Approach**
   - **Implementation**: This method replaces multiple characters in the string using a chain of `replace` calls with regular expressions.
   - **Key Features**:
     - Performs various replacements consecutively.
     - Returns an empty string for falsy values (e.g., null or undefined).
   - **Pros**:
     - It's straightforward and easy to understand.
     - Handles multiple types of dangerous characters (including single quotes).
   - **Cons**:
     - The multiple `replace` calls can lead to slower performance due to multiple iterations over the string.

### Performance Results:
Based on the benchmark results recorded from executions on Firefox 133, we see the following performance metrics:

- **From Preact Sources**: 
  - **Executions per Second**: 26,837.57 
  - This approach is the fastest of the three, likely due to its efficient handling of no-op cases and potentially optimized execution path.
  
- **Simple Solution**:
  - **Executions per Second**: 21,322.20 
  - It's slower than the Preact approach but remains an effective and faster alternative compared to the ChatGPT approach.

- **ChatGPT Solution**: 
  - **Executions per Second**: 5,815.63 
  - This is the slowest method, primarily because of the multiple `replace` operations that involve iterating through the string for each specified character.

### Other Considerations:
- The choice of sanitization method can impact not only performance but also code readability and maintainability. Consideration should also be given to which characters need to be sanitized, and the efficiency of the implemented solution when processing large inputs or high-frequency user interactions.
- Alternatives not covered in the benchmark could include using libraries dedicated specifically to sanitization like DOMPurify or similar, which can provide a more comprehensive and proven solution for preventing XSS attacks, albeit potentially at the cost of additional overhead. Using such libraries could reduce the need for developers to maintain their own sanitization functions, promoting best practices.

In summary, the Preact and Simple solutions offer strong performance with their specific approach to sanitizing input, while the

Related benchmarks:

Sanitize (version: 1)

Comparing performance of: From preact sources vs Simple solution vs ChatGPT solution

Created: 3 months ago by: Guest

Jump to the latest result

From preact sources

Simple solution

ChatGPT solution

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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