每日 30 秒 ⏱ 对海量数据进行切割

简介

数据分割、分页、异步操做、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;
}

结构

<!-- 用于标识到页面顶部了 -->
<div class="news-header"></div>
<!-- 新闻数据 -->
<div class="news"></div>
<!-- 用于标识到页面底部了 -->
<div class="news-footer"></div>

脚本

// 模拟生成 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
        ? `<div id="news-herf">${i.content}</div>`
        : `<div>${i.content}</div>`
    )

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

一块儿成长

在困惑的城市里总少不了并肩同行的 伙伴 让咱们一块儿成长。

• 若是您想让更多人看到文章能够点个 点赞。
• 若是您想激励小二能够到 Github 给个 小星星。
• 若是您想与小二更多交流添加微信 m353839115。

本文原稿来自 PushMeTop