How to load large amount of text into html dynamically?

I am making an txt book reader app, I try to load the text with xhr then use innerHTML to display the text: div.innerHTML = '...lots of text', but this has major performance issue when the text is large. For example, if the text is larger than 2M, it might took almost 10 or more second for the whole page to finish rendering, and it basically freeze the page. I tried some lazy loading components, but they have issue with messing with scrolling and text selecting. I end up using an iframe to display the content that is server sider rendered, and just point the src to the SSR content, by using this method, the browse took care of all the loading and partially display the content and not freezing the whole page, but it's painful to deal with all the CORS issue. I have to manually bubble up the events occur inside iframe to parent window, and control all the state with postMessage.

It that a better way to do this?