download: System Course - Big Data Engineer 2022 Version 2.0 Upgrade

Big Data  https://www.sisuoit.com

Limit test:

If you load 2000 pieces of data at a time in a vue project, there will be a warning: Error in v-on handler: "Error: Rendering project limit has been reached as shown below: Cause of the problem js manipulates the dom, all operations on the dom All will trigger "reflow" (including redraw or reflow), which seriously affects energy consumption. Therefore, it is necessary to minimize DOM operations and reduce "reflow". When there are too many DOMs, browser rendering will be slow or even stuck. So you can consider virtual List, to ensure that the number of DOM displayed each time is small. Solution: Js dynamically creates elements

/**
*code snippet 1
*creatElement and appendChild once per tag.
*Disadvantage: appendChild multiple times will cause page rearrangement and affect performance.
*/
const node = document . createelement(' div ')；
node.className = ' giftinfo
 Assume msg = data.msg

//Avatar of the user who gave the gift
let avatar = document . createelement(' img ')；
avatar . class name = " avatar "；
avatar.setAttribute('src '，msg . avatar | | userDefaultImg)；
node.appendChild(avatar)；

//The username for the gift.
let name = document . createelement(" span ")；
name.className = ' name
 Name; innerText = msg Nick name|| 'unknown'；
node.appendChild(name)；

//gift type
let gif timg = document . createelement(' img ')；
gift img . class name = ' img '；
giftimg.setAttribute('src '，getGiftLists[msg.content]). URL)；

node . appendchild(gif timg)；copy code/***code snippet 2
*Use string concatenation to reduce appendChild insertion.
*Disadvantage: If the display of each list is complex, the concatenated strings are prone to errors and the maintenance cost is high. Do you have a better plan?
*/
const Li = document . createelement(" Li ")；
Li . class name = user _ id = = = item . from _ uid？own_chat':'' + item.type === 'gift '？Gift items":"；
let imghtml =//The map's address
let name html = ` $ { item . from _ username } `；//Nick name

Let texthtml =//content
if (item.type === "gift") {
Let giftname = `sent a $ { item . content . value } `；
let giftimg =
text html = ` $ { gift name } $ { gift img } `；
}otherwise{
texthtml = ` $ { item.content }//content
}
let infotop = ` $ { namehtml }//top section
let item info = ` $ { infotop } $ { text html } `；//main content section
Li . innerhtml = ` $ { imghtml } $ { iteminfo } `；

appendChild

node.appendChild( Li);Add DOM elements using document fragments What is a document fragment? Document fragments are containers used to temporarily store created dom elements. Because document fragments live in memory, not in the DOM tree, inserting child elements in document fragments will not cause page reflow. When a DocumentFragment node is requested to be inserted into the document tree, it is not the DocumentFragment itself, but all its descendants. This makes DocumentFragment a useful placeholder for temporarily storing nodes that are inserted into a document at a time. It is also beneficial to realize file cutting, copying, and pasting operations. DocumentFragment nodes do not belong to the document tree and the inherited parentNode property is always null. Common method: document.createdocumentfragment() creates a new empty DocumentFragment node.
Range.extractContents() or Range.cloneContents() to get a DocumentFragment node containing existing document fragments. What is the use of document fragmentation? First add a large number of elements in the document fragment, and then add the document fragment to the position that needs to be inserted, which greatly reduces the dom operation and improves the performance (more obvious in IE and Firefox). /**
* Continue with snippet 2 above.
*Add a sentence at the beginning

• const fragment = document . createdocumentfragment()；
  * Change nodes. appendchild(Li) to fragment.appendChild(li)

  *Add a sentence at the end node . appendchild(ragment)；
  */
  const fragment = document . createdocumentfragment()；...Snippet 2 above...#node.appendChild( Li);
  fragment.appendChild(plum)；//Insert the document fragment first
  node . appendchild(ragment)；Finally, insert the document fragment into the node.
  copy code
   Notice:The above code is just to create a group DOM，How to have a lot of data, how to deal with it. See code snippet 3 below.
  function getlistToHtmlStr(list = []) {
  if(this. $props.commentClose){
  //Close chat without initialization
   return
  }
  if (list.length == 0)return" "；
  const total = list .length;
  const page = 0；
  this.list=[list，...this.list]
  let limit = everyAddMax//Render the data in several times, such as 200 times each time
   Assume total page = 1；
  if(total>limit){
  total page = math . ceil(total/limit)；//count render times
  }otherwise{
  limit=lump sum;
  }
  const render = (page) => {
  If (page >= totalPage) {//Paging data ends.
  if(this.hasMaxList) {
  this.removeList(total)
  }
  return;
  }otherwise{
  RequestAnimationFrame(() => {//Using RequestAnimationFrame instead of setTimeout reduces the number of reflows and greatly improves performance,
  //Create a document fragment: You can put 1-page li tags into the document fragment first, and then append child elements to the container at one time, which reduces the number of appendChild s and greatly improves performance.
  const fragment = document . createdocumentfragment()；
  const for num = page * limit+limit；
  const {user_id，commentClose，needCheckInfo，from } = this
  for(Assume i = page * limiti < fornumi++) {
  const item = list[I]；
  if(item.type!== 'gift') {
  const Li = document . createelement(" Li ")；
  # ...The code in the second part of the code snippet is omitted here...#
  Li . innerhtml = ` $ { imghtml } $ { iteminfo } `；
  //Insert the document fragment first
  fragment.appendChild(plum)；
  }
  //one-time appendChild
  this.scrollBody.appendChild(Fragment)；
  // }
  //A new round of addition
   render(page+1)；
  
  }, 0);
  }
  };
  render(page)；

  } Virtual list The virtual list principle only renders the data in the visible area, and all div s in the invisible area are destroyed. As the page scrolls, the dom corresponding to the visible area will be continuously rendered, and the dom of the invisible area will be destroyed. Therefore, the DOM of the entire page will not become too much due to the huge amount of data, which solves the problem of page jamming. Virtual list package for public frames 1.Vue virtual scroll plugin: vue virtual scroll bar
  Official demo: akryum.github.io/vue-virtual…

Reference: www.jb51.net/article/175…

2.React virtual scroll plugin: react-virtualization
Official demo: bvaughn.github.io/react-virtu...Description: React-virtualized is a very powerful library, which provides five main components such as Grid, List, Table, Collection and Masonry, covering long-term common scenarios List data rendering. Both dynamic and fixed heights of list items are supported, and the two main properties associated with them are estimatedRowSize and rowHeight. RowHeight is used to set the height of the list item: (index: number): number If you don't know the value of rowHeight, you can use the estimatedRowSize property to give the list item an estimated height, so that the total height of the list content can be calculated according to the estimated height, the total height Gradually adjust as the list items are rendered. This is useful when list items have dynamic heights. You can initialize the total height of the content to expand the container element so that it can be scrolled vertically.