render-peformance-tracking.js

const getAccurateTimeStamp = window.performance.now.bind(window.performance);

const execute = (onIteration) => {
  const delay = 200,
    start = getAccurateTimeStamp();

  setTimeout(() => {
    const end = getAccurateTimeStamp(),
      duration = end - start;

    onIteration(duration - delay);

    execute(onIteration);
  }, delay);
};

export default function (target = document.body) {
  const renderElm = document.createElement('div');
  renderElm.setAttribute('style', `
    position: absolute;
    width: 200px;
    height: 550px;
  `);
  target.appendChild(renderElm);

  const logsLimit = 20,
    renderLimit = 5,
    failLimit = 100;

  let logs = [],
    countForRender = 0;

  const renderStats = (hangDuration) => {
    if (logs.length >= logsLimit) {
      logs.pop();
    }

    if (countForRender >= renderLimit) {
      renderElm.innerHTML = logs.join('');
      countForRender = 0;
    }

    logs.unshift(
      hangDuration > failLimit
      ? `<div style="color: #F44336; padding-bottom: 5px;">
          - freeze: ${(hangDuration / 1000).toFixed(2)} sec
         </div>
        `
      : `<div style="color: #4CAF50; padding-bottom: 5px;">
          + responsive
         </div>`
    );

    countForRender++;
  };

  execute(renderStats);
}