Viewing large text files cause browser hang

[bagasme]

• Gitea version (or commit ref): master (commit 5c5cfd6) (compiled with Go 1.16.1, Node.js 14.15.4)
• Git version: 2.31.1
• Operating system: Debian 10
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (reproduction link)
  • [] No (not relevant)
• Log gist: log

Description

I have copy of git.git repository on my Gitea
instance on LXD instance on my computer. The computer has 4 GB (3.74 GiB)
RAM and 2.93 GiB swap.

After signing in, I browsed that repository, then tried to viewed po/fr.po
(about 700 KiB file). However, browser performance was sluggished (memory
usage was almost full, 100% CPU usage, more than 1 GiB swap used), causing
my computer to hang. I had to xkill the browser.

Surprisingly, Gitea only consumed 160 MiB during the hang, thus the bottleneck
was caused by the browser trying to render the page (2.2 GiB resident memory
was consumed by the browser).

Before starting the reproduction test, I started the browser with blank tab.
The initial memory usage were about 1.35 GiB RAM and 800 MiB swap (because
at the time of writing, I used the browser a lot, so much swap were eaten
up). Also, I repack the repo with git repack -A -d

This was happened with Firefox (Developer Edition).

[silverwind]

Some example links to big (but not overly so) files on try/github for comparision would help.

[bagasme]

@silverwind i can't currently reproduce on try because when i'm trying to sign in there with my GH account, it returns 500 error.

Anyway, to minimally reproduce:

1. mkdir test && cd test
2. create 800K text file by perl -e "print \"a\n\" x 400000;" > test (each line contains 2 bytes, each for a and newline)
3. git init && git add test && git commit test
4. On Gitea, create new repo (but don't initialize it).
5. Add repo URL on Gitea as remote for test repo and push.
6. Visit test file on Gitea. See if the browser hangs

[bagasme]

@silverwind i can reproduce on try.

[lunny]

The big file should be loaded asynchronously and multiple times.

[silverwind]

Big files work reasonably on GitHub so I suspect we either send the file contents too slowly or we give browser HTML which is hard to render. Would not async those requests if performance can be improved synchronously.

[Freeplayg]

I've made a snippet that people can temporarily add using something like the Stylus browser extension until this gets fixed:

.code-view > table > tbody > tr:nth-child(199)::after {
	content: "+ More";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding-bottom: 10px;
	background-image: linear-gradient(transparent, var(--color-body));
}
.code-view > table > tbody > tr:nth-child(n + 200) {
	display: none;
}

Really hoping this gets resolved soon, it was really hard for me update one of my repo's since my computer is really slow. Viewing large files on Github is fine for me though.