你会用什么工具来查找代码中的性能问题？
- Network
首先可以通过 Network 查看各类资源的响应时间，看看是否是后端接口过慢导致的过慢。
- Performance
可以通过 Performance 来记录页面的渲染快照。
如果是首页加载的白屏时间过长，那么可以将上面的时间线放在快照记录中白屏开始处和白屏结束的处，然后查看 network，看这次首次选人那中哪些静态资源或者接口占用时间过长。然后针对优化。
如果想看页面的解析、渲染时间以及函数的执行时间，那么可以打开 Main 的下拉选项。然后具体分析
具体方案
代码优化
高性能滚动 scroll
- 防抖动：防抖技术即是可以把多个顺序地调用合并成一次，也就是在一定时间内，规定事件被触发的次数。
- 节流函数：只允许一个函数在 X 毫秒内执行一次，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。
- rAF：越 16.7ms 触发一次 handler，降低了可控性，但是提升了性能和精确度。
- 避免在 scroll 事件中修改样式属性，将样式操作从 scroll 事件中剥离
- 滑动过程中尝试使用 pointer-events: none 禁止鼠标事件 （这是一个 css 样式，用于禁止鼠标行为，比如 hover、click 失效，即元素不会变成鼠标事件的 target，这样增加滚动是的帧频，特别是移动端的时候。滚动时在 body 上添加 pointer-events: none，停止滚动时就去掉。）
css 动画和 js 动画区别
功能涵盖面，JS 比 CSS3 大
定义动画过程的@keyframes 不支持递归定义，如果有多种类似的动画过程，需要调节多个参数来生成的话，将会有很大的冗余（比如 jQuery Mobile 的动画方案），而 JS 则天然可以以一套函数实现多个不同的动画过程
时间尺度上，@keyframes 的动画粒度粗，而 JS 的动画粒度控制可以很细
CSS3 动画里被支持的时间函数非常少，不够灵活
以现有的接口，CSS3 动画无法做到支持两个以上的状态转化
实现/重构难度不一，CSS3 比 JS 更简单，性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而 JS 则需要撰写额外代码
CSS 动画有天然事件支持（TransitionEnd、AnimationEnd，但是它们都需要针对浏览器加前缀），JS 则需要自己写事件
CSS3 有兼容性问题，而 JS 大多时候没有兼容性问题
将 css 资源,如
<link>标签放置在<head>标签中，让页面逐步呈现，提高用户体验页面中引入
<script src='...'></script>样式时最好的做法是加上defer，当为<script defer/>时，渲染进程不会停止 html 解析，而是并行下载 script，然后等到 html 解析完成后，DOMContentLoaded 事件触发之前执行。使用懒函数
静态资源优化
React 项目的页面懒加载，基于前端路由的代码分割
使用 iconfont 或者雪碧图代替小图标，减少 http 请求 (雪碧图用起来比较麻烦)
网络
DNS 预解析
选择合适的 http 缓存策略
http2.0/http3.0
预加载
CDN
首先使用 cdn 的场景是你的项目覆盖范围足够广。用户群体比较大。
cdn 的原理就是在全国各地，乃至全世界范围内部署缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中去。在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的缓存服务器上，由缓存服务器直接相应用户请求。解决网络拥塞（同一个域名，浏览器最多只能建立 6 个 tcp 连接）的状况，提高用户访问速度。
