秒开率破90%-交易后台渲染性能优化 ｜ 得物技术

• First Contentful Paint（FCP）：首次内容绘制时间，此时页面仅展示出一些水印组件，和白屏几乎没区别，一般应该在页面加载后的 1-2s 内完成，此时用户可以感受到页面正在加载。（当前耗时2s+）
• Largest Contentful Paint（LCP）：最大内容绘制时间，此时主应用框架渲染基本完成，子应用还未开始加载。通常应该在页面加载后的 2.5s 内完成，否则用户可能会感到页面加载缓慢。（当前耗时4s+）

• 入口 JS 资源文件 Size 优化
• 严重影响了页面整体加载性能，可以通过构建体积优化，主要思路就是代码分割拆包，静态资源上传 CDN，脚本代码压缩等方式处理
• 接口缓存、调用时序治理
• 针对用户信息、菜单信息等不常变动的接口可以采用相关缓存策略，减少首屏等待的时间
• 部分优先级不高的接口可以延迟调用，异步加载
// 我们采用 Cache aside 旁路缓存策略async function cacheRequest(params: any) {  const startTime = Date.now()  const key = params.key  const cache: any = JSON.parse(localStorage.getItem(key) || '{}')  // 当天有缓存  const canCache = cache.cacheTime && moment(cache.cacheTime).isSame(moment(startTime), 'day')
  window.sendTrack?.({    event: 'main_request_cache',    tags: {      eventTitle: '主应用数据缓存',      eventType: canCache ? 1 : 0,    },  })
  const requestCache = async () => {    const data = await request(params)    localStorage.setItem(key, JSON.stringify({      data,      cacheTime: Date.now()    }))    return data  }  // 优先从缓存中读取数据 后续再更新缓存 保证数据的一致性  if (canCache) {    setTimeout(requestCache, DELAY_CACHE_TIME * 1000)    return cache.data  } else {    const data = await requestCache()    return data  }}

• 三方 SDK 集中治理
• 尽量放在 script 标签中异步加载脚本，可以加快解析时间且保证主入口文件的加载不会被阻塞
• 另外注意防止子应用重复加载，还有部分 SDK 需要及时下线

1. 框架层面优化。深入探究微前端框架层的性能瓶颈，降低应用间消息传递通信和模块重复资源加载损耗
2. 使用 Service Worker。执行一些计算密集型或网络请求相关的任务，实现静态资源缓存优化
3. 资源加载优化。利用发布平台事件同步能力实现应用配置文件按需加载，避免网络带宽造成过大的压力

文 / Johnny

关注得物技术，每周一、三、五更新技术干货

要是觉得文章对你有帮助的话，欢迎评论转发点赞～

未经得物技术许可严禁转载，否则依法追究法律责任。