如何对 VueJs Store 中的函数进行基准测试？

Question

我的 VueJs2 存储配置中有以下脚本，我怀疑下面的 if 语句会导致额外的负载，即使没有触发，但我不确定：

   if(response.status === 204) {
  addToastMessage(I18n.t('library.withdrawal.errors.already_noted'), 'is-info');
  createDiv();
  const btn = document.createElement("button");
  addBtnAttributes(btn);
  btn.addEventListener("click", function() 
  { 
    commit('changeBookLoading', true);
    fetchNextTicket(response);
    commit('changeBookLoading', false);
  });
}

一般来说，作为 JS 测试的新手，我想听听有关进一步进行基准测试和调试的最佳方法的建议，任何提示都表示赞赏。

全功能：

 function loadBook(commit, dispatch, method, id=null) {
  commit('changeBookLoading', true);
  dispatch(method, id)
  .then((response) => {

     if(response.status === 204) {
  addToastMessage(I18n.t('library.withdrawal.errors.already_noted'), 'is-info');
  createDiv();
  const btn = document.createElement("button");
  addBtnAttributes(btn);
  btn.addEventListener("click", function() 
  { 
    commit('changeBookLoading', true);
    fetchNextTicket(response);
    commit('changeBookLoading', false);
  });
}
    const bookId = response.data[0].localBook.id;

    if (bookId !== locationBookId()) {
      history.pushState({}, `Book ${bookId}`, `/lib/book/${bookId}`);
    }

    commit('changeCurrentBookId', ticketId);
    commit('changeBookEi', null);
    commit('changeCurrentBook', null);
  })
  .catch((err) => {
    // show some global error
  })
  .finally(() => commit('changeLibraryLoading', false));
}

Answer 1

您可以使用以下方法测量任何代码块的执行时间：

console.time('some measure');
......
......
console.timeEnd('some measure');

你会得到如下控制台输出：一些测量： 0.0126953125 ms你只需要在 time 和 timeEnd 调用之间放置你的代码。