chore: Add performance markers for debugging (#1476)

build.mjs

@@ -82,6 +82,8 @@ await esbuild.build({
   write: dev,
   metafile: !dev && process.stdout.isTTY,
   logLevel: 'debug',
+  // XXX: Comment out to keep performance markers in non-dev builds for debugging
+  pure: ['performance.mark', 'performance.measure'],
 });
 
 // Background script

src/components/BookmarkBar.ts

@@ -29,6 +29,8 @@ export const BookmarkBar = (): BookmarkBarComponent => {
     // Add BookmarkNodes one at a time until they can't fit in the bookmark
     // bar and then create a folder with the overflowing items
     const resize = () => {
+      performance.mark('BookmarkBar');
+
       // Remove child nodes
       root.textContent = '';
 
@@ -95,6 +97,8 @@ export const BookmarkBar = (): BookmarkBarComponent => {
           append(otherBookmarksFolder, root);
         }
       }
+
+      performance.measure('BookmarkBar', 'BookmarkBar');
     };
 
     resize();

src/components/SearchResult.ts

@@ -40,6 +40,8 @@ export const SearchResult = <T extends LinkProps>(
   let renderedLength: number;
 
   const renderList = (listData: T[], showCount = DEFAULT_RESULTS_AMOUNT) => {
+    performance.mark(sectionName);
+
     const partial = isOpenTabs ? listData : listData.slice(0, showCount);
     const frag = createFragment();
     renderedLength = partial.length;
@@ -53,6 +55,8 @@ export const SearchResult = <T extends LinkProps>(
 
     root.hidden = !renderedLength;
     nodes.m.hidden = renderedLength >= listData.length;
+
+    performance.measure(sectionName, sectionName);
   };
 
   const update = (newData: T[]) => {

src/newtab.ts

@@ -11,6 +11,8 @@ declare global {
   }
 }
 
+performance.mark('Initialise Components');
+
 const frag = createFragment();
 // Create Search component first because it has asynchronous calls that can
 // execute while the remaining components are constructed
@@ -22,5 +24,7 @@ append(BookmarkBar(), frag);
 append(Menu(), frag);
 append(frag, document.body);
 
+performance.measure('Initialise Components', 'Initialise Components');
+
 document.body.__click = handleClick;
 setupSyntheticEvent('click');