企业官网建设流程全解析

山东济南seo整站优化公司,现在网站用什么软件做,wordpress无法连接远程mysql,网站实名审核多久在遇到大量数据需要渲染的时候#xff0c;一次性渲染会阻塞主线程导致页面卡顿#xff0c;可以用分块渲染提升页面性能#xff0c;将大量DOM结点的渲染拆分为多个小任务#xff0c;避免主线程长时间阻塞#xff0c;减少页面卡顿。script setup langts…在遇到大量数据需要渲染的时候一次性渲染会阻塞主线程导致页面卡顿可以用分块渲染提升页面性能将大量DOM结点的渲染拆分为多个小任务避免主线程长时间阻塞减少页面卡顿。script setup langts import { ref, onMounted } from vue const tableDatarefany[]([]) const CHUNK_SIZE100 const getDataasync(){ try{ const resawait fetch(/api/mock) if(!res.ok) throw new Error(请求失败${res.status}) const dataawait res.json() function* chunkGenerate(){ let index0 while(indexdata.length){ yield data.slice(index,indexCHUNK_SIZE) indexCHUNK_SIZE } } const generatorchunkGenerate() const process(){ const chunkgenerator.next() if(!chunk.done){ tableData.value.push(...chunk.value) requestAnimationFrame(process) } } requestAnimationFrame(process) }catch(error){ console.log(error,error) } } getData() /scriptrequestAnimationFrame是浏览器原生支持的API浏览器的屏幕刷新率通常是60 帧 / 秒FPS也就是每≈16.67ms 会完成一次页面重绘更新屏幕内容。requestAnimationFrame简称 RAF的作用是让你的回调函数精准在 “下一次页面重绘之前” 执行由浏览器统一调度而非手动定时比如setTimeout。为什么不能用setTimeout处理数据的 JSsetTimeout 回调在「渲染后」执行处理完数据后要等下一个 16.67ms 的渲染帧才能显示新数据每批数据的渲染都被延迟至少 16.67ms多批叠加后肉眼会明显感觉到 “数据处理和画面更新不同步”表现为 “掉帧、卡顿”更糟的是如果 setTimeout 的宏任务队列里有其他任务比如用户点击回调数据处理会被进一步推迟渲染延迟更久。requestAnimationFrame 的执行流程同步无延迟RAF 的回调跳过宏 / 微任务队列直接被渲染引擎调度到「渲染前」执行