Placing Inline Scripts

1. Avoid Inline Scripts Blocking Rendering

• Move inline scripts to the bottom (before the closing body tag).

• Use asynchronous callbacks to trigger JavaScript execution.

• Use the defer attribute of the script tag.

Move Inline Scripts to the Bottom

Place inline scripts before the closing body tag.

Pros: Simple and easy to use; resources like images in the page can download in parallel with inline scripts located at the bottom.

Cons: It still blocks page rendering. If the inline script execution time is long (greater than 300ms), this simple method should not be used.

Start Script Execution Asynchronously

Use setTimeout(doStuff, 0) to execute scripts asynchronously. In Firefox, a delay of 250ms is required (250 is the Nglayout.initialpaint.delay).

Pros: Enables progressive rendering; the browser will render DOM content (mostly text) before the inline script starts executing.

Cons: It blocks image rendering. If an image response returns while doStuff is running, the image will not display until doStuff finishes. In this case, setTimeout should be abandoned in favor of using window.onload to start script execution. Of course, if the inline script execution time is very short (less than 300ms), using setTimeout is perfectly fine.

P.S. For inline scripts with very long execution times, the ideal solution is to execute them in chunks every 300ms using setTimeout(doChunk, 300). However, this requires large-scale code refactoring to split massive logic into small segments (that can be completed within 300ms).

Use the defer Attribute of the script Tag

The defer attribute also applies to inline scripts, allowing the browser to continue parsing and rendering the page while delaying the execution of the inline script.

Pros: Parallel resource downloading.

Cons: Blocks rendering; it is only suitable for inline scripts with short execution times. Very long scripts still require setTimeout.

2. Stylesheets Also Block Inline Scripts

In addition to executing JS in the order it is included, browsers ensure that CSS is parsed in the order it is included (because different parsing orders lead to different styling results, such as style override rules for the same priority).

A little-known fact: Browsers also maintain the relative parsing order of CSS and JS. If an inline script is placed after a stylesheet, it will significantly delay resource downloads (the result is that subsequent resources can only start downloading after the stylesheet has finished downloading and the inline script has finished executing).

This is because inline scripts may contain code that depends on styles in the stylesheet, such as document.getElementsByClassName().

Conclusion: Inline scripts following a stylesheet will block the download of all subsequent resources (alternatively, if there is no inline script after a stylesheet, the stylesheet will be downloaded in parallel with other resources. Of course, regardless of whether there is a stylesheet before it, an inline script will block the download of subsequent resources).

3. Summary

Inline scripts can cause CSS to become blocking. Ensuring that only external scripts are referenced can avoid this problem.

References

• Even Faster Web Sites