如何減少這個javascript代碼的cpu使用率？

時下我正在優化一些js代碼。
有一個名爲appendXYZ的函數，它在其他函數的循環中被調用。
它看起來像如下所示：
如何減少這個javascript代碼的cpu使用率？

function OuterFunc(){ 
    for(...){// about 150 times 
    ... 
    appendXYZ(); 
    //other dependent functions 
    ... 
    } 
}

，現在我敢肯定，appendXYZ導致CPU使用率很高 - 它可以達到50％，
但如果我刪除此功能，CPU使用率只有1 ％。
當CPU使用率爲50％時，瀏覽器幾乎被凍結，頁面缺乏響應。
更重要的是，OuterFunc每20秒執行一次並附加XYZ來自第三方腳本代碼，我無法對其進行修改。
那麼如何優化這段代碼呢？

現在我想使用setTimeout，但我不知道它是否工作。

來源

2011-10-18 simon xu

但是appendXYZ會做什麼？知道它被執行了150次並沒有多大幫助。 –

所以你基本上是問「我如何製作我無法更快修改的代碼」？ –

您可以使用網絡工作人員：https：//developer.mozilla.org/en/Using_web_workers。但是循環本身可能無法優化，您需要優化'appendXYZ'。 –

我不知道那個函數做了什麼，但是你可以嘗試使它的調用異步。

它可能會也可能不會工作，它仍然需要相同數量的CPU，但它至少應該釋放瀏覽器一點。

function OuterFunc(){ 
    for(var i = 0; i < 150; i++){ 
    // ... 
    setTimeout(appendXYZ, 0); 
    //other dependent functions 
    // ... 
    } 
}

再次這可能會打破功能。沒有看到更多的代碼是無法分辨的。

如果你傳遞的參數，那麼你需要這樣的：

function invoker(j) { 
    return function() { 
     appendXYZ(j); 
    }; 
} 

function OuterFunc(){ 
    for(var i = 0; i < 150; i++){ 
    // ... 
    setTimeout(invoker(i), 0); 
    //other dependent functions 
    // ... 
    } 
}

來源

2011-10-18 14:22:55 user113716

會不會凍結瀏覽器甚至更快？我的意思是'OuterFunc'執行得更快，但瀏覽器掛在所有'appendXYZ' **同時**調用上。 –

@ goin_13：單線程環境中沒有任何東西是同時發生的。 CPU使用率不應該總體上更好或更差。它只是讓瀏覽器有機會重繪，所以它似乎更響應最終用戶。最終沒有足夠的信息來提供實際的優化解決方案。 – user113716

@Ӫ_._Ӫ有效，當前使用率低於20％，瀏覽器響應。 –

一種可能性是，OuterFunc執行時間較大，它的重複間隔。
換句話說，OutherFunc需要20秒以上的時間來執行，並且每20秒調用它將產生一個stackoverflow異常，因爲該函數在它在無限循環中執行完成之前被調用。

(function helper(){ 
    OutherFunc(); 
    // after the OutherFunc is done executing, trigger it after 20 seconds 
    setTimeout(helper,20); 
})();

這可以幫助你只有在setInterval是的原因：
如果您正在使用setInterval執行OuterFunc功能每20秒，這可以通過使用setTimeout調用模擬setInterval功能是固定瀏覽器凍結。
如果這對你沒有幫助，並且你不太關心舊瀏覽器，也許你可以使用web-workers實現一種「線程」。這樣你的代碼就可以在不同的線程中執行，這肯定會加速你的應用程序（也就是說，再見瀏覽器凍結）。

希望這會有所幫助！

來源

2011-10-18 14:23:33

如果沒有什麼可以優化實際代碼的方法，則可以圍繞循環迭代的執行擴展以保持瀏覽器的響應。根據Robert Miller's paper，您可以保持一個用戶界面的最長時間並且仍然對用戶感覺響應爲100毫秒。有關如何使用setTimeout執行此操作的技巧，請參閱UI responsiveness and javascript。

來源

2011-10-18 14:26:52 airportyh

如何減少這個javascript代碼的cpu使用率？

回答

相關問題