一般頁面1000條數(shù)據(jù)的正常渲染我們可能用的比較多的是分頁，但是在不做分頁的前提下怎么實(shí)現(xiàn)長列表的渲染效率，就是怎么做到不卡頓？
可能我們會(huì)監(jiān)聽高度，滾動(dòng)條什么的去做滾動(dòng)分頁，我沒試過，但是我覺得應(yīng)該是可以實(shí)現(xiàn)的，就跟手機(jī)端的上劃加載更多一樣的處理邏輯吧。

實(shí)現(xiàn)機(jī)制：

從第10個(gè)開始，這些沒在可視區(qū)的元素就沒有被渲染，這可比上面那種全部元素都渲染好太多了，但是如果瀏覽器不渲染頁面內(nèi)的一些元素，滾動(dòng)將是一場噩夢，因?yàn)闊o法正確計(jì)算頁面高度。這是因?yàn)椋琧ontent-visibility會(huì)將分配給它的元素的高度（height）視為0，瀏覽器在渲染之前會(huì)將這個(gè)元素的高度變?yōu)?，從而使我們的頁面高度和滾動(dòng)變得混亂。
具體原因可參照：https://juejin.cn/post/7168629736838463525

實(shí)現(xiàn)方案：

.list_item {
  content-visibility: auto;
  contain-intrinsic-size: 200px; // 高度接近真實(shí)渲染的值效果會(huì)更好，如果實(shí)在無法知道準(zhǔn)確高度，我們就給一個(gè)大概的值，會(huì)使?jié)L動(dòng)條的抖動(dòng)問題相對(duì)減少。
}

如果不加size高度，在滾動(dòng)過程中，滾動(dòng)條會(huì)抽搐一樣的抽抽。高度的值最好更加貼近item的高度，效果更好。