• 场景：展示大型列表和表格数据（比如：城市列表、通讯录、微博等），会导致页面卡顿，滚动不流畅等性能问题
• 原因：大量DOM节点的重绘和重排
• 其他问题：设备老旧、移动设备耗电量加快、影响电池使用寿命
• 优化方案：1.懒加载 2. 可视区渲染（虚拟列表）

懒加载

• 常见的长列表优化方案，常见于移动端
• 原理：每次之渲染一部分（比如10条数据），等渲染的数据即将滚动完时，在渲染下面部分
• 优化：每次渲染一部分数据，速度快
• 缺点：数据量大时，页面中依然存在**大量DOM节点，占用内存过多**，降低浏览器渲染性能，导致页面卡顿
• 使用场景：数据量不大的情况

可视区渲染

• 原理：之渲染页面可视区域的列表项，在滚动列表时动态更新列表项
• 使用场景：一次性展示大量数据的情况

---

在react中的应用

使用 react-virtualized

跳转文档

install

npm install react-virtualized --save

使用

import React from "react";
import { List, AutoSizer } from "react-virtualized"
class CityList extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            list:[111]
        }
    }
    rowRenderer=({
        key, 
        index,
        isScrolling, 
        isVisible, 
        style,
    })=>{
    const {CityListFirst,CityList} = this.state;
    const letter = CityListFirst[index]
    return (
      <div key={key} style={style} className="city">
        {this.state.list[index]}
      </div>
    );
  }
}
​

---

在 vue 中的应用

使用 vue-virtual-scroller

install

npm install --save vue-virtual-scroller

import

import VueVirtualScroller from 'vue-virtual-scroller';
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.use(VueVirtualScroller)
// 按需引入
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
Vue.component('RecycleScroller', RecycleScroller)

示例

<template>
  <RecycleScroller
    class="scroller"
    :items="list"
    :item-size="32"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="user">
      {{ item.name }}
    </div>
  </RecycleScroller>
</template>
​
<script>
export default {
  props: {
    list: Array,
  },
}
</script>
​
<style scoped>
.scroller {
  height: 100%;
}
​
.user {
  height: 32%;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
</style>
​