immediately show content of large text files

immediately show content of large text files

From: Milan Hauth
currently the rendering of large text files is not ideal

example: 800 KiB html file with 25K lines

rendering times
plain text file: 7 seconds
cgit: 18 seconds
github: 30 seconds (lazy loading on scroll)
gitea: 50 seconds
sourcehut: "800 KiB large file not shown."

one problem with cgit:
cgit first shows the line numbers
and then the file contents
so the first 16 seconds i see only line numbers
and empty space on the right side

i suggest to fix the "line numbers first" issue
by rendering numbers and contents in parallel

<style>
pre a {
user-select: none;
text-decoration: none;
display: inline-block;
width: 5em;
text-align: right;
margin-right: 1em;
}
</style>
<pre>
<a href=#L1 id=L1>1</a>&lt;!DOCTYPE html>
<a href=#L2 id=L2>2</a>
<a href=#L3 id=L3>3</a>&lt;html>
<a href=#L4 id=L4>4</a>
<a href=#L5 id=L5>5</a>&lt;!-- some comment -->
<a href=#L6 id=L6>6</a>
<a href=#L7 id=L7>7</a>&lt;body>

i generated the <pre> content with

grep -n "" | sed -E 's|&|\&amp;|g; s|<|\&lt;|g;
s|^([0-9]+):|<a href=#L\1 id=L\1>\1</a>|'

optimizations:
">" dont need escaping
attributes dont need quotes

for my file that means 7% smaller

to compare:

grep -n "" | sed -E 's|&|\&amp;|g; s|<|\&lt;|g; s|>|\&gt;|g;
s|^([0-9]+):|<a href="#L\1" id="L\1">\1</a>|'

> cgit: 18 seconds

my version renders in maybe 17 seconds...
but more important:
the file content is visible immediately