В настоящее время я пишу сложную подсветку синтаксиса, чтобы правильно выделить списки исходного кода. Чтобы протестировать производительность моего статически сгенерированного вывода HTML (даже при динамической замене DOM), я изначально использовал файл 3k LoC, который повторяется в HTML размером 1 МБ и заметил невыносимое снижение производительности в моей первой реализации. Ранее выходные данные имели следующий вид:
<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> <!-- ... -->
<!-- ... -->
При локальной загрузке сгенерированного HTML-файла Chrome не отвечал, прокрутка была невозможна, и мне пришлось придумать что-то совершенно другое,Таким образом, я взглянул на просмотр файлов Githubs и заметил, что они используют таблицы. Мне было любопытно, и в итоге я сделал следующее:
<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>
К моему удивлению, производительность была бесконечно лучше, и все было гладко, за исключением некоторых мелких проблем с выбором некоторых строк, которые являются проблемами CSS. Вообще мне было любопытно, почему использование таблицы так сильно повышает производительность. Кроме того, я хотел бы знать, есть ли еще варианты оптимизации, на которые я могу взглянуть.