{"id":14852,"date":"2026-10-26T07:35:00","date_gmt":"2026-10-26T06:35:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=14852"},"modified":"2026-10-24T06:36:39","modified_gmt":"2026-10-24T04:36:39","slug":"script-position-in-the-html-document-what-a-script-without-defer-can-see","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/en\/web-development\/script-position-in-the-html-document-what-a-script-without-defer-can-see\/","title":{"rendered":"Classic Scripts and the DOM: Finding Elements at the Right Time"},"content":{"rendered":"

A classic script processed by the HTML parser, without async<\/code> or effective defer<\/code><\/strong>, pauses further HTML parsing during execution. Elements appearing later in the source are normally not yet in the document tree (DOM). Modules, asynchronous scripts and dynamically inserted scripts follow different rules.<\/p>\n

This explains a common theme-switching failure: the header toggle works, but the first page load does not find images in the article below. All image files may be available; the query simply runs too early.<\/p>\n

\"Isolated
Test on 24 October 2026 in Chromium: two figures after the head script. The figures describe this fixture, not historical page traffic.<\/figcaption><\/figure>\n

Source position is not a runtime measurement<\/h2>\n

A byte position describes order in the delivered HTML. Counting opening tags does not automatically count existing DOM elements: comments, script text, implicitly created elements and later changes can affect the result. Earlier scripts can also have inserted additional elements.<\/p>\n

A useful test therefore records document.readyState<\/code> and the actual matches at execution time. The earlier page-size and file-count figures are not presented here as reproduced measurements. A small isolated browser example demonstrates the mechanism instead.<\/p>\n

What the browser test demonstrates<\/h2>\n

In the test dated 24 October 2026, two figure<\/code> elements follow a classic script in the head. The early query finds zero figures. An external classic script with defer<\/code> and an ordinary module later find both figures. Adding defer<\/code> to the inline classic script does not postpone execution.<\/p>\n

querySelectorAll()<\/code> also returns a static list. The empty list captured early remains empty even after both figures exist. A fresh query is therefore needed after parsing. This was an isolated Chromium test, not a cross-browser matrix or a historical network capture of the website.<\/p>\n

Why a later click is not enough<\/h2>\n

A click after parsing tests a state change with the elements already present. That does not establish correct behaviour during the initial load. A click can also occur while loading continues, once the control is visible and an event handler is attached.<\/p>\n

A saved light preference, a reload in dark mode and a switch during loading are consequently separate test cases. The current theme state matters for each image swap. Existing header elements do not establish that the article figures below have already been created.<\/p>\n

Schedule the image swap after parsing<\/h2>\n

The following integration example requires an existing bilderJetztTauschen(hell)<\/code> function. That function must query the current images again on every call and set the appropriate addresses. The snippet only controls when execution happens.<\/p>\n

const wurzel = document.documentElement;\nlet bildtauschGeplant = false;\n\nfunction bilderTauschen(hell) {\n    if (document.readyState === 'loading') {\n        if (bildtauschGeplant) return;\n        bildtauschGeplant = true;\n        document.addEventListener('DOMContentLoaded', function () {\n            bildtauschGeplant = false;\n            bilderJetztTauschen(wurzel.getAttribute('data-theme') === 'light');\n        }, { once: true });\n        return;\n    }\n    bilderJetztTauschen(hell);\n}<\/code><\/pre>\n
While readyState<\/code> is loading<\/code>, at most one listener is registered. When the event fires, the current preference is read from data-theme<\/code>. After parsing, the function calls the image swap immediately with the supplied value. The root element must reflect the selection before this function is called.<\/p>\n
In the isolated test, three early calls produced exactly one later swap using the latest light preference. A subsequent call with the dark preference ran immediately. This is an improved example; the production theme was not changed as part of this article review.<\/p>\n
\n
Questions and answers<\/h2>\n
When do defer and modules help?<\/h3>\n
For external classic scripts, defer<\/code> schedules execution after HTML parsing and preserves document order. Ordinary modules also execute after parsing. async<\/code> does not provide that guarantee; execution depends on script availability. For modules, async<\/code> can matter even without a src<\/code> on the module itself. Both defer<\/code> and async<\/code> have no effect on inline classic scripts.<\/p>\n
Why DOMContentLoaded instead of load?<\/h3>\n
DOMContentLoaded<\/code> follows HTML parsing and the associated deferred scripts. The event does not wait for all images or asynchronous scripts; stylesheets can delay execution indirectly through waiting scripts. load<\/code> waits for additional page resources but excludes lazily loaded images. For required web fonts, document.fonts.ready<\/code> is the targeted check. Finding the figures only requires the parsed document tree.<\/p>\n
Does swapping prevent duplicate image transfers?<\/h3>\n
No. Preload scanning or image loading may already have requested the original address. Caching, loading distance, connection and browser behaviour determine the actual cost; loading=\"lazy\"<\/code> does not guarantee that a request is avoided. Network logs provide better evidence than script position.<\/p>\n
<picture><\/code> with prefers-color-scheme<\/code> can follow the system preference. A selection held only in localStorage<\/code> is neither readable by CSS media queries nor automatically known to the server. Server-side selection requires separately transmitting that state.<\/p>\n
What about articles inserted later?<\/h3>\n
DOMContentLoaded<\/code> does not fire again for the same document. A content change without full navigation needs a separate call after insertion. In the test, inserting a third figure later did not automatically trigger another swap.<\/p>\n<\/div>\n
\n
Sources<\/h2>\n