vue前端優雅展示後端十萬條數據面試點剖析
前置工作
如果後端真的返回給前端10萬條數據,咱們前端要怎麼優雅地展示出來呢?(哈哈假設後端真的能傳10萬條數據到前端)
先把前置工作給做好,後面才能進行測試
後端搭建
新建一個server.js
文件,簡單起個服務,並返回給前端10w
條數據,並通過nodemon server.js
開啟服務
沒有安裝nodemon
的同學可以先全局安裝
npm i nodemon -g
// server.js const 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 // 樣式 <style> * { padding: 0; margin: 0; } #container { height: 100vh; overflow: auto; } .sunshine { display: flex; padding: 10px; } img { width: 150px; height: 150px; } </style> // html部分 <body> <div id="container"> </div> <script src="./index.js"></script> </body>
然後新建一個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秒
,非常消耗時間
const renderList = async () => { console.time('列表時間') const list = await getList() list.forEach(item => { const div = document.createElement('div') div.className = 'sunshine' div.innerHTML = `<img src="${item.src}" /><span>${item.text}</span>` container.appendChild(div) }) console.timeEnd('列表時間') } renderList()
setTimeout分頁渲染
這個方法就是,把10w
按照每頁數量limit
分成總共Math.ceil(total / limit)
頁,然後利用setTimeout
,每次渲染1頁數據,這樣的話,渲染出首頁數據的時間大大縮減瞭
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 = `<img src="${item.src}" /><span>${item.text}</span>` 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 = `<img src="${item.src}" /><span>${item.text}</span>` 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 = `<img src="${item.src}" /><span>${item.text}</span>` // 先塞進文檔碎片 fragment.appendChild(div) } // 一次性appendChild container.appendChild(fragment) render(page + 1) }) } render(page) console.timeEnd('列表時間') }
懶加載
為瞭比較通俗的講解,咱們啟動一個vue
前端項目,後端服務還是開著
其實實現原理很簡單,咱們通過一張圖來展示,就是在列表尾部放一個空節點blank
,然後先渲染第1頁數據,向上滾動,等到blank
出現在視圖中,就說明到底瞭,這時候再加載第二頁,往後以此類推。
至於怎麼判斷blank
出現在視圖上,可以使用getBoundingClientRect
方法獲取top
屬性
IntersectionObserver
性能更好,但是我這裡就拿getBoundingClientRect
來舉例
<script setup lang="ts"> import { onMounted, ref, computed } from 'vue' const getList = () => { // 跟上面一樣的代碼 } const container = ref<HTMLElement>() // container節點 const blank = ref<HTMLElement>() // blank節點 const list = ref<any>([]) // 列表 const page = ref(1) // 當前頁數 const limit = 200 // 一頁展示 // 最大頁數 const maxPage = computed(() => Math.ceil(list.value.length / limit)) // 真實展示的列表 const showList = computed(() => list.value.slice(0, page.value * limit)) const handleScroll = () => { // 當前頁數與最大頁數的比較 if (page.value > maxPage.value) return const clientHeight = container.value?.clientHeight const blankTop = blank.value?.getBoundingClientRect().top if (clientHeight === blankTop) { // blank出現在視圖,則當前頁數加1 page.value++ } } onMounted(async () => { const res = await getList() list.value = res }) </script> <template> <div id="container" @scroll="handleScroll" ref="container"> <div class="sunshine" v-for="(item) in showList" :key="item.tid"> <img :src="item.src" /> <span>{{ item.text }}</span> </div> <div ref="blank"></div> </div> </template>
虛擬列表
虛擬列表需要講解的比較多,在這裡我分享一下我的一篇虛擬列表的文章
結合“康熙選秀”,給大傢講講“虛擬列表”
以上就是vue前端優雅展示後端十萬條數據考點剖析的詳細內容,更多關於前端展示後端數據的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 前端如何更好的展示後端返回的十萬條數據
- 一篇文章告訴你如何實現Vue前端分頁和後端分頁
- Javascript單線程和事件循環
- vue實現一個簡單的分頁功能實例詳解
- 原生JS Intersection Observer API實現懶加載