提高JavaScript速度

Improve JavaScript Speed

本文关键字：速度 JavaScript 提高      更新时间：2023-09-26

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

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

是否有一种方法来解决这个问题，使JavaScript工作迅速，图像立即出现时，按钮被点击?将用户引导到一个加载页面会解决这个问题吗?如果有的话，你能告诉我如何使用JavaScript以这种方式加载网站吗?

我真的很感谢你的帮助。

你的图片太大所以从调整它们的大小到一个更容易管理的大小开始。

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

// 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)

如果图像总是相同的，可能你可以存储在web缓存…永远……为了等待第一次…

另一个选择是不加载大的图像，也许你可以使用一些重复的标题图像…

相关文章：