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 } `；# appendChildnode.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 } = thisfor(设i = page * limiti < fornumi++) {const item = list[I]；if(item.type！== 'gift') {const Li = document . createelement(" Li ")；# ...这里省略了代码片段第二局部的代码...#Li . innerhtml = ` $ { imghtml } $ { iteminfo } `；//首先插入文档片段fragment.appendChild(李)；}//一次性appendChildthis.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属性给列表项一个预计高度，这样就能够依据预计高度计算出列表内容的总高度，总高度会随着列表项的渲染而逐步调整。当列表项具备动静高度时，这很有用。您能够初始化内容的总高度来扩大容器元素，以便它能够在垂直方向上滚动。