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:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 2 months 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

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