js 预览 大文件 TXT 浏览器渲染崩溃

从服务器请求回100M txt文件数据，如果一次性渲染导致浏览器崩溃。做分页渲染解决这个问题。

使用<pre>txt文本内容</pre>标签渲染txt文本内容。保留txt内容格式。

1.监听滚动条事件

2.从服务器请求回100M文本数据。

前端接收文本内容

xhr = new XMLHttpRequest()

接收结果
xhr.responseText  

3.对总内容xhr.responseText 分页。

总页数 = Math.ceil(总内容字符长度 / 每页显示的字符长度);

4.设置默认初始只显示5页， 每页控制显示1000个字符长度，可自定义数字。根据内容进行分割字符串。

_this.size = 1000

let defaultIndex = 5; // 请求数据结束后默认显示5页，如果内容较少总页数不够分5页，也不影响。
_this.start = 0;  // 初始截断位置
_this.end = _this.size; //结束截断位置
for (let i = 0; i < defaultIndex; i++) {
     _this.indexOfPage = i; // 记录分页下标
     divA.innerHTML = divA.innerHTML +  this.responseText.substr(_this.start, _this.size);  // 对显示文本的dom元素追加文本数据
     _this.start = _this.end;  // 初始截断位置变成上一次结束的位置
     _this.end = _this.end + _this.size; // 结束位置重新计算
 }

5.拖动滚动条到底部，如果还有未加载数据，继续渲染剩余的分页

滚动事件的函数内，滚动加载剩余的分页，继续追加分页渲染

_this.indexOfPage++;
if (_this.indexOfPage <= this.totalPage) {
     divA.innerHTML =divA.innerHTML + this.responseText.substr(this.start, this.size);
     this.start = this.end;
    this.end = this.end + this.size;
}

如果需求需要做左右翻页效果，可以借鉴小说阅读器，参考插件epubjs。