One of the primary reasons to avoid placing script tags in the middle of your content, unless utilizing the async and defer attributes (which are not universally supported), is that they have the potential to obstruct the rendering of anything that comes after them. Since there is no way for the browser to guarantee that there won't be a document.write within the script tag that produces HTML output, it is necessary for the browser to download and execute the script before continuing to parse and display the remainder of the webpage. While some browsers may attempt to optimize this process by assuming the script will not alter the output significantly, others take a more cautious approach.
Embedding a script tag with an external src in your content is generally discouraged due to performance concerns. However, this issue does not apply to inline JavaScript, such as defining variables or adding event handlers to dynamically generated elements. Although not the most elegant solution, these practices incur a much lower performance overhead. Alternatively, inline scripts can also be utilized to load external scripts at a later time, similar to how Google Analytics loads its extensive tracking script.