Javascript 加快初始加载时间的技巧

我有一张1320x1320的spritesheet，每张图片是120x120，总共有120张图片。我想如果我在JS中这样做：

for (var i = 1; i < 114; i++) { 
    Heroes[i].style.backgroundPosition = -72 * i + "px " + Math.floor(i / 11) * -72 + "px";
    // i'm assigning more values here that aren't in the overall class here but didn't want to bore you guys with pointless code
}

第一个问题，我从w3schools复制了这个，但是我想每个人都说在body标记结束之前放置脚本，所以在那里使用head标记可以吗？现在我的主要新问题是：

---

你认为上面的方法更好吗？还是我应该只包装for循环，为函数中的所有内容创建图像和位置，这样它实际上不会执行任何“重磅提升”，而是加载JS文件，一旦所有内容都加载完毕，我就调用函数在幕后完成工作？

就像你所做的那样，我会尽快显示菜单，然后我会设置一个超时或调查是否可以使用HTML5 workers实现，并在回调中设置背景图像偏移，为一个或几个图像设置一个单独的超时

然后我会确保如果这些超时没有在用户想要看游戏的时候结束，我会在游戏开始之前完成剩余的图像

---

这有意义吗？

如果网格很紧，那么为什么要使用偏移和绝对定位？只需让图像像普通HTML图像那样作为内联块元素流动即可。可以将容器设置为绝对宽度。这消除了大量的复杂性，并且应该使所有内容的加载速度更快

使用内容交付网络怎么样？这可能会加快图像加载的速度。

有点，谢谢你的回复。你是说我应该继续删除css，以便菜单尽快加载，让它只加载主要使用的css类+html+精灵表，然后设置创建、分配和放置图像的超时时间。我不知道回调是什么，我试着在回复之前快速浏览一下，但似乎我必须阅读更多关于回调的内容。不管怎样，我喜欢你的想法，如果用户想要使用游戏时超时没有结束，有没有办法在加载所有内容后才将onclick或eventlistener添加到某些按钮？比如，如果我将eventlisteners放在我设置为使用超时加载的JS文件的最底部，它会在最末端分配onclick吗？当然，您可以从javascript动态附加事件侦听器。例如，你可以在开始设置样式时添加它们。括号太多了，令人难以置信。好吧，说真的，这不会提高代码的性能，只会增加复制粘贴到Excel中的工作量。将它们链接到具有数组本身的类已经在减慢速度。但是，超时可能不是一个坏主意。抱歉，对其进行了一点编辑。这是一个很好的观点，加载一个包含120个值的数组并在mightov每次做更多工作时调用它，然后直接在JS中分配位置的麻烦就是你所说的，对吗？谢谢你的意见。如果数组包含了英雄的名字，那么不管它在哪里，会怎么样？奇怪，我以为我接受了编辑，但它没有显示出来？所以，我想你只是要设置一个class属性，并为每个属性赋值。事实上，如果你在循环中进行多个样式更改，你会有多个回流，如果你只分配一个CSS类，就不会发生这种情况。你可以查看这个答案和N.Sullivan文章的链接：实际上我甚至没有想到这一点，但那是因为它需要钱。请问您是否对定价有一个大致的想法，或者给我一个好的链接来研究这个问题？感谢您的建议这应该是免费的：最初我这样做了，但不得不切换到绝对定位，因为有过滤器和搜索栏，需要我重新定位元素，我使用绝对定位创建重新定位。在此之前，我实际上使用了insertNode，它工作得很好，但我无法用它完成转换，所以我切换到绝对定位=除非您知道更好的方法

setTimeout(function() {
    var heroesJS = document.createElement("script");
    heroesJS.src = "heroes.js";
    document.getElementsByTagName("head")[0].appendChild(heroesJS);
},3000);