每日 30 秒 ? 對海量數據進行切割

ShevaKuilin 發布于2019-08-23 15:41 / 892人閱讀

簡介

數據分割、分頁、異步操作、DOM優化

把數組按指定大小進行分組，可以用于分頁、數據切割、異步操作數據。

// 該源碼來自于 https://30secondsofcode.org
const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );

代碼分析

Array.prototype.from 從一個類似數組或者可迭代對象中創建一個新的數組實例，類似數組 這個詞可能很多人都不是很清楚，類似數組是 javascript 中一個神奇的對象，只要擁有 length 就算是類似數組了。

最常見的類似數組是函數中的 arguments 有長度和 arguments[0] 的調用方法，但是卻沒有數組的 push 等函數方法。利用 Array.prototype.from 則可以把 類似數組 轉化為數組。這個代碼的巧妙之處在于用了 { length: 3 } 這樣的對象來快速 生成數組，而 Array.prototype.from 的第二個參數會對剛生成的數組進行循環遍歷相當于調用了 map。

在循環遍歷新生成數組時，使用了 Array.prototype.slice 的方法來實現了分割數據的效果，這個方法相當常用同學們可以記住它。

使用場景

假設現在有一個消息列表數組里面有一萬條數據讓你渲染到頁面上，大部分人會直接遍歷數組并拼接成 dom 一股腦的渲染到頁面上，這樣帶來的后果是大量的 dom 操作會花費很多時間導致頁面卡頓，且上下滑動頁面時也會卡頓。

我們不妨換個角度來看這個問題無論是手機屏幕還是電腦屏幕用戶可見的頁面數據條目可能就十幾條。那為什么我們要一次性渲染一萬多條，而且用戶也不見得會把所有數據都查看了。

那我們是否可以只渲染十幾條數據，其他數據等用戶滾動了某個高度時再進行下一個十幾條數據的渲染。在分頁操作中，chunk 就可以幫助我們快速的進行分頁。

樣式

.news > div {
    text-align: center;
    height: 50px;
}

結構

腳本

// 模擬生成 1萬條數據，這里就利用了 Array.from 來快速生成數據
const originNews = Array.from(
    { length: 10000 },
    (v, k) => ({ content: `新聞${k}` })
)

// 需要插入的容器
const element = document.querySelector(".news")[0]

// 創建視圖監聽
const loadObserver = new IntersectionObserver((entries) => {
    // 如果不可見，就返回
    if (entries[0].intersectionRatio <= 0) {
        return;
    }

    // 判斷是否有上一頁和下一頁
    const hasPrePage = page != 0
    const hasNextPage = page != news.length - 1

    const now = news[page]
    const pre = hasPrePage ? news[page - 1] : []
    const next = hasNextPage ? news[page + 1] : []

    // 傳遞錨點的坐標 和 當前頁面顯示的數據
    render(pre.length, [ ...pre, ...now, ...next ])
    
    // 判斷是否需要翻頁，且防止數組越界
    page = entries[0].target.className == "news-footer" || page === 0
        ? (hasNextPage ? page + 1 : page)
        : (hasPrePage ? page - 1 : page)
}, { threshold: [1] })

// 設置監聽
loadObserver.observe(document.querySelector(".news-header"))
loadObserver.observe(document.querySelector(".news-footer"))

// 根據當前頁面高度和新聞高度算出每一頁可以放幾條數據
let pageNum = Math.ceil(document.body.clientHeight / 50)
let page = 0 // 當前顯示了第幾頁的數據
let news = chunk(originNews, pageNum) // 分頁后的數據

// 渲染新聞 并 跳轉到錨點
function render(last, data) {
    element.innerHTML = ""

    data.forEach((i, v) => element.innerHTML += v == last
        ? `${i.content}`
        : `${i.content}`
    )

    window.location.href = "#news-herf"
}

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

GPU云服務器云服務器對數據進行分析對數據進行統計排行如何對數據進行統計 2018對數據進行分析

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102432.html

每日 30 秒 ? 該不該優雅

showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 簡介可讀性、性能、Spread、Reduce 在優雅三連擊中有同學提到了可讀性這個關鍵詞，就小二個人的觀點在某個范圍內使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運算在初始化變量是提升可讀性的，并且在很多提倡優化if 語句...

JohnLui 2019-08-26 13:41 評論0 收藏0
每日 30 秒 ? 巧用可視區域

簡介可視區域、頁面優化、DOM節點多、圖片懶加載、性能可視區域是一個前端優化經常出現的名詞，不管是顯示器、手機、平板它們的可視區域范圍都是有限。在這個有限可視區域區域里做到完美顯示和響應，而在這個區域外少做一些操作來減少渲染的壓力、網絡請求壓力。在每日 30 秒之對海量數據進行切割中的使用場景，我們就是利用了有限可視區域只渲染一部分 DOM 節點來減少頁面卡頓。既然可視區域 ...

DevYK 2019-08-23 15:57 評論0 收藏0
每日 30 秒 ? 對數組項目進行統計

showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/count/poster.png); 簡介數組、統計、遍歷根據指定的方法或者參數對數組中的項目進行統計。 // 該源碼來自于 https://30secondsofcode.org const countBy =...

huayeluoliuhen 2019-08-26 13:32 評論0 收藏0
每日 30 秒 ? 唯一數據集

showImg(https://segmentfault.com/img/remote/1460000018795147?w=901&h=501); 簡介數組、對象、唯一、只出現一次、差集取出兩個對象數組中唯一的數據集，即差集。 // 該源碼來自于 https://30secondsofcode.org const filterNonUniqueBy = (arr, fn) => arr....

gityuan 2019-08-26 13:34 評論0 收藏0
每日 30 秒 ? 數據類型大亂燉

showImg(https://segmentfault.com/img/remote/1460000018796041?w=900&h=500); 簡介字符串、數字、布爾值、Null、Undefined、對象、數組、函數、判斷方法 JavaScript 中有兩種數據類型，分別是基本數據類型和引用數據類型：基本數據類型引用數據類型 Number、String、Boolean、Null...

meteor199 2019-08-23 16:08 評論0 收藏0