Как подсчитать время выполнения скрипта js?

Question

Всем привет, я тут мучаюсь с одним скриптом, где по клику вызывается функция, попробовал поместить в промис:

$('.csv').on('click', async function ()
{
let start = new Date.getTime()
        let promiseScript = new Promise(function (resolve, reject)
        {

            // мой код...
        }
          resolve("done");
        });
let end = new Data.getTime()
        await promiseScript.then(document.querySelector('.description').innerHTML += `<span>На выполнение скрипта
 ушло ${end - start} ms</span>`);


            });

Но проблема в том, что он выводит сначала время выполнения скрипта, а уж только потом начинает выполнять скрипт. Как можно корректно измерить время выполнения этого срипта?

Answer 1

$('.csv').on('click', async function ()
{
let start = new Date.getTime()
        let promiseScript = new Promise(function (resolve, reject)
        {

            // мой код...
        }
          resolve("done");
        });
        await promiseScript.then(() => { 
            let end = new Data.getTime()
            document.querySelector('.description').innerHTML += `<span>На выполнение скрипта
 ушло ${end - start} ms</span>`);
        }
    });

Если вы отлаживаете приложение и эта надпись на странице вам не нужна, можно замерить время выполнения вот так:

$('.csv').on('click', async function ()
    {
    console.time('csvClick');
    let promiseScript = new Promise(function (resolve, reject)
        {

            // мой код...
        }
          resolve("done");
        });
        await promiseScript.then(() => { 
            let end = new Data.getTime()
            document.querySelector('.description').innerHTML += `<span>На выполнение скрипта
 ушло ${end - start} ms</span>`);
        }
    console.timeEnd('csvClick');
    });

И в консоли увидите правильное время, т.к. в вашем случае вы не учитываете время на рендер компонента в DOM.

Answer 2

Функцию promiseScript лучше объявлять через const так как Вы ее не меняете. Для того чтобы были заметны миллисекунды > 0 я добавил вывод в консоль и очистку, это занимает какое-то время.

Так как мы высчитываем в ней start и end то мы можем передать их вовне через resolve и без проблем получить их в then через дестурктуризацию:

Для лучшей структуры кода и пере использования я создал отдельную функцию для замера времени measureTime, так же тестируемую функцию testFinction и обработчик клика на кнопке запускающий тест.

// функция замера времени
// func - тестируемая функция
const measureTime = func => new Promise((resolve, reject) => {
  let start = (new Date).getTime()
  func() // вызываем тестируюмую функцию
  const end = (new Date).getTime()
  resolve([start, end]);
})

// какая-то тестируемая функция
const testFinction = () => {
  // мой код...
  console.log('')
  console.clear() // очищаем консоль
}

document.querySelector('.csv').onclick = async function (){
  // замеряем время testFinction
  const [start, end] = await measureTime(testFinction)
  // выводим результат
  document.querySelector('.description').innerHTML += 
  `<span>На выполнение скрипта  ушло ${end - start} ms</span></br>`
};

<button class="csv">Произвести замер</button>
<p class="description"></p>

БЛОГ НА HUSL

Как подсчитать время выполнения скрипта js?

Ответы (2 шт):