提高JavaScript速度

我的网站www.runthisday.com具有JavaScript功能，可将大约一页的页面拉到用户屏幕宽度的50％，同时将其他组件推到左侧以为大约页面腾出空间。提高JavaScript速度

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

有没有一种方法可以解决这个问题，以便JavaScript能够快速工作，并且点击按钮时图像立即出现？将用户引导到加载页面修复此问题？如果是这样，你能指引我到哪里，这将告诉我如何使用JavaScript来以这种方式加载网站。

我真的很感谢帮助。

2016-07-04 c_harrris

您需要缩小图像。您的锤子图像是5000x3333px的分辨率，使其成为内容区域的大小，并在保存时将photoshop或gimp中的质量设置为大约50％。现在，当文件只需要达到其当前大小的15-20％时，您正在提取大量图像数据......只是要注意Javascript没有问题，这个问题纯粹是基于资产 – Alex

您也可以首先加载低分辨率图像（并且非常快），甚至可能在屏幕显示前关闭屏幕，然后首先显示，然后加载完整的分辨率图像，并在完成时替换低分辨率图像。我也建议减少像素数量，但 - 5000x3333非常大。答案[这里]（http://stackoverflow.com/a/467943/4098951）可能会帮助你。 –

另外现在考虑一个5000x3333的图像对于移动用户来说是极其带宽密集的，页面加载最终可能会花费他们几MB的数据，并且会加载非常慢的数据，这意味着他们不会继续加载您的网站 – Alex

您的图像是巨大的。因此，首先将这些尺寸调整为更易于管理的尺寸。

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

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

来源

2016-07-04 17:04:37 naomik

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

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

来源

2017-09-10 23:37:47 MadMad666

提高JavaScript速度

回答

相关问题