图片加载似乎减慢了Javascript的执行速度

我正在一个简单的web应用程序，纯粹是Javascript。图片加载似乎减慢了Javascript的执行速度

其中一个核心功能是加载和查看图像。

当加载大量大图片时，脚本执行速度通常会变慢或甚至停止，直到其中一些加载完成，这对于大型文件（HTML5视频不会因为某些原因而不太糟糕）尤其明显。

通过使用jQuerys .css()设置div的background-image css属性加载图像，在加载图像之前没有任何阻塞事件或睡眠/等待时间。

奇怪的是，在OSX上，即使在全屏模式下（OSX浏览器为触控板留下摆动空间），滚动（使用Macbook触控板）可暂时缓解停顿/减速，这让我认为这是渲染或资源问题某种形式的分配。感觉浏览器不需要重绘，并且由于滚动而只能被强制执行。

我想强制它不断重绘，60 FPS。

2016-01-09 JKunstwald

那么你是否经常在滚动上设置背景图像属性，即使在已经有这个设置的图像上？也许你应该看看懒加载？ – adeneo

@adeneo不滚动，它会出现：用户输入 - >加载约。 20图像 - >根据进一步的用户输入操作DOM（幻灯片等） – JKunstwald

问题在于加载很多大图片并在应用程序中显示它们。您可以尝试图像延迟加载概念，只要您滚动窗口就可以加载/提取图像。

可能是这个link将是有帮助的。这个插件将负责在用户滚动时加载图像并且它非常易于使用。

有人可以尝试WebWorker的概念。它在javascript中的多线程。

2016-01-09 16:34:19 Azim

我也想过这个，但我仍然好奇：为什么如果浏览器实际上仍然有资源渲染，这会减慢呈现？ – JKunstwald

当浏览器处理许多图像时，渲染需要时间。它不仅关于资源，关于获取图像，然后渲染到UI中。考虑一下facebook的例子，有时即使页面被渲染，图片也需要时间来展示。而且，浏览器使用单个线程（这取决于浏览器），因此它会影响性能。也许你可以找一些工作转向使用新的概念称为WebWorker。 – Azim

我想补充一点，不要忘记图像优化。

2016-01-09 17:03:05

令人难过的是，因为图像不是来自我的（到任何地方的热链接都取决于用户输入）。 – JKunstwald

我想这个时间是不可能的。 –

回答