在window.onload之前执行耗时的任务

Question

我提交了HTML5游戏，用于HTML5游戏平台以进行质量检查，并得到以下反馈：

你不应该在window.onload之前执行耗时的任务，但实际上是：DOM被阻止。

我不确定此评论的含义。我现在在做的是：

$(window).ready(
    ....
);

所以这是所有代码的切入点。那么$(window).ready和$(document).ready()以及window.onload之间的区别是什么。他们是否遵循固定的顺序来确定何时被触发？ DOM被阻止是什么意思？

Answer 1

dom ready vs window.load

$(document).ready(function(){});被触发，直到完全解析和呈现HTML，但在下载所有资产（图像，iframe等）之前。在下载所有图像后立即执行$(window).load。

这意味着：$(document).ready始终位于$(window).load之前。

DOM被阻止

非常缺乏技术而且不是真的。您展示了，您可以在＆＃34; DOM ready＆＃34;操作DOM。事实上，这是正确的事件。它们的含义如下：只要脚本正在执行，浏览器主线程就会被阻止。这意味着，浏览器无法在此时渲染/绘制任何内容，浏览器也无法响应。

这个建议背后的想法如下： 如果您正准备在DOM上执行脚本，则绘制将停止并在脚本执行后延迟。用户可能会看到某种类型的UI，因为此时DOM已经呈现，在大多数情况下，CSS也是，但不是图像。但是如果你在window.onload之后延迟它，浏览器也可以在你阻止主线程之前渲染图像和iframe，这意味着用户可能会更快地看到完全渲染的网站/游戏，尽管它还没有技术上的准备。

我的2美分

这是一个好的方法与否，真的取决于很多情况。如果你的JS做了很多UI事情，这很糟糕，因为用户不会很快看到最终用户界面，用户将在稍后看到它。如果你的JS对于页面工作很重要并且页面有一些更大的图像，那么延迟执行脚本是非常愚蠢的。考虑一下移动用户，他可能已经看到用于启动游戏的用户界面，但您的点击/点击事件尚未受约束，因为页面末尾有一个大图片，仍然需要加载？< / p>

如果您遇到性能问题，请不要将其延迟到另一点，这也会阻止主线程。但是你可以做什么：如果你有很多脚本，你可以将这些任务分成块，然后在真正需要而不是最初的时候执行它们。例如：你有一个菜单，这个菜单有一个隐藏的子菜单，最初需要一些特殊的dom操作。不要在dom ready或window.load上执行此操作，在第一次打开之前执行此操作。