体系课-大数据工程师2022版2.0升级版fen享yun盘大数据

文章图片

download：体系课-大数据工程师2022版2.0升级版大数据 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()；

...上面的代码片段2...

#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…

描述:
【体系课-大数据工程师2022版2.0升级版fen享yun盘】React-virtualized是一个非常强大的库，它提供了Grid、List、Table、Collection和Masonry等五个主要组件，涵盖了常见场景下的长列表数据渲染。
支持列表项的动态高度和固定高度，与之相关的两个主要属性是estimatedRowSize和rowHeight。RowHeight用于设置列表项的高度:(index: number): number
如果不知道rowHeight的值，可以使用estimatedRowSize属性给列表项一个估计高度，这样就可以根据估计高度计算出列表内容的总高度，总高度会随着列表项的渲染而逐渐调整。当列表项具有动态高度时，这很有用。您可以初始化内容的总高度来扩展容器元素，以便它可以在垂直方向上滚动。