title: Improve performance of jQuery for large amount of DOM processing
body: <p>I am implementing a blog page for my web application. I am using <a href="https://marked.js.org/" rel="nofollow noreferrer">marked</a> for markdown support and <a href="https://highlightjs.org/" rel="nofollow noreferrer">highlight.js</a> for code highlighting. Here is my code where I am handling parsing and highlighting:</p>
  <pre class="lang-js prettyprint-override"><code>import marked from &quot;marked&quot;;
  import DOMPurify from &quot;dompurify&quot;;
  import hljs from &quot;highlight.js&quot;;
  import $ from &quot;jquery&quot;;
  
  class MarkDownParser {
      // configuration for marked
      static markedOptions = {
          highlight: function (code, language) {
              if (language) {
                  const validLanguage = hljs.getLanguage(language);
  
                  if (validLanguage) {
                      return hljs.highlight(language, code).value;
                  }
              }
              return hljs.highlightAuto(code).value;
          },
          gfm: true,
          silent: true,
      };
  
      static getMarkDown(text) {
          var markedHtml = marked(text, this.markedOptions);
          var newHtml = '&lt;div id=&quot;container&quot; &gt;' + markedHtml + &quot;&lt;/div&gt;&quot;;
          var dom = $(newHtml);
  
          dom.find(&quot;code&quot;).each(function () {
              var par = $(this).parent()[0];
  
              if (par.tagName === &quot;PRE&quot;) {
                  // adding line numbers in code blocks
                  var n = $(par).html().split(&quot;\n&quot;).length;
                  var line_nums = &quot;&lt;div class='line-num-container'&gt;&quot;;
  
                  for (var i = 1; i &lt;= n; i++) {
                      line_nums += `&lt;span class=&quot;line-num&quot;&gt;${i}&lt;/span&gt;`;
                  }
  
                  line_nums += &quot;&lt;/div&gt;&quot;;
                  $(par).prepend($(line_nums));
              } else {
                  // highlighting inline codes, because marked.js highlights blocked codes only
                  var code = $(this).text();
                  $(this).text(&quot;&quot;);
                  $(this).html(hljs.highlightAuto(code).value);
              }
          });
  
          // wrapping tables with div for overflow handling
          dom.find(&quot;table&quot;).each(function () {
              $(this).wrap(&quot;&lt;div class='table-wrapper'&gt;&lt;/div&gt;&quot;);
          });
  
          return DOMPurify.sanitize(dom.html());
      }
  }
  
  export default MarkDownParser;
  </code></pre>
  <p>In this function, I am parsing text using marked and then doing some more processing using jquery and highlight.js.</p>
  <p>My problem is, I am not quite satisfied with the performance of the <code>getMarkDown(text)</code> function. I am not sure why it is slow, but I am assuming that the reason is the big amount of DOM creation and insertion. When there are 100 lines of codes in the <code>&lt;code&gt;</code> tag, it will create 100 spans for line numbers and prepend it in the DOM. I have checked the execution time and found out that it spends most time in the first loop where I am working with the <code>&lt;code&gt;</code> tag. I have also noticed that, when I load my web app first time (after a hard reload), it works slower, after that it becomes faster than the first time.</p>
  <ul>
  <li>Why is this code slow?</li>
  <li>Why it is slower on the first load?</li>
  <li>How can I improve this code to achieve a better performance?</li>
  </ul>