关于大数据:体系课大数据工程师2022版20升级版fen享yun盘

60次阅读

共计 3749 个字符，预计需要花费 10 分钟才能阅读完成。

大数据 https://www.sisuoit.com

极限测试:如果您在 vue 我的项目中一次加载 2000 条数据，将会呈现正告:v-on 处理程序出错:“谬误: 已达到渲染我的项目限度，如下所示:

问题的起因

js 操作 dom 时，对 dom 的所有操作都会触发“重排”(包含重绘或回流)，重大影响能耗。所以要尽量减少 dom 操作，缩小“重排”
当 DOM 过多时，浏览器渲染会变慢甚至卡顿。所以能够思考虚构列表，保障每次显示的 DOM 数量少。

解决方案:

Js 动态创建元素
/**
* 代码片段 1
* 每个标签一次 creatElement 和 appendChild。* 有余: 屡次 appendChild 会造成页面重排，影响性能。*/
const node = document . createelement('div')；node.className = ' giftinfo
设 msg = data.msg

// 赠送礼物的用户的头像
let avatar = document . createelement('img')；avatar . class name = "avatar"；avatar.setAttribute('src'，msg . avatar | | userDefaultImg)；node.appendChild(头像)；// 礼物的用户名。let name = document . createelement("span")；name.className = ' name
姓名；innerText = msg 昵称 || '未知'；node.appendChild(名称)；// 送礼类型
let gif timg = document . createelement('img')；gift img . class name = 'img'；giftimg.setAttribute('src'，getGiftLists[msg.content])。网址)；node . appendchild(gif timg)；

复制代码
/**

* 代码片段 2
* 应用字符串拼接来缩小 appendChild 插入。* 有余: 如果各个列表的显示比较复杂，拼接的字符串容易出错，保护老本高。你有更好的打算吗？*/
const Li = document . createelement("Li")；Li . class name = user _ id = = = item . from _ uid？own_chat':'' + item.type === 'gift'？礼品我的项目“:”；let imghtml =// 图片地址
let name html = ` $ {item . from _ username} `；// 昵称

让 texthtml =// 内容
if (item.type === "gift") {Let giftname = ` 发送了一个 $ { item . content . value} `；let giftimg =
text html = ` $ {gift name} $ {gift img} `；}否则{texthtml = ` $ { item.content}// 内容
}
let infotop = ` $ {namehtml}// 顶部分区
let item info = ` $ {infotop} $ {text html} `；// 次要内容分区
Li . innerhtml = ` $ {imghtml} $ {iteminfo} `；# appendChild
node.appendChild(李)；

复制代码
应用文档片段增加 DOM 元素

文档片段是用于长期存储所创立的 dom 元素的容器。因为文档片段存在于内存中，而不是 DOM 树中，所以在文档片段中插入子元素不会导致页面回流。
当 DocumentFragment 节点被申请插入到文档树中时，它不是 DocumentFragment 自身，而是它的所有后辈。这使得 DocumentFragment 成为一个有用的占位符，长期存储一次插入到文档中的节点。也有利于实现文件的剪切、复制、粘贴操作。
DocumentFragment 节点不属于文档树，并且继承的 parentNode 属性始终为 null。

罕用办法:

document . createdocumentfragment()创立一个新的空 DocumentFragment 节点。Range.extractContents()或 Range.cloneContents()获取蕴含现有文档片段的 DocumentFragment 节点。

文档碎片有什么用？
先在文档片段中增加大量元素，再将文档片段增加到须要插入的地位，这样大大减少了 dom 操作，进步了性能(IE 和 Firefox 更显著)。

/**
* 持续下面的代码片段 2。* 在结尾增加一句话
* const fragment = document . createdocumentfragment()；* 更改节点。appendchild (Li)到 fragment.appendChild(li)
* 最初增加一个句子 node . appendchild(ragment)；*/
const fragment = document . createdocumentfragment()；

#node.appendChild(李)；fragment.appendChild(李)；// 首先插入文档片段
node . appendchild(ragment)；最初，将文档片段插入到节点中。复制代码
留神: 下面的代码只是为了创立一个组 DOM，如何领有大量的数据，如何解决。请参见上面的代码片段 3。函数 getlistToHtmlStr(list = []) {如果(这个。$props.commentClose){
// 不初始化就敞开聊天
返回
}
if (list.length == 0)返回 " "；const total = list . 长度；const page = 0；this.list=[list，...this.list]
let limit = everyAddMax// 分几次渲染数据，比方每次 200 次
设 total page = 1；如果(总计 > 限额){total page = math . ceil(total/limit)；// 计算渲染次数
}否则{限额 = 总额；}
const render = (page) => {If (page >= totalPage) {// 分页数据完结。if(this.hasMaxList) {this.removeList(总计)
}
返回；}否则{RequestAnimationFrame(() => {// 应用 RequestAnimationFrame 代替 setTimeout 缩小了重排次数，大大提高了性能，// 创立文档片段: 能够先将 1 页的 li 标签放入文档片段中，而后一次性将子元素追加到容器中，这样缩小了 appendChild 的次数，大大提高了性能。const fragment = document . createdocumentfragment()；const for num = page * limit+limit；const {user_id，commentClose，needCheckInfo，from} = this
for(设 i = page * limiti < fornumi++) {const item = list[I]；if(item.type！== 'gift') {const Li = document . createelement("Li")；# ... 这里省略了代码片段第二局部的代码...#
Li . innerhtml = ` $ {imghtml} $ {iteminfo} `；// 首先插入文档片段
fragment.appendChild(李)；}
// 一次性 appendChild
this.scrollBody.appendChild(片段)；// }
// 新一轮加法
渲染(page+1)；}, 0);
}
};
渲染(页面)；}

虚构列表
虚构列表原理
只渲染可见区域中的数据，不可见区域中的所有 div 都被销毁。随着页面滚动，可见区域对应的 dom 会一直渲染，不可见区域的 dom 会被毁坏。所以整个页面的 DOM 不会因为数据宏大而变得太多，解决了页面卡顿的问题。

公共帧的虚构列表包

1.Vue 虚构滚动插件:vue 虚构滚动条
官网演示:akryum.github.io/vue-virtual…

参考:www.jb51.net/article/175…

2.React 虚构滚动插件:react- 虚拟化
官网演示:bvaughn.github.io/react-virtu…

形容:

React-virtualized 是一个十分弱小的库，它提供了 Grid、List、Table、Collection 和 Masonry 等五个次要组件，涵盖了常见场景下的长列表数据渲染。
反对列表项的动静高度和固定高度，与之相干的两个次要属性是 estimatedRowSize 和 rowHeight。RowHeight 用于设置列表项的高度:(index: number): number
如果不晓得 rowHeight 的值，能够应用 estimatedRowSize 属性给列表项一个预计高度，这样就能够依据预计高度计算出列表内容的总高度，总高度会随着列表项的渲染而逐步调整。当列表项具备动静高度时，这很有用。您能够初始化内容的总高度来扩大容器元素，以便它能够在垂直方向上滚动。

正文完