干货 | 秒开率70%+，携程金融SSR应用性能监测与优化

关注

原创最新推荐文章于 2026-05-19 11:23:42 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

一篇文章看懂前端性能优化（2026详解）性能优化这个词我们经常会在前端的工作或面试中遇到，这个东西说难好像也并不怎么难，毕竟谁都能说上几点。但是如果你想在工作上遇到各种场景的性能瓶颈时都有直击本质的性能方案，或者在面试时让面试官眼前一亮，那就不能只拘泥于『想到哪说到哪』或者『说个大概』，而要有一套体系化的、各个角度的、深入了解的知识图谱。这篇文章也算对我个人的前端知识的一次归纳总结，因为『性能优化』不仅仅是『优化』，什么意思呢？实施优化方案之前，首先要知道为什么要这样优化，这么做的目的是什么。这就需要你上到框架、js、css，下到浏览阅读详情

作者简介

建成，携程高级前端开发，对前端工程化、性能优化、效率提升等方面有浓厚兴趣。

背景

对于一款互联网产品来说，用户体验始终扮演着重要的角色，尤其是在后互联网时代，增量见顶，竞争方向逐渐转为存量用户，体验的好坏可能直接决定着一个用户的去留。

据统计，网页加载时间从 1 秒增加到 3 秒，跳出率就会提高 32％；如果网页加载时间从 1 秒增加到 6 秒，跳出率就会上升 106％。

基于此，携程金融前端团队对内部SSR应用的性能实施了一系列的治理，本文将从性能监测、数据处理与分析、优化之路等方面来分享。

一、性能

用户体验是一个比较感性的概念，每个人的感受可能都不太一样，较难进行衡量。基于此，我们首先要把用户体验进行量化，使其可衡量和监测。

根据业内经验和相关分析，用户体验和页面首屏时间、页面累积布局偏移量有较强相关性，通过计算和监测这两个指标可以来衡量应用的用户体验。

二、性能监测

从技术方面来讲，前端性能监控主要有两种方式，一种是合成监控（Synthetic Monitoring，SYN），另一种是真实用户监控（Real User Monitoring，RUM）。

为了凸显用户真实的体验，我们采用了真实用户监控（即通过用户实际操作产生的一系列性能指标数据进行监测）。

2.1 页面首屏时间

页面首屏时间主要涉及到浏览器请求和渲染流程。

2.1.1 性能指标选定

为了能监测应用全链路性能表现，我们在整个链路中选取了最重要的几个节点，分别如下：

DNSDuration：衡量DNS时长
TCPDuration：衡量TCP链接时长
TTFBDuration：衡量浏览器接受到第一个字节的时长
RequestDuration：衡量SSR服务端处理时长
FCP：衡量携程端首屏时间
DOMContentLoaded：衡量去哪儿和携程金融app首屏时间（native loading隐藏时间点）
Load：衡量所有资源加载并执行时长

2.1.2 最佳表现（P90）

RequestDuration：300ms
FCP：800ms
DOMContentLoaded：1000ms

2.1.3 性能指标的收集

指标的收集会用到两个api，分别为监测Android的PerformanceObserver和监测iOS的 Performance.timing。

PerformanceObserver示例

// 创建性能监测实例
function createPerformanceObserver(callback) {
    // Create the performance observer
    const po = new window.PerformanceObserver(list => {
        callback && callback(list)
    })


    return po
}


// 性能监测处理函数
function performationAduitCallback(list) {
    for (const entry of list.getEntries()) {
        if (entry.entryType === 'navigation') {
              // navigation
              const DNSDuration = entry.domainLookupEnd - entry.domainLookupStart
              const TCPDuration = entry.connectEnd - entry.connectStart
              const RequestDuration = entry.responseEnd - entry.requestStart
              const TTFBDuration = entry.responseStart - entry.startTime
              const DOMCompleteDuration = entry.domContentLoadedEventEnd - entry.startTime
              const DOMLoadDuration = entry.duration


              // FCP
              let FCPDuration = 0;
              if (performance && performance.timing) {
                  FCPDuration = window.headReadyTime ? window.headReadyTime - performance.timing.navigationStart : 0;
              }


              const performanceParams = Object.assign({}, extraInfo, {
                  DNSDuration,
                  TCPDuration,
                  RequestDuration,
                  TTFBDuration,
                  FCPDuration,
                  DOMCompleteDuration,
                  DOMLoadDuration,
              })


              sendPerformance(performanceParams)
        }
    }
}


// 性能指标监测(安卓)
function performationAduitAndroid() {
    try {
        const PO = createPerformanceObserver(performationAduitCallback)


        PO.observe({
            entryTypes: ['navigation'],
        })
    } catch (e) {
        console.log('performationAduitAndroid error', e)
    }
}

Performance.timing 示例

// 性能指标监测(IOS)
function performationAduitIos() {
  const timing = performance && performance.timing
  if (!timing) {
      return
  }


  const start = timing.navigationStart
  const param = util.merge(
      {},
      {
          DNSDuration: timing.domainLookupEnd - timing.domainLookupStart,
          TCPDuration: timing.connectEnd - timing.connectStart,
          RequestDuration: timing.responseEnd - timing.requestStart,
          TTFBDuration: timing.responseStart - start,
          FCPDuration: window.headReadyTime ? window.headReadyTime - start : 0,
          DOMCompleteDuration: timing.domContentLoadedEventEnd - start,
          DOMLoadDuration: timing.loadEventEnd - start,
      }
  )


  const performanceParams = Object.assign({}, extraInfo, param)
  sendPerformance(performanceParams)
}

2.2 页面累积布局偏移量（CLS）

CLS (Cumulative Layout Shift) 是Web Vitals指标之一，主要用于测量整个页面生命周期中，布局移位的分值，以此衡量视觉稳定性。

2.2.1 性能指标的选定

衡量页面累积布局偏移量的指标只有一个，就是CLS。通过减少CLS，可以减少用户因为页面突然移位造成的误触概率。

2.2.2 最佳表现（P90）

CLS：0.05

2.2.3 性能指标的收集

CLS的收集同样使用 PerformanceObserver 这个api，这个api会有兼容性问题，只能应用于Android。

// 创建性能监测实例
function createPerformanceObserver(callback) {
    // Create the performance observer
    const po = new window.PerformanceObserver(list => {
        callback && callback(list)
    })


    return po
}


// CLS处理函数
function clsAduitCallback(list) {
    for (const entry of list.getEntries()) {
        if (entry.entryType === 'layout-shift') {
            // CLS
            const CLS = entry.value ? entry.value * 1000 : 0
            const CLSParams = Object.assign({}, extraInfo, { CLS })
            sendPerformance(CLSParams)
        }
    }
}


// CLS数据指标(安卓)
function clsAduit() {
    try {
        const clsPO = createPerformanceObserver(clsAduitCallback)


        if (window.PerformanceObserver.supportedEntryTypes.includes('layout-shift')) {
            clsPO.observe({
                type: 'layout-shift',
                buffered: true,
            })
        }


        window.addEventListener('load', () => {
            // 延迟1s取消监听
            setTimeout(() => {
                clsPO.disconnect()
            }, 1000)
        })
    } catch (e) {
        console.log('cls error===>', e)
    }
}

三、数据处理与分析

数据收集好之后，还需要对数据进行加工处理，才能客观的反应出应用的性能状况。加工处理的方式如下：