當 JS Profiling 開啟時，JavaScript 代碼運行得更快？ 什么？

Question

我的應用程序面臨一個非常奇怪的行為 - 如果我啟動分析器（必須是 JS 分析器），代碼的運行速度幾乎是原來的兩倍。

我用一個非常簡單的代碼復制了它，可以在這個小提琴上找到： https : //jsfiddle.net/zagrwk44/

問題是這只能在帶有舊顯卡的機器上重現。 我設法在配備AMD Radeon HD 6450顯卡的機器上重現它。 在較新的機器上，這不再重現。

探查器是如何讓代碼運行得更快的？？ 幾乎快兩倍！

這里花費時間的代碼只是改變屏幕上 div 的位置：

for (var i = 0; i < 1000000; i++) {
    box.style.top = getRandomInt(0, 100) + '%';
    box.style.left = getRandomInt(0, 100) + '%';                
};

我正在通過帶有console.profile和console.profileEnd javascript 啟動和停止分析器。 為了重現它，運行時必須打開 DevTools。

謝謝！

Answer 1

無法在我的機器上重現。
但是我很好奇您是否比較了使用 DevTools 打開的運行與使用 Profiler 的運行？ 如果是這樣，解釋可能是 DevTools 禁用了內部通知，例如在分析處於活動狀態時對 Elements 面板的更新。
如果您在關閉 DevTools 的情況下比較運行，那么它看起來真的很奇怪。

Answer 2

我遇到了同樣的問題，我可以在任何機器上重現這個問題。

DevTools 本身會減慢您的代碼執行速度，這只會影響修改 DOM 的 JS 代碼。 這個問題不會影響不接觸 DOM 的 JS 代碼。

如果您在快速修改 DOM 的同時查看 DevTools 中的“元素”選項卡，則每次修改 HTML 元素時，它都會閃爍並突出顯示修改后的元素。 我通過在包含大量元素的 SVG 圖表上進行測試進一步證實了這一點。

Chrome 分析器在打開時會明確禁用此 DOM 修改可視化功能。 換句話說，分析器的速度應該與 DevTools 關閉時的速度相同。

因此，遺憾的是，我必須關閉 DevTools 才能繼續使用我的大型 SVG 圖表。

Answer 3

我發現這種奇怪的行為只發生在“Windows server 2008 R2 Enterprise”操作系統上。

您的測試儀不是正確的指示，因為它使用隨機函數測試性能，這可能會導致每個樣本的結果不同，更重要的是您沒有從時間采樣中排除console.profile()和console.profileEnd()意味着你永遠不會得到真正的原生結果。

為了獲得更好和現實的結果，代碼應該如下所示：

var random = [80,90,15,5,70,50,60,25,36,45,62,58,76,23,93];

fbtn.addEventListener('click', function() {

    //START PROFILE BEFOR TIME START
    if (withProfiling.checked) {
      console.profile();
    }

    console.time('click handler'); 
    for (var i = 0, v =0; i < 1000000; i++, v++) {
      box.style.top = random[v] + '%'; //USE SAME NUMBERS FOR ALL TESTS
      box.style.left = random[v] + '%';//USE SAME NUMBERS FOR ALL TESTS 

      if(v >= 14){
        v= 0;
      }         
    };
    console.timeEnd('click handler');

    // STOP PROFILE AFTER TIME END
    if (withProfiling.checked) {
           console.profileEnd();
        }
   });

這是一個可以更深入地跟蹤它的測試器： http : //embed.plnkr.co/bdreL4UVFyyWtDoNTXRs/

我通過代碼刪除了啟動分析器，因為我發現通過手動啟動配置文件可以更好地恢復這種奇怪的行為。

要恢復它，請從 Chrome 上 DevTools 的配置文件中選擇“收集 Javascript CPU 配置文件”。

希望有用，

梅納赫姆