前言
最近公司專案快結項了，但是我發現公司的每個頁面打開都比較卡，究其原因資料量大，請求多，渲染慢，加之面試的時候也遇到過此類問題，那么今天就來嘗試去實作一下，
一、整理思路
首先我們要知道js處理大量資料并沒有花費多長時間，耗時最長的是渲染dom元素，一次加載完需要耗費大量時間，所以我們可以把資料切割成一個個小塊，每次渲染一小塊就能夠將dom渲染出來了，
二、代碼實作
<ul></ul>
// 第一種實作方式
const $UL = document.querySelector('ul')
let size = 0
const myList = getList()
// 生成資料
function getList() {
let list = []
for (let i = 0; i < 5005000; i++) {
list.push(i)
}
return list
}
function render(list) {
let tempBox = document.createDocumentFragment()
list.map(function (data) {
let li = document.createElement('li')
li.innerHTML = data
tempBox.appendChild(li)
})
$UL.append(tempBox)
}
function splitList() {
if (size + 100 < myList.length) {
render(myList.slice(size, size + 100))
size += 100
requestAnimationFrame(splitList)
} else {
render(myList.slice(size, size + myList.length - size))
size = myList.length - size
}
}
requestAnimationFrame(splitList)
可能有些同學沒用過[requestAnimationFrame],(https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame)，建議先去了解一下，當然你也可以用計時器來代替，不寫也是可以的，
三、優化代碼
雖然上訴方式已經將渲染時間縮短了，但是我們想要的效果是，需要的時候再渲染這個元素，不需要/被隱藏的元素就不渲染，那么這該怎么實作呢，首先我們去監聽進度條，根據進度條滾動的距離，渲染dom，那么上訴代碼就會變成如下樣子，
<ul style="overflow: auto; height:400px;"></ul>
const $UL = document.querySelector('ul')
let page_arg = {
size: 0,
count: 100,
}
const myList = getList()
$UL.onscroll = function () {
if (this.scrollTop + this.clientHeight + 10 >= this.scrollHeight) {
splitList()
}
}
// 生成資料
function getList() {
let list = []
for (let i = 0; i < 10000000; i++) {
list.push('我是資料'+i)
}
return list
}
function render(list) {
let tempBox = document.createDocumentFragment()
list.map(function (data) {
let li = document.createElement('li')
li.innerHTML = data
tempBox.appendChild(li)
})
$UL.append(tempBox)
}
function splitList() {
render(myList.slice(page_arg.size, page_arg.size + page_arg.count))
page_arg.size += page_arg.count
}
splitList()
總結
寫到這里渲染資料串列的問題就算是結束了，如果有什么地方寫的不對，或者還能優化的地方還請各位大佬指出來，畢竟我也是第一次嘗試渲染這么多資料，代碼在這里，各位也可以自己去嘗試一下，其實還可以在優化一下這個計算的時間，可以使用web Worker多開一個執行緒來協助計算，再次將js的計算時間壓縮，不過對我來說已經足夠了，對于追求性能的同學可以去嘗試一下，然后分享一下自己的心得，嘿嘿，ok，這篇博客就到此為止了，謝謝各位的支持，有問題請私信我，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253116.html
標籤：其他
上一篇：前端愛好者的小白學習之路-2 從0基礎到學會HTML（超文本標記語言）入門前端 這一篇小白文就夠了~
下一篇：（二）原型和原型鏈