网站开发说明文档,杨凌区住房和城乡建设局网站,专门做家具的网站,基于asp.net电子商务网站开发实践中的关键技术和应用时间分片
react的任务可以被打断#xff0c;其实就是基于时间分片的人眼最高能识别的帧数不超过30帧#xff0c;电影的帧数差不多是在24浏览器的帧率一般来说是60帧#xff0c;也就是每秒60个画面, 平均一个画面大概是16.5毫秒左右浏览器正常的工作流程是运算渲染#xff…时间分片
react的任务可以被打断其实就是基于时间分片的人眼最高能识别的帧数不超过30帧电影的帧数差不多是在24浏览器的帧率一般来说是60帧也就是每秒60个画面, 平均一个画面大概是16.5毫秒左右浏览器正常的工作流程是运算渲染运算渲染运算渲染在浏览器里面一个运算加上一个渲染就是一帧总的来讲可以理解为下面这张图 比如 frame 是一帧一个 Frame 就是16毫秒左右黑色部分是浏览器的渲染蓝色部分是js的运算在16毫秒以内(一帧), 浏览器会重新渲染画面然后再加上JS的一轮事件循环的执行根据任务队列循环下去一秒 60 帧每一帧都是 js的执行 浏览器的渲染但是, js它是单线程的, 会阻塞浏览器渲染, 假如 js执行时间超长占了 3 ~ 4帧js执行的时候浏览器是不能渲染的那这个时候会有页面卡顿的感觉 实际上这个时候是 js 在执行这个也是react它去递归渲染的时候的问题递归渲染它就是属于长进程相当于在 render 的时候 js 一直把渲染进程给卡住 这个是很苦恼的问题所以诞生了fiber架构, react希望能够把任务分片处理这个时候就提到了一个概念就是 fiber reconciler 要做的事情它如何让我们把时间分片然后让又让浏览器不卡顿的呢 其实特别的巧妙谷歌浏览器底层提供的一个东西叫做 requestIdleCallback前面说到一帧(16ms左右) 是 渲染 js的执行有时候浏览器比较空闲有可能一帧不需要 16ms可能需要6ms, 那剩下的10ms可以执行长任务当剩下的10ms用完可以把浏览器的渲染权利再还给浏览器这个时候进入下一帧的浏览器的画面继续渲染渲染完之后又有剩余时间接着再执行这个长进程简单来说就是把长进程拆分成一个个很小的任务它利用浏览器每一帧的空闲时间去执行这样就实现了任务的打断而且还不阻塞浏览器的渲染 也就是说本来一个任务要执行1秒但是实际上react的fiber架构可能让这个1秒执行的时间更长因为任务的拆分其实是增加了这个计算的开销的但是它却是在我们每一帧的空闲时间去执行的虽然执行的整体时间可能变长但是让用户的感觉没有那么卡顿所以它的体验是提升了的参考之前 React 16的时间片https://blog.csdn.net/Tyro_java/article/details/135586572
关于 requestIdleCallback 文档https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestIdleCallback window.requestIdleCallback() 方法插入一个函数这个函数将在浏览器空闲时期被调用 这使开发者能够在主事件循环上执行后台和低优先级工作而不会影响延迟关键事件如动画和输入响应 函数一般会按先进先调用的顺序执行然而如果回调函数指定了执行超时时间timeout则有可能为了在超时前执行函数而打乱执行顺序 requestIdleCallback(callback) requestIdleCallback(callback, options) callback 一个在事件循环空闲时即将被调用的函数的引用。函数会接收到一个名为 IdleDeadline 的参数这个参数可以获取当前空闲时间以及回调是否在超时时间前已经执行的状态 options 可选 包括可选的配置参数。具有如下属性 timeout 如果指定了 timeout并且有一个正值而回调在 timeout 毫秒过后还没有被调用那么回调任务将放入事件循环中排队即使这样做有可能对性能产生负面影响 返回值是一个ID可以把它传入 Window.cancelIdleCallback() 方法来结束回调
requestIdleCallback 和 requestAnimationFrame 的区别 1 react fiber 引起的关注
组件树转换为链表可分段渲染渲染时可以暂停去执行其他高优先任务空闲时再继续渲染如何判断空闲requestIdleCallback
2 区别 requestAnimationFrame 每次渲染完都会执行高优 requestIdleCallback 空闲时才会执行低优 let curWidth 100
const maxWidth 400function addWidth() {curWidth curWidth 3box.style.width ${curWidth} pxif (curWidth maxWidth) {widndow.requestAnimationFrame(addWidth) // 时间不用自己控制 高优先级widndow.requestIdleCallback(addWidth) // 时间不用自己控制 繁忙时不会执行}
}addWidth()对比 console.info(start)
window.requestIdleCallback((){console.log(requestIdleCallback)
})
window.requestAnimationFrame((){console.log(requestAnimationFrame)
})
setTimeout((){console.log(setTimeout)
})
console.info(end)执行顺序 startendtimeout 优先级更高requestAnimationFrame 宏任务优先级较高requestIdleCallback 宏任务优先级较低 总结 两者都是宏任务需要等待dom渲染完才会执行
