提高 JavaScript 速度答案

【问题标题】：Improve JavaScript Speed提高 JavaScript 速度
【发布时间】：2016-07-04 16:49:24
【问题描述】：

我的网站www.runthisday.com 使用 JavaScript 将 about 页面拉到用户屏幕宽度的 50%，同时将其他组件向左推为 about 页面腾出空间。

问题是当用户第一次点击关于按钮时，这个 JavaScript 非常慢，因为 Chrome 等待图像加载。对于其他网络浏览器，JavaScript 很快，但图像需要一秒钟才能加载。第一次使用按钮后，关于幻灯片工作正常。但真正重要的是第一次。

有没有办法解决这个问题，以便 JavaScript 快速运行，并在单击按钮时立即显示图像？将用户引导到加载页面会解决这个问题吗？如果是这样，你能指导我到某个地方，告诉我如何使用 JavaScript 以这种方式加载网站。

非常感谢您的帮助。

【问题讨论】：

您需要缩小图像。您的锤子图像是 5000x3333px 的 res，使其与内容区域的大小相同，并在保存时将 photoshop 或 gimp 中的质量设置为 50% 左右。现在，当文件只需要其当前大小的 15-20% 时，您正在提取大量图像数据......只是要注意 Javascript 没有任何问题，这个问题纯粹是基于资产的
您也可以先加载一个低分辨率图像（并且非常快速），甚至可能在显示关于框之前离开屏幕，然后先显示它，然后加载您的全分辨率图像并替换低分辨率图像完成后重新设置。不过，我也建议减少像素数 - 5000x3333 非常大。答案here 可能会对您有所帮助。
另外考虑现在 5000x3333 的图像对于移动用户来说是非常占用带宽的，页面加载最终可能会花费他们几 MB 的数据，并且加载速度通常会非常慢，这意味着他们不会留下来加载您的网站
嘿，谢谢你们！这真的很有帮助。
@c_harrris 不客气，祝你好运！ :)

标签： javascript performance image-loading

【解决方案1】：

你的图片是巨大的。因此，首先将它们调整为更易于管理的大小。

但您可以做的另一件事是预加载您的图像。这是一个简单的包装器，您可以使用它来加载一些图像并知道它们何时准备就绪。

// Url -> Promise<ImageElement>
var image = function(src) {
  return new Promise(function(pass, fail) {
    var i = new Image()
    i.src = src
    i.onload = event=> pass(i)
  })
}
    
var url = "http://www.runthisday.com/img/the_hammer.jpg"
image(url).then(elem => document.body.appendChild(elem))

您甚至可以使用 Promise.all 包装器来确保为特定部分加载了多个图像

Promise.all([
  image('one.jpg'),
  image('two.jpg'),
  image('three.jpg')
]).then(images => console.log("all images loaded", images)

【讨论】：

【解决方案2】：

如果图像总是相同，也许你可以存储在网络缓存中......永远......为了第一次等待......

其他选项是不加载大图像，也许你可以使用一些重复的标题图像......在某些地方，真正需要时加载图像......

【讨论】：