Perf fixes

src/components/status.jsx

@@ -1819,7 +1819,7 @@ const unfurlMastodonLink = throttle(
 
 const root = document.documentElement;
 const defaultBoundingBoxPadding = 8;
-function safeBoundingBoxPadding() {
+function _safeBoundingBoxPadding() {
   // Get safe area inset variables from root
   const style = getComputedStyle(root);
   const safeAreaInsetTop = style.getPropertyValue('--sai-top');
@@ -1837,6 +1837,9 @@ function safeBoundingBoxPadding() {
   // console.log(str);
   return str;
 }
+const safeBoundingBoxPadding = mem(_safeBoundingBoxPadding, {
+  maxAge: 10_000, // 10 seconds
+});
 
 function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
   const {

src/utils/enhance-content.js

@@ -7,17 +7,22 @@ function enhanceContent(content, opts = {}) {
   let enhancedContent = content;
   const dom = document.createElement('div');
   dom.innerHTML = enhancedContent;
+  const hasLink = /<a/i.test(enhancedContent);
+  const hasCodeBlock = enhancedContent.indexOf('```') !== -1;
 
   // Add target="_blank" to all links with no target="_blank"
   // E.g. `note` in `account`
+  if (hasLink) {
     const noTargetBlankLinks = Array.from(
       dom.querySelectorAll('a:not([target="_blank"])'),
     );
     noTargetBlankLinks.forEach((link) => {
       link.setAttribute('target', '_blank');
     });
+  }
 
   // Spanify un-spanned mentions
+  if (hasLink) {
     const notMentionLinks = Array.from(dom.querySelectorAll('a[href]'));
     notMentionLinks.forEach((link) => {
       const text = link.innerText.trim();
@@ -35,11 +40,14 @@ function enhanceContent(content, opts = {}) {
         link.classList.add('mention', 'hashtag');
       }
     });
+  }
 
   // EMOJIS
   // ======
   // Convert :shortcode: to <img />
-  let textNodes = extractTextNodes(dom);
+  let textNodes;
+  if (enhancedContent.indexOf(':') !== -1) {
+    textNodes = extractTextNodes(dom);
     textNodes.forEach((node) => {
       let html = node.nodeValue
         .replace(/&/g, '&amp;')
@@ -52,10 +60,12 @@ function enhanceContent(content, opts = {}) {
       const nodes = Array.from(fauxDiv.childNodes);
       node.replaceWith(...nodes);
     });
+  }
 
   // CODE BLOCKS
   // ===========
   // Convert ```code``` to <pre><code>code</code></pre>
+  if (hasCodeBlock) {
     const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
       /^```[^]+```$/g.test(p.innerText.trim()),
     );
@@ -66,8 +76,10 @@ function enhanceContent(content, opts = {}) {
       pre.innerHTML = `<code>${block.innerHTML.trim()}</code>`;
       block.replaceWith(pre);
     });
+  }
 
   // Convert multi-paragraph code blocks to <pre><code>code</code></pre>
+  if (hasCodeBlock) {
     const paragraphs = Array.from(dom.querySelectorAll('p'));
     // Filter out paragraphs with ``` in beginning only
     const codeBlocks = paragraphs.filter((p) => /^```/g.test(p.innerText));
@@ -103,10 +115,12 @@ function enhanceContent(content, opts = {}) {
         nextParagraphs.forEach((p) => p.remove());
       }
     });
+  }
 
   // INLINE CODE
   // ===========
   // Convert `code` to <code>code</code>
+  if (enhancedContent.indexOf('`') !== -1) {
     textNodes = extractTextNodes(dom);
     textNodes.forEach((node) => {
       let html = node.nodeValue
@@ -120,10 +134,12 @@ function enhanceContent(content, opts = {}) {
       const nodes = Array.from(fauxDiv.childNodes);
       node.replaceWith(...nodes);
     });
+  }
 
   // TWITTER USERNAMES
   // =================
   // Convert @username@twitter.com to <a href="https://twitter.com/username">@username@twitter.com</a>
+  if (/twitter\.com/i.test(enhancedContent)) {
     textNodes = extractTextNodes(dom, {
       rejectFilter: ['A'],
     });
@@ -142,10 +158,12 @@ function enhanceContent(content, opts = {}) {
       const nodes = Array.from(fauxDiv.childNodes);
       node.replaceWith(...nodes);
     });
+  }
 
   // HASHTAG STUFFING
   // ================
   // Get the <p> that contains a lot of hashtags, add a class to it
+  if (enhancedContent.indexOf('#') !== -1) {
     const hashtagStuffedParagraph = Array.from(dom.querySelectorAll('p')).find(
       (p) => {
         let hashtagCount = 0;
@@ -176,6 +194,7 @@ function enhanceContent(content, opts = {}) {
       hashtagStuffedParagraph.classList.add('hashtag-stuffing');
       hashtagStuffedParagraph.title = hashtagStuffedParagraph.innerText;
     }
+  }
 
   if (postEnhanceDOM) {
     postEnhanceDOM(dom); // mutate dom

src/utils/locale-match.jsx

@@ -1,6 +1,7 @@
 import { match } from '@formatjs/intl-localematcher';
+import mem from 'mem';
 
-function localeMatch(...args) {
+function _localeMatch(...args) {
   // Wrap in try/catch because localeMatcher throws on invalid locales
   try {
     return match(...args);
@@ -8,5 +9,8 @@ function localeMatch(...args) {
     return false;
   }
 }
+const localeMatch = mem(_localeMatch, {
+  cacheKey: (args) => args.join(),
+});
 
 export default localeMatch;