性能优化

如何评价性能？

• lighthouse 的评分维度
• 前端埋点的ab实验，同时上线体验优化前后的页面，对比跳出率、页面留存时长、核心流程转化率

项目性能优化

• domContentLoadedEventEnd DOM Ready时间

• first-screen-time 首屏时间

• loadEventStart 页面加载完成时间

常见页面加载性能优化方法

• 从构建产物中去除未使用的 css和js资源

• 非阻塞性引入css资源

• 合理拆分js文件，防止单个js文件过大

• 优先加载当前页面所需的关键 JavaScript 资源

• 合理配置缓存策略

• 首屏外的内容使用异步加载

• 页面运行性能的性能优化方法

• 图片懒加载

• 合并上报请求，减少请求阻塞

• 通过工具检查内存占用过高的场景，优化代码中的内存泄漏问题

页面运行性能优化

• 图片懒加载

• 合并上报请求，减少请求阻塞

• 通过工具检查内存占用过高的场景，优化代码中的内存泄漏问题

整理下性能优化相关的知识点：

浏览器层面：

浏览器时间节点：首字节时间 - Dom构建完成时间(加载html和js、Dom 构建完成) - css加载完成时间(Dom Ready) - 首屏时间 - 页面完全加载

• 首字节时间：

  • 主要是服务器问题，DNS查询，TCP连接，重定向等等

• JS脚本加载时间

  • 异步加载，懒加载，骨架屏
  • 数据预处理，处理长- 有很大很大的数据表，希望做一些数据的任务，希望放在 SQL 中进行查询。如何把一个表中的部分数据通过中间表放入另外一个表中？有没有优化策略？思路是什么?时间的任务（web worker里面套wasm）

• css样式加载

  • css资源分割，先引入核心的

• 首屏时间

  • 首屏外的内容使用异步加载

• 页面完全加载

  • 合并上报请求，减少请求阻塞
  • 通过工具检查内存占用过高的场景，优化代码中的内存泄漏问题

• SSR优化（一般针对小程序以及交互不是特别多的页面）

页面A跳到页面B的过程中，如何优化？

• Hover的时候预请求、数据预加载
• 路由：懒加载
• 缓存优化 Service Worker
  • 主要是在service worker中缓存资源
  • 缓存策略：强缓存、协商缓存
  • React query 减少重复请求和数据加载
• 代码优化：代码压缩、分割

具体的技术方案

• 骨架屏和懒加载
• 统一第三方包：移除第三方类库
• 优化站点图片
• 服务拆分
  • 拆分成首页、课程详情页、其他页面（这里用微前端会更快吗？）