调试器显示 Firefox 中存在“强制布局”问题

Question

在调试时，我看到消息“在页面完全加载之前强制布局。如果尚未加载样式表，这可能会导致出现无样式内容的闪烁。” 当我收到此消息时，Firefox 找不到我的函数

<script src='Game_Help.js' onload="alert('loaded')"></script>

如果我删除<script>，该消息就会消失，但当然仍然找不到这些功能。

奇怪的是，我的 Edge 也有类似的问题。Chrome 工作正常。

PS：我使用该onload函数来查看脚本是否正在加载。我可以使用 iframe 来解决这个问题，但这看起来很奇怪。

Answer 1

因此，发生的情况是警报本身中断了内容的加载，从而导致了警告。因此，要修复它（并将脚本保留在 head 部分），请从脚本标记中删除 onLoad 事件，并将包含警报的事件侦听器添加到外部 javascript 文件中：

document.addEventListener("DOMContentLoaded", function(){ alert('loaded') });

该侦听器将等到其他内容加载后才会运行。

解决此问题的另一种方法是将脚本标记移动到正文（HTML 从上到下加载，因此您只需让其他所有内容或多或少地加载，直到到达脚本为止）。如果您的内容相当复杂或者有多个脚本，那么使用事件监听器将是一个更强大和更具体的解决方案。