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

Question

我将我的HTML5游戏提交给了一个HTML5游戏平台，供QA评审，并得到了以下反馈：

您不应该在window.onload之前执行耗时的任务，但是实际的是: DOM被阻塞了。

我不知道这次检讨是甚麽意思。我现在所做的是：

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

这是所有代码的入口点。那么，$(window).ready与$(document).ready()和window.onload的区别是什么呢？当他们被触发时，他们是否遵循一个固定的顺序？而DOM被阻塞意味着什么？

Answer 1

dom就绪与window.load

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

这意味着：$(document).ready总是先于$(window).load。

DOM被阻塞

是很不专业的，也不是真的。您可以展示，您可以在"DOM就绪“处操作DOM，而且实际上这是正确的操作事件。它们的意思是:只要脚本正在执行，浏览器主线程就会被阻塞。这意味着浏览器在这段时间内不能呈现/绘制任何内容，浏览器就会变得没有响应。

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

我的2美分

这是否是一个好办法，真的要看很多情况。如果你的JS做了很多UI的事情，那是不好的，因为用户不会很快看到最终的UI，用户稍后会看到它。如果您的JS对于页面的工作很重要，并且页面有一些更大的图像，那么延迟执行脚本是非常愚蠢的。考虑一下移动用户，他可能已经看到了启动游戏的UI，但是您的点击/点击事件还没有绑定，因为页面的末尾有一个大图像，还需要加载吗？

如果您有一个性能问题，修复它，不要延迟到一个她的点，这也会阻塞主线程。但是你能做的是:如果你有很多脚本，你可以把这些任务分割成块，然后在真正需要的时候执行它们，而不是最初的时候。例如:您有一个菜单，这个菜单有一个隐藏的子菜单，最初需要一些特殊的dom操作。不要在dom准备好或在window.load上这样做，在它第一次打开之前就这样做。