Benchmark: JSON vs raw string

Script Preparation code:

const metadata = {
    FieldA: 'ValueForA',
    PropertyB: 'BasWell',
    AnotherC: 'ParamC',
    AndaD: 'ValueD',
    AlsoE: 'ValueForE'
}

var paramsJson = JSON.stringify(metadata);

var paramsStr = '';
for (const [key, value] of Object.entries(metadata)) {
    paramsStr += `&${key}=${value}`
}

Tests:

Parsing JSON and mapping to string
let src = 'https://baseurl.com/script.js?data=value'; const parsed = JSON.parse(paramsJson) for (const [key, value] of Object.entries(parsed)) { src += `&${key}=${value}` }
Doing the string addition upstream
let src = 'https://baseurl.com/script.js?data=value'; src += paramsStr

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Parsing JSON and mapping to string
Doing the string addition upstream

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
Parsing JSON and mapping to string	2171773.5 Ops/sec
Doing the string addition upstream	149745088.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark test cases.

**Benchmark Description**

The test compares two approaches to handling URL query parameters: parsing a JSON object and then concatenating its values as a URL-encoded string, versus directly concatenating the URL-encoded string of the original query parameters.

**Options Compared**

There are two options being compared:

1. **Parsing JSON and mapping to string**: This approach involves:
	* Creating a JavaScript object (`metadata`) with some key-value pairs.
	* Converting this object to a JSON string using `JSON.stringify()`.
	* Parsing the resulting JSON string back into an object using `JSON.parse()`.
	* Iterating over the parsed object's entries and concatenating each value as a URL-encoded string (`&key=value`).
2. **Doing the string addition upstream**: This approach involves:
	* Creating a JavaScript object (`metadata`) with some key-value pairs.
	* Creating an empty URL-encoded string (`paramsStr`).
	* Iterating over the original query parameters (which are hardcoded as a `for` loop) and concatenating each value to `paramsStr`.
3. **Libraries Used**: None of the test cases explicitly use any external libraries.

**Pros and Cons**

Here's a brief analysis of the two approaches:

**Parsing JSON and mapping to string:**

Pros:

* Can handle more complex data structures (e.g., arrays, objects with nested objects)
* May be safer from XSS attacks if the input data is properly sanitized

Cons:

* Requires extra parsing and formatting steps
* May incur additional overhead due to `JSON.parse()` and `JSON.stringify()` operations

**Doing the string addition upstream:**

Pros:

* Simplifies the logic and avoids unnecessary parsing and formatting steps
* Can be more efficient for simple cases with few query parameters

Cons:

* May not handle complex data structures or edge cases properly
* Exposes the developer to potential XSS vulnerabilities if input data is not sanitized correctly

**Other Considerations**

When writing URL-encoded strings, it's essential to follow best practices:

* Use `encodeURIComponent()` instead of concatenating values directly.
* Handle special characters (e.g., spaces, punctuation) using encoding schemes like `%` escaping or URLEncoding.

**Alternatives**

For more complex scenarios, you might consider the following alternatives:

1. **Use a URLSearchParams API**: Many modern browsers support the `URLSearchParams` API, which provides a safer and more efficient way to work with query parameters.
2. **Implement a custom query parameter handling library**: Depending on your specific use case, you might want to create a custom library that handles query parameters in a tailored manner.

Keep in mind that the trade-offs between these approaches depend on the specific requirements of your project, such as performance, security, and data complexity.

If you have any further questions or would like more information, feel free to ask!

Related benchmarks:

JSON vs raw string (version: 2)

Comparing performance of: Parsing JSON and mapping to string vs Doing the string addition upstream

Created: 3 years ago by: Registered User

Jump to the latest result

Parsing JSON and mapping to string

Doing the string addition upstream

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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