问题
I am currently writing a sophisticated syntax highlighter to properly highlight source code listings. In order to test the performance of my statically generated HTML output (not even while dynamically replacing the DOM) I initially used a 3k LoC file which resultend in an 1 MB HTML and noticed unbearable performance degradation on my first implementation. Previously the output was of this form:
<pre>
<code>
<span class="token import">import</span> <span class="token export-all">*</span> <!-- ... -->
<span class="token const">const</span> <span class="token const-var">LIMIT</span> <span class="token operator-assignment">=</span> <!-- ... -->
<!-- ... -->
</code>
</pre>
When loading the generated HTML file locally Chrome was unresponsive, scrolling wasn't really possible and I had to come up with something entirely different. Thus I took a peek at Githubs file view and noticed they were using tables. I was curious and ended up doing the following:
<table>
<tbody>
<tr><td style="white-space: pre;"><span class="token import">import</span> <span class="token export-all">*</span> <!-- ... --></td></tr>
<tr><td style="white-space: pre;"><span class="token const">const</span> <span class="token const-var">LIMIT</span> <span class="token operator-assignment">=</span> <!-- ... --></td></tr>
<!-- ... -->
</tbody>
</table>
The performance was infinitely better to my surprise and everything was smooth besides some minor issues with selecting some lines which is a CSS issues. Generally I was curious why using a table is improving performance this much. Furthermore I'd like to know whether there are more suggested optimizations I can take a look at.
来源：https://stackoverflow.com/questions/58471917/why-is-there-a-significant-performance-increase-when-using-td-and-tr-to-wrap-tho