Чтобы иметь возможность просматривать древовидный документ (например, HTML) без полной загрузки, вам нужно сделать несколько предположений - например, документ является фактическим деревом. Так что не стоит проверять закрытые теги. В любом случае закрывающие теги предназначены для потребления человеком, компьютеры тоже были бы довольны <>
.
Первый шаг - предположить, что первая часть вашего документа представлена первой частью вашего документа. Это звучит как тавтология, но с «современным» HTML и, конечно, с JS, технически это уже не так. Тем не менее, если какая-либо строка HTML может повлиять на любой пиксель, вы просто не сможете частично загрузить страницу.
Итак, если существует простая связь между положением HTML-файла и страниц на экране, следующим шагом будет определение состояния разбора в конце каждой страницы. Это будет включать одно смещение файла, вероятно (но не обязательно) в конце абзаца. Также частью этого состояния является стек открытых тегов.
Чтобы упростить разбиение на страницы, разумно сохранять это состояние "границы страницы" для каждой страницы, с которой вы столкнулись до сих пор. Это облегчает пейджинг.
Теперь при рендеринге новой страницы граничное состояние предыдущей страницы даст вам начальное состояние рендеринга. Вы просто читаете HTML и визуализируете его поэлементно, пока не переполните одну страницу. Затем вы возвращаетесь немного назад и определяете новое граничное состояние страницы.
Плавная прокрутка - это, в основном, рендеринг двух соседних страниц и отображение x% первой и 100-x% второй. После того, как вы реализовали этот бит, может оказаться разумным завершить абзац при рендеринге каждой страницы. Это даст вам немного другую длину страницы, но вам не придется иметь дело с разбитыми абзацами, а это, в свою очередь, делает состояние границы вашей страницы немного меньше.