白屏优化

常见导致白屏过长的原因是： 界面需要渲染的内容过多，渲染时间过长导致的白屏问题

解决思路

由于页面复杂，首先考虑的优化手段是方向明确，效果明确的，不会对页面业务造成过多影响的优化手段，考虑如下

• 骨架屏
• SSR DOM 直出
• 分屏渲染

骨架屏虽然有利于FCP的数据展现，但是治标不治本，用户的需求是能在首屏马上看到内容，而不是用一个骨架屏的假象替换，只能给用户心理安慰，当前页面在做事情，请稍后。但是有些用户会讨厌骨架屏的出现，因为出现意味着速度变慢

SSR DOM 直出直观的减少页面二次请求和渲染 ， 但是如果本身页面就是有很多内容需要渲染的话，也并不是最合适的手段，而且SSR 也不是说上就可以上的，还需要考虑成本问题，计算成本抛给前端，还是全部压力在后端，还是需要均衡。后端需要的算力不一样，所以需要的服务器不一样，成本也就不一样

分屏加载，主要利用API intersectionObserver 观察dom 元素是否在视口内的方式实现懒加载 ，当然这种一般都是用在页面有比较明显的分界线，比如列表、卡片等，图片懒加载等

---

我们的要求就是一开始就需要渲染出所有的内容，比如本事当前视口的DOM 内容就非常的复杂，只不过相当多的内容处于隐藏状态，只有触发某一个时间的时候，才会显示相应的内容。这种情况分屏显示并不要处理

• requestIdleCallback 空闲时间渲染

requestIdleCallback 可以在浏览器空闲时间去执行一些低优先级的任务，从而避免阻塞主线程，提高用户的相应速递

• requestAnimationFrame 分帧渲染

requestAnimationFrame 可以在浏览器下一重绘前执行一些任务，他可以用于创建流畅的动画效果

解决细节

1. web-vitals
2. requestAnimationFrame 主要是用来做动画，他非常适合优化页面的DOM渲染，他可以将一系列操作分帧到不同时间点执行，从而避免阻塞主线程，提升页面的响应速度和流畅度 浏览器渲染机制：

• 浏览器每秒会尝试刷新屏幕60次（60fps），每次刷新（忽略解读Parse阶段）都会经历一下步骤
  • 样式计算（style calculation）
  • 布局（layout）
  • 绘制（paint）
  • 合成（composite）
• requestAnimationFrame 会在浏览器执行这些步骤之前调用回调函数，这样确保dom 操作和样式计算都是在同一个周期内完成，避免对此重排重绘