Benchmark: Lazy-loading JSONP Script vs. DOM manipulation

HTML Preparation code:

<script id="jsonp-script" data-src="https://www.kayak.com/h/mobileapis/directory/airlines/homework?jsonp=JSONP_CALLBACK" defer></script>

Script Preparation code:

function JSONP_CALLBACK(data) {
	document.write(data);
}

Tests:

Lazy-load
const script = document.getElementById("jsonp-script"); script.setAttribute('src', script.dataset.src);
Lazy-load (direct src update)
const script = document.getElementById("jsonp-script"); script.src = script.dataset.src;
DOM Manipulation (sucks)
const script = document.createElement("SCRIPT"); script.src = "https://www.kayak.com/h/mobileapis/directory/airlines/homework?jsonp=JSONP_CALLBACK"

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lazy-load
Lazy-load (direct src update)
DOM Manipulation (sucks)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 122 on Android

View result in a separate tab

Test name	Executions per second
Lazy-load	1847687.0 Ops/sec
Lazy-load (direct src update)	1837580.1 Ops/sec
DOM Manipulation (sucks)	966106.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Overview**

The benchmark compares three approaches for loading a JSONP script: Lazy-loading with direct src update, Lazy-loading without direct src update (using `setAttribute`), and DOM manipulation. The goal is to determine which approach is faster.

**Lazy-loading with Direct Src Update**

This approach loads the script by setting its `src` attribute directly to the URL. This method is straightforward but may not be as efficient as other approaches, as it involves an additional property set operation.

Pros:

* Simple and easy to implement
* Does not require any special library or knowledge

Cons:

* May involve additional property set operations, which can slow down the loading process

**Lazy-loading without Direct Src Update**

This approach loads the script by setting its `src` attribute using the `setAttribute` method. This method is more efficient than the direct src update approach because it avoids the need for an additional property set operation.

Pros:

* More efficient than direct src update
* Still easy to implement

Cons:

* May require knowledge of JavaScript's `setAttribute` method

**DOM Manipulation**

This approach loads the script by creating a new `<SCRIPT>` element and setting its `src` attribute. This method is generally considered less efficient than lazy-loading approaches, as it involves more complex DOM operations.

Pros: None notable

Cons:

* Less efficient than lazy-loading approaches
* More complex DOM operations involved

**Library Used**

In this benchmark, the `jsonp` library is used to enable JSONP (JSON with Padding) support. JSONP allows a script to be loaded from a different domain and executed by the browser.

Pros of using `jsonp`:

* Enables loading scripts from different domains
* Useful for cross-domain communication

Cons of using `jsonp`:

* May introduce additional overhead due to the padding mechanism

**Special JavaScript Feature**

The benchmark uses a special JavaScript feature called "callback" (in this case, `JSONP_CALLBACK`). The callback function is executed when the script finishes loading, and it allows the browser to pass data from one domain to another.

Pros of using callbacks:

* Enables cross-domain communication
* Allows for flexible data passing mechanisms

Cons of using callbacks:

* May introduce additional complexity due to the need to handle callbacks
* Can lead to security issues if not handled properly

**Benchmark Results**

The benchmark results show that the "Lazy-load" approach is faster than the other two approaches. The "Lazy-load (direct src update)" approach is slower than the "Lazy-load" approach but still outperforms the DOM manipulation approach.

Overall, this benchmark demonstrates that lazy-loading with direct src update and lazy-loading without direct src update are more efficient than DOM manipulation for loading JSONP scripts. However, the choice of approach depends on specific requirements and use cases, and the pros and cons of each method should be carefully considered.

**Other Alternatives**

If you're looking for alternative approaches to this benchmark, consider:

* Using a JavaScript library like jQuery to simplify DOM manipulation and reduce overhead.
* Implementing a caching mechanism to reduce the number of requests made to the server.
* Optimizing the script loading process using techniques like code splitting or lazy loading with bundling.

Keep in mind that the best approach will depend on your specific use case and requirements.

Related benchmarks:

Lazy-loading JSONP Script vs. DOM manipulation (version: 0)

Comparing performance of: Lazy-load vs Lazy-load (direct src update) vs DOM Manipulation (sucks)

Created: 4 years ago by: Guest

Jump to the latest result

Lazy-load

Lazy-load (direct src update)

DOM Manipulation (sucks)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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