前端如何优化大量数据处理

一、从数据上处理：

分页分表，比如前端可以把数据分页展示，后端也分段吐数据

对数据进行分页。假设每个页面都有limit记录，那么数据可以分为Math.ceil(total/limit)个页面。之后，我们可以使用 setTimeout 顺序渲染页面，一次只渲染一个页面。

2. const renderList = async () => {
4. const list = await getList()
6. const total = list.length
7. const page = 0
8. const limit = 200
9. const totalPage = Math.ceil(total / limit)
11. const render = (page) => {
12. if (page >= totalPage) return
13. setTimeout(() => {
14. for (let i = page * limit; i < page * limit + limit; i++) {
15. const item = list[i]
16. const div = document.createElement('div')
17. div.className = 'sunshine'
18. div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
19. container.appendChild(div)
20. }
21. render(page + 1)
22. }, 0)
23. }
24. render(page)
25. }

 在渲染页面的时候，我们可以使用requestAnimationFrame来代替setTimeout，这样可以减少reflow次数，提高性能。

2. const renderList = async () => {
3. const list = await getList()
5. const total = list.length
6. const page = 0
7. const limit = 200
8. const totalPage = Math.ceil(total / limit)
10. const render = (page) => {
11. if (page >= totalPage) return
13. requestAnimationFrame(() => {
14. for (let i = page * limit; i < page * limit + limit; i++) {
15. const item = list[i]
16. const div = document.createElement('div')
17. div.className = 'sunshine'
18. div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>`
19. container.appendChild(div)
20. }
21. render(page + 1)
22. })
23. }
24. render(page)
25. }

二、从渲染上解决：

异步渲染，比如进入页面先不渲染，然后加载好页面再渲染。

局部渲染：只渲染目前可见区域的数据，再渲染次屏数据。

根据用户的滚动位置动态渲染数据。

要获取用户的滚动位置，我们可以在列表末尾添加一个空节点空白。每当视口出现空白时，就意味着用户已经滚动到网页底部，这意味着我们需要继续渲染数据。

同时，我们可以使用getBoundingClientRect来判断空白是否在页面底部。

2. <script setup lang="ts">
3. import { onMounted, ref, computed } from 'vue'
4. const getList = () => {
5. // code as before
6. }
7. const container = ref<HTMLElement>() // container element
8. const blank = ref<HTMLElement>() // blank element
9. const list = ref<any>([])
10. const page = ref(1)
11. const limit = 200
12. const maxPage = computed(() => Math.ceil(list.value.length / limit))
13. // List of real presentations
14. const showList = computed(() => list.value.slice(0, page.value * limit))
15. const handleScroll = () => {
16. if (page.value > maxPage.value) return
17. const clientHeight = container.value?.clientHeight
18. const blankTop = blank.value?.getBoundingClientRect().top
19. if (clientHeight === blankTop) {
20. // When the blank node appears in the viewport, the current page number is incremented by 1
21. page.value++
22. }
23. }
24. onMounted(async () => {
25. const res = await getList()
26. list.value = res
27. })
28. </script>
30. <template>
31. <div id="container" @scroll="handleScroll" ref="container">
32. <div class="sunshine" v-for="(item) in showList" :key="item.tid">
33. <img :src="item.src" />
34. <span>{{ item.text }}</span>
35. </div>
36. <div ref="blank"></div>
37. </div>
38. </template>

还有性能瓶颈，可以考虑web worker 做压缩和解码，也可以考虑离屏canvas做预渲染。

三、减少网络耗时：压缩数据，gzip等