No document.write()

Why It Matters

• It blocks page rendering. When document.write() runs, the browser cannot continue parsing the rest of the HTML. Everything downstream — images, stylesheets, other scripts — waits until the write completes. This creates visible delays for users.
• Browsers may block it on slow connections. Chrome and other browsers actively intervene on 2G connections by blocking document.write() calls that inject external scripts. When this happens, the content simply disappears — no error message, no fallback, just a broken page.
• It can wipe out the entire page. If you call document.write() after the page has finished loading, it replaces everything on the page with the new content. This is a common and devastating mistake that destroys the entire user interface.
• It prevents resource optimization. The browser's preload scanner discovers and downloads resources in advance by looking ahead in the HTML. document.write() injects content that the preload scanner could not see, defeating this optimization.

How to Replace It

1. Use DOM manipulation methods. Replace document.write() with document.createElement(), appendChild(), or insertAdjacentHTML(). These methods add content to the page without interrupting the parser or blocking other resources.
2. Load scripts with async or defer. If document.write() was used to inject a script tag, add the script directly in your HTML with the async or defer attribute instead. Both allow the script to load without blocking the page.
3. Use innerHTML for dynamic content. If you need to inject a block of HTML into a specific container, set the container's innerHTML property. This is cleaner, does not block parsing, and targets a specific element rather than the entire document stream.
4. Search your codebase for existing uses. Check both your own scripts and third-party libraries for document.write() calls. Older analytics snippets, ad scripts, and legacy widgets are common sources. Update or replace them with modern equivalents.
5. Update third-party integrations. If a third-party service provides an embed snippet that uses document.write(), check their documentation for updated integration code. Most providers now offer async alternatives.

Common Mistakes

• Assuming it only affects old browsers. Modern browsers like Chrome actively penalize document.write() by blocking it on slow connections. This is not a legacy concern — it is an active, current performance issue.
• Overlooking third-party code. Your own code might be clean, but an old analytics snippet or ad tag could still be using document.write(). Check every script that runs on your page, not just the ones you wrote.
• Calling it after page load. Using document.write() after the DOM has finished loading does not append content — it replaces the entire page. This is a destructive operation that erases everything the user was looking at.
• Replacing it with synchronous alternatives. Swapping document.write() for a synchronous XHR that injects content trades one blocking problem for another. Use asynchronous methods to avoid blocking entirely.