前端性能优化

输入URL到整个页面经历了什么过程？

加载慢，交互卡

web性能：打开速度，动画效果，表单提交，列表滚动，页面切换

定义：客观度量和可感知的用户体验

1. 减少整体加载时间：减少文件体积 减少http请求 使用预加载
2. 使网站尽快可用：仅加载首屏内容，其他内容懒加载
3. 平滑和交互性：css代替js 减少ui重绘
4. 感知表现：加载动画，滚动条，骨架屏等提示信息
5. 性能测定： 性能指标、性能测定、性能监控持续优化

如何优化？

1. 性能指标 - 多快算快？
2. 专业的工具可量化地评估出网站或应用的性能表现
3. 立足网站生命周期，分析出性能差的原因
4. 技术改造，可行性分析等具体的优化试试
5. 迭代优化

性能指标？

1. RAIL性能模型
   response 100ms以内 
   animation 每一帧16ms渲染 
   idle 执行时间小于50ms (异步切片)
   load 5s以内
2. 基于用户体验的核心指标
   FCP LCP FID（100~300ms）TTI（4s内）TBT CLS(布局偏移) Speed Index
3. 新一代性能指标：Web Vitals
   加载性能LCP 交互性FID 页面视觉稳定性CLS
    

性能测量

1. 浏览器devtools调试工具
2. 网络监控分析
3. 性能监控分析
4. 。。。
5. 灯塔（Lighthouse）
   https://developer.chrome.com/docs/devtools/speed/get-started/
   git clone https://github.com/askwuxue/salt-resolute-icecream
6. 网站整体质量评估，给出优化建议
7. WebPageTest
8. 多测试地点
9. 全面的性能报告
10. 。。。
     

生命周期

优化方案？

1. 从请求到响应的优化：DNS查询 HTTP长连接 HTTP2 HTTP压缩 HTTP缓存
2. 关键渲染路径优化：是否存在不必要的重绘和回流
3. 加载过程的优化：延迟加载，不在首屏展示非关键信息，占用了页面加载的信息
4. 资源优化：图片、视频等不同格式类型的选择
5. 构建优化：压缩合并、基于webpack构建优化方案

面试题

输入URL到整个页面经历了什么过程？

1. 浏览器接收到URL,到开启网络请求线程
2. 建立HTTP请求
3. 服务端收到请求并转到具体处理后台
4. 前后台直接HTTP交互和涉及的缓存机制
5. 浏览器接收到数据包后关键渲染路径（dom cssom 渲染绘制）
6. js引擎的解析过程

前端响应，性能问题优化

1. DNS解析优化
2. HTTP长连接
3. HTTP2
4. 避免重定向
5. 压缩传输数据资源
6. HTTP缓存
7. Service Worker缓存
8. CDN缓存
9. Push缓存
10. 服务端渲染