JavaScript基準測試代碼凍結瀏覽器？

Question

我爲構建JavaScript框架代碼性能的基準構建了一個頁面。這裏是頁http://qatrix.com/benchmark/set-css-style

我的想法是使用獨立的iframe來獨立運行的代碼，以便使其不衝突之一。該基準測試函數成功運行，並能夠回到合理的結果，但對於這個基準測試頁的大問題是，它會暫時冷凍 Web瀏覽器，同時代碼乳寧鼠標光標正在指針，無論它在哪裏，和一些鼠標懸停效果也不可用。

那麼，什麼`什麼問題？以及如何解決這個問題？我看到一些基準測試網站沒有這個問題，但他們只是在我認爲會與衝突相同的頁面下進行基準測試。

這裏是標杆的iframe下乳寧的代碼：

var benchmark_code = function() 
{ 
    <?php echo $_GET['code'] ?> 
}, 
benchmark = function(times) 
{ 
    var start = new Date(), 
     i, end; 
    for(i = 0; i < times; i++) 
    { 
     if(i == 0) 
     { 
      try { 
       benchmark_code.call(); 
      } 
      catch (e) 
      { 
       return e; 
      } 
     } 
     else 
     { 
      benchmark_code.call(); 
     } 
    } 
    end = new Date(); 
    return end - start; 
}; 

和基準的源代碼在這裏（使用Qatrix框架）：

http://qatrix.com/js/benchmark.js

Answer 1

JavaScript是單線程與瀏覽器UI。當javascript正在執行時，所有其他瀏覽器活動都排隊等待JavaScript線程完成。因此，在您的基準測試運行時，您將無法與頁面進行交互。

如果您的時間基準的每一個人循環和總結的時間（而不是定時的整個運行），你可以保持瀏覽器活着的運行與setTimeout(fn, 0)每個循環。這將允許瀏覽器在基準測試的每個循環之間處理未決事件。

這裏的異步運行這些測試，以便瀏覽器能運行之間生存的方式：

var benchmark = function(times, resultCallback) { 
    var start, cum = 0, i = 0; 

    function runOnce() { 
     if (i++ < times) { 
      start = new Date(); 
      benchmark_code.call(); 
      cum += new Date() - start; 
      setTimeout(runOnce, 0); 
     } else { 
      resultCallback(cum); 
     } 
    } 
    try { 
     runOnce(); 
    } catch(e) { 
     return e; 
    } 
};