後端一次給你10萬條資料，前端如何優雅的展示？

前言

大家好，我是 ConardLi，今天跟大家來嘮嘮嗑，如果後端真的返回給前端10萬條資料，咱們前端要怎麼優雅地展示出來呢？（哈哈假設後端真的能傳10萬條資料到前端）

前置工作

先把前置工作給做好，後面才能進行測試

後端搭建

新建一個

server。js

檔案，簡單起個服務，並返回給前端

10w

條資料，並透過

nodemon server。js

開啟服務

沒有安裝

nodemon

的同學可以先全域性安裝

npm i nodemon -g

// server。jsconst http = require（‘http’）const port = 8000；http。createServer（function （req， res） { // 開啟Cors res。writeHead（200， { //設定允許跨域的域名，也可設定*允許所有域名 ‘Access-Control-Allow-Origin’： ‘*’， //跨域允許的請求方法，也可設定*允許所有方法 “Access-Control-Allow-Methods”： “DELETE，PUT，POST，GET，OPTIONS”， //允許的header型別 ‘Access-Control-Allow-Headers’： ‘Content-Type’ }） let list = ［］ let num = 0 // 生成10萬條資料的list for （let i = 0； i < 100000； i++） { num++ list。push（{ src： ‘https：//p3-passport。byteacctimg。com/img/user-avatar/d71c38d1682c543b33f8d716b3b734ca~300x300。image’， text： `我是${num}號嘉賓林三心`， tid： num }） } res。end（JSON。stringify（list））；}）。listen（port， function （） { console。log（‘server is listening on port ’ + port）；}）

前端頁面

先新建一個

index。html

// index。html// 樣式// html部分

然後新建一個

index。js

檔案，封裝一個

AJAX

函式，用來請求這

10w

條資料

// index。js// 請求函式const getList = （） => { return new Promise（（resolve， reject） => { //步驟一：建立非同步物件 var ajax = new XMLHttpRequest（）； //步驟二：設定請求的url引數，引數一是請求的型別，引數二是請求的url，可以帶引數 ajax。open（‘get’， ‘http：//127。0。0。1：8000’）； //步驟三：傳送請求 ajax。send（）； //步驟四：註冊事件 onreadystatechange 狀態改變就會呼叫 ajax。onreadystatechange = function （） { if （ajax。readyState == 4 && ajax。status == 200） { //步驟五如果能夠進到這個判斷說明資料完美的回來了，並且請求的頁面是存在的 resolve（JSON。parse（ajax。responseText）） } } }）}// 獲取container物件const container = document。getElementById（‘container’）

直接渲染

最直接的方式就是直接渲染出來，但是這樣的做法肯定是不可取的，因為一次性渲染出

10w

個節點，是非常耗時間的，咱們可以來看一下耗時，差不多要消耗

12秒

，非常消耗時間

截圖2021-11-18 下午10。07。45。png

const renderList = async （） => { console。time（‘列表時間’） const list = await getList（） list。forEach（item => { const div = document。createElement（‘div’） div。className = ‘sunshine’ div。innerHTML = `${item。text}` container。appendChild（div） }） console。timeEnd（‘列表時間’）}renderList（）

setTimeout分頁渲染

這個方法就是，把

10w

按照每頁數量

limit

分成總共

Math。ceil（total / limit）

頁，然後利用

setTimeout

，每次渲染1頁資料，這樣的話，渲染出首頁資料的時間大大縮減了

截圖2021-11-18 下午10。14。46。png

const renderList = async （） => { console。time（‘列表時間’） const list = await getList（） console。log（list） const total = list。length const page = 0 const limit = 200 const totalPage = Math。ceil（total / limit） const render = （page） => { if （page >= totalPage） return setTimeout（（） => { for （let i = page * limit； i < page * limit + limit； i++） { const item = list［i］ const div = document。createElement（‘div’） div。className = ‘sunshine’ div。innerHTML = `${item。text}` container。appendChild（div） } render（page + 1） }， 0） } render（page） console。timeEnd（‘列表時間’）}

requestAnimationFrame

使用

requestAnimationFrame

代替

setTimeout

，減少了

重排

的次數，極大提高了效能，建議大家在渲染方面多使用

requestAnimationFrame

const renderList = async （） => { console。time（‘列表時間’） const list = await getList（） console。log（list） const total = list。length const page = 0 const limit = 200 const totalPage = Math。ceil（total / limit） const render = （page） => { if （page >= totalPage） return // 使用requestAnimationFrame代替setTimeout requestAnimationFrame（（） => { for （let i = page * limit； i < page * limit + limit； i++） { const item = list［i］ const div = document。createElement（‘div’） div。className = ‘sunshine’ div。innerHTML = `${item。text}` container。appendChild（div） } render（page + 1） }） } render（page） console。timeEnd（‘列表時間’）}

文件碎片 + requestAnimationFrame

文件碎片

的好處

1、之前都是每次建立一個

div

標籤就

appendChild

一次，但是有了

文件碎片

可以先把1頁的

div

標籤先放進

文件碎片

中，然後一次性

appendChild

到

container

中，這樣減少了

appendChild

的次數，極大提高了效能

2、頁面只會渲染

文件碎片

包裹著的元素，而不會渲染

文件碎片

const renderList = async （） => { console。time（‘列表時間’） const list = await getList（） console。log（list） const total = list。length const page = 0 const limit = 200 const totalPage = Math。ceil（total / limit） const render = （page） => { if （page >= totalPage） return requestAnimationFrame（（） => { // 建立一個文件碎片 const fragment = document。createDocumentFragment（） for （let i = page * limit； i < page * limit + limit； i++） { const item = list［i］ const div = document。createElement（‘div’） div。className = ‘sunshine’ div。innerHTML = `${item。text}` // 先塞進文件碎片 fragment。appendChild（div） } // 一次性appendChild container。appendChild（fragment） render（page + 1） }） } render（page） console。timeEnd（‘列表時間’）}

懶載入

為了比較通俗的講解，咱們啟動一個

vue

前端專案，後端服務還是開著

其實實現原理很簡單，咱們透過一張圖來展示，就是在列表尾部放一個空節點

blank

，然後先渲染第1頁資料，向上滾動，等到

blank

出現在檢視中，就說明到底了，這時候再載入第二頁，往後以此類推。

至於怎麼判斷

blank

出現在檢視上，可以使用