将script标签置于body闭合标签上方仍需点击弹窗确定后页面才加载，该如何解决？
2026-5-27
问题：页面需点击弹窗确定后才加载，如何解决？
我已经把script标签放在body闭合标签上方了，但页面必须等点击弹窗的确定按钮后才会加载，请问该怎么处理？
我的相关代码如下：
HTML代码
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>this is for beginners javascript</h1> <div> <p>this is a div</p> </div> <script src="js_notes.js"></script> </body> </html>
js_notes.js代码
alert('hello world');
解决方案
这是因为alert()是阻塞式函数——当浏览器执行到这行代码时，会暂停所有页面渲染和后续JS执行，直到你点击弹窗的确定按钮。而你的script放在body末尾，浏览器会按顺序解析到script就执行alert，这时候页面还没完成渲染，所以看起来像是页面要等弹窗关闭才加载。
要解决这个问题，我们需要让页面先完成渲染，再弹出alert。这里有两种简单有效的方法：
方法1：使用DOMContentLoaded事件
把alert放在DOM内容加载完成的回调里，这样浏览器会先渲染完整个页面，再执行弹窗：
修改js_notes.js为：
document.addEventListener('DOMContentLoaded', function() { alert('hello world'); });
方法2：使用setTimeout延迟执行
给alert加一个极短的延迟，让浏览器有时间完成页面渲染：
修改js_notes.js为：
setTimeout(function() { alert('hello world'); }, 0);
这里的0毫秒延迟并不是真的立刻执行，而是让浏览器先完成当前的渲染任务，再执行这个回调。
两种方法都能实现“先加载页面，再弹弹窗”的效果，你可以根据需求选择~
内容的提问来源于stack exchange，提问作者adhi narayan
