提高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速度

回答

相關問題