Run results for: Lazy-loading JSONP Script vs. DOM manipulation

Run details:

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: Chrome Mobile 122

Operating system: Android

Device Platform: Mobile

Date tested: 2 months ago

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"