功能描述:前端dom过多页面卡顿,使用分片加载提高页面响应,减少白屏时间,提高用户体验
npm install jy-perform-chunk功能描述:前端dom过多页面卡顿,使用分片加载提高页面响应,减少白屏时间,提高用户体验
shell
npm i jy-perform-chunk --save
`$3
`javascript
import { performChunk } from 'jy-perform-chunk'performChunk(datas, taskHandler, scheduler) // 执行
`$3
| 参数名称 | 参数描述 | 默认值 |
| ----------- | -------------- | -------------------------------- |
| datas | 需求处理的数据源 | / |
| taskHandler | 任务处理的回调(操作逻辑) | / |
| scheduler | 调度器的回调(用何种方式处理任务 eg:定时器/requestIdleCallback) | / |$3
`javascript
import { performChunk } from 'jy-perform-chunk'const datas = new Array(100000).fill(0).map((_, index) => index) || 10000
const taskHandler = (_, i) => {
const div = document.createElement('div')
div.innerHTML = i
document.body.appendChild(div)
}
const scheduler = (task) => {
// 方式1
setTimeout(() => {
const now = performance.now()
task(() => performance.now() - now <= 10)
}, 1000)
// 方式2
// window.requestIdleCallback((idle) => {
// task(() => idle.timeRemaining())
// })
}
performChunk(datas, taskHandler, scheduler) // 执行
``