Development of an internal social media platform with personalised dashboards for students
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

toolbar.timer.js 2.7KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. (function () {
  2. // Browser timing remains hidden unless we can successfully access the performance object
  3. var perf = window.performance || window.msPerformance ||
  4. window.webkitPerformance || window.mozPerformance;
  5. if (!perf)
  6. return;
  7. var rowCount = 0,
  8. timingOffset = perf.timing.navigationStart,
  9. timingEnd = perf.timing.loadEventEnd,
  10. totalTime = timingEnd - timingOffset;
  11. function getLeft(stat) {
  12. return ((perf.timing[stat] - timingOffset) / (totalTime)) * 100.0;
  13. }
  14. function getCSSWidth(stat, endStat) {
  15. var width = ((perf.timing[endStat] - perf.timing[stat]) / (totalTime)) * 100.0;
  16. // Calculate relative percent (same as sql panel logic)
  17. width = 100.0 * width / (100.0 - getLeft(stat));
  18. return (width < 1) ? "2px" : width + "%";
  19. }
  20. function addRow(stat, endStat) {
  21. rowCount++;
  22. var row = document.createElement('tr');
  23. row.className = (rowCount % 2) ? 'djDebugOdd' : 'djDebugEven';
  24. if (endStat) {
  25. // Render a start through end bar
  26. row.innerHTML = '<td>' + stat.replace('Start', '') + '</td>' +
  27. '<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></td>' +
  28. '<td>' + (perf.timing[stat] - timingOffset) + ' (+' + (perf.timing[endStat] - perf.timing[stat]) + ')</td>';
  29. row.querySelector('strong').style.width = getCSSWidth(stat, endStat);
  30. } else {
  31. // Render a point in time
  32. row.innerHTML = '<td>' + stat + '</td>' +
  33. '<td class="djdt-timeline"><div class="djDebugTimeline"><div class="djDebugLineChart"><strong>&#160;</strong></div></div></td>' +
  34. '<td>' + (perf.timing[stat] - timingOffset) + '</td>';
  35. row.querySelector('strong').style.width = '2px';
  36. }
  37. row.querySelector('.djDebugLineChart').style.left = getLeft(stat) + '%';
  38. document.querySelector('#djDebugBrowserTimingTableBody').appendChild(row);
  39. }
  40. // This is a reasonably complete and ordered set of timing periods (2 params) and events (1 param)
  41. addRow('domainLookupStart', 'domainLookupEnd');
  42. addRow('connectStart', 'connectEnd');
  43. addRow('requestStart', 'responseEnd'); // There is no requestEnd
  44. addRow('responseStart', 'responseEnd');
  45. addRow('domLoading', 'domComplete'); // Spans the events below
  46. addRow('domInteractive');
  47. addRow('domContentLoadedEventStart', 'domContentLoadedEventEnd');
  48. addRow('loadEventStart', 'loadEventEnd');
  49. document.querySelector('#djDebugBrowserTiming').classList.remove('djdt-hidden');
  50. })();