面试回答
先分析性能（lighthouse），定标准，实践标准
预加载 preload
加载关键CSS
webpack-css-pick-plugin提取关键CSS，将提取到的CSS内嵌插入到节点
http/2 server Push
延迟加载 script defer async
预渲染
prerender
webpack prerender方案
SSR
react next vue nuxt
按需加载
react Suspense+React.lazy
tree- shaking
CDN
缓存
vite-bundle-analyzer
资源太大
---包分 chunk
- 懒加载
- 公共资源 vender
- 缓存（强缓存、协商缓存、策略缓存（service-worker））
- 服务端渲染
- 局部SSR（落地页、广告页、营销活动页）
- PWA
指标衡量
- FCP
- LCP
- FMP
监听上报 web-tracker
性能采集：performance Mutation Observer 用户行为采集：无痕埋点、手动买点、可视化买点 异常采集： 错误边界、异常捕获
framer
定标准
- LCP（最大内容渲染）
- FP首屏渲染
- FMP
- FCP首次内容渲染
- TTI交互时间
异常监控
- 白屏
- MutationObserver
- 内存溢出
- 资源加载异常
- img 资源
- font资源
- JS执行异常
- 异常监听
- 异步处理异常
- promise
- async/await
- 网络异常
- ajax
- fetch
性能优化做了什么
- 打包构建，工程层面
- 代码
- 虚拟列表
- 懒加载
- tree-shaking
- 异步加载
- 网络
- http2
- cdn
- preload prefetch
用户行为埋点
SDK埋点
指标收集
浏览器提供一个对象（Performance），用于收集性能指标
sentry
异常监控实现
设计过大型数据流相关系统
上报的方式
- img 动态创建img,src为上报地址(跨域)
- fetch
- navigator.sendBeacon
整体流程设计(kafka,Flink,clickhouse)
- 基础服务：nodejs、nginx、微服务架构microservice
- mysql,mongodb
- 消息队列：kafka，rabbitmq,rocketmq
- 实时数据加工：Flink,spark,storm
- 数据落库：hbase,clickhouse
- 查询：clickhouse
- 可视化：json,echarts,
