Preview Updated 2026-05-10

RequestTimeline 请求时序图

瀑布式请求时序图：每行一个请求，按 start..end 渲染色条；phases 数组里 queued/dns/connect/wait/receive 分段着色，可看出耗时构成。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

适合放在故障复盘 / 性能分析页：传入一批 { id, label, start, end, phases? }，按时间轴并排显示。phases 是可选的耗时分段，每段一种颜色（queued / blocked / dns / connect / ssl / wait / receive）。

背景视口

0ms100ms200ms300ms400ms500ms

GET /api/users/me

80ms

GET /api/orders?status=open

250ms

GET /assets/app.js

45ms

GET /assets/main.css

60ms

POST /api/track

40ms

DELETE /api/sessions/abc

240ms

src/App.vue

<script setup lang="ts">
import { CfRequestTimeline, type RequestTiming } from '@chufix-design/vue';

const requests: RequestTiming[] = [
  {
    id: 'r1',
    label: 'GET /api/users/me',
    start: 0,
    end: 80,
    phases: [
      { type: 'blocked', duration: 4 },
      { type: 'dns', duration: 6 },
      { type: 'connect', duration: 12 },
      { type: 'wait', duration: 50 },
      { type: 'receive', duration: 8 },
    ],
  },
  {
    id: 'r2',
    label: 'GET /api/orders?status=open',
    start: 70,
    end: 320,
    phases: [
      { type: 'wait', duration: 230 },
      { type: 'receive', duration: 20 },
    ],
    tone: 'warning',
  },
  {
    id: 'r3',
    label: 'GET /assets/app.js',
    start: 50,
    end: 95,
    phases: [
      { type: 'queued', duration: 5 },
      { type: 'wait', duration: 30 },
      { type: 'receive', duration: 10 },
    ],
  },
  {
    id: 'r4',
    label: 'GET /assets/main.css',
    start: 50,
    end: 110,
  },
  {
    id: 'r5',
    label: 'POST /api/track',
    start: 200,
    end: 240,
  },
  {
    id: 'r6',
    label: 'DELETE /api/sessions/abc',
    start: 300,
    end: 540,
    tone: 'error',
  },
];
</script>
<template>
  <CfRequestTimeline :requests="requests" />
</template>

<script setup>
import { CfRequestTimeline } from '@chufix-design/vue';

const requests= [
  {
    id: 'r1',
    label: 'GET /api/users/me',
    start: 0,
    end: 80,
    phases: [
      { type: 'blocked', duration: 4 },
      { type: 'dns', duration: 6 },
      { type: 'connect', duration: 12 },
      { type: 'wait', duration: 50 },
      { type: 'receive', duration: 8 },
    ],
  },
  {
    id: 'r2',
    label: 'GET /api/orders?status=open',
    start: 70,
    end: 320,
    phases: [
      { type: 'wait', duration: 230 },
      { type: 'receive', duration: 20 },
    ],
    tone: 'warning',
  },
  {
    id: 'r3',
    label: 'GET /assets/app.js',
    start: 50,
    end: 95,
    phases: [
      { type: 'queued', duration: 5 },
      { type: 'wait', duration: 30 },
      { type: 'receive', duration: 10 },
    ],
  },
  {
    id: 'r4',
    label: 'GET /assets/main.css',
    start: 50,
    end: 110,
  },
  {
    id: 'r5',
    label: 'POST /api/track',
    start: 200,
    end: 240,
  },
  {
    id: 'r6',
    label: 'DELETE /api/sessions/abc',
    start: 300,
    end: 540,
    tone: 'error',
  },
];
</script>
<template>
  <CfRequestTimeline :requests="requests" />
</template>

import { CfRequestTimeline } from '@chufix-design/react';

export default function Demo() {
  const requests: RequestTiming[] = [
    {
      id: 'r1',
      label: 'GET /api/users/me',
      start: 0,
      end: 80,
      phases: [
        { type: 'blocked', duration: 4 },
        { type: 'dns', duration: 6 },
        { type: 'connect', duration: 12 },
        { type: 'wait', duration: 50 },
        { type: 'receive', duration: 8 },
      ],
    },
    {
      id: 'r2',
      label: 'GET /api/orders?status=open',
      start: 70,
      end: 320,
      phases: [
        { type: 'wait', duration: 230 },
        { type: 'receive', duration: 20 },
      ],
      tone: 'warning',
    },
    {
      id: 'r3',
      label: 'GET /assets/app.js',
      start: 50,
      end: 95,
      phases: [
        { type: 'queued', duration: 5 },
        { type: 'wait', duration: 30 },
        { type: 'receive', duration: 10 },
      ],
    },
    {
      id: 'r4',
      label: 'GET /assets/main.css',
      start: 50,
      end: 110,
    },
    {
      id: 'r5',
      label: 'POST /api/track',
      start: 200,
      end: 240,
    },
    {
      id: 'r6',
      label: 'DELETE /api/sessions/abc',
      start: 300,
      end: 540,
      tone: 'error',
    },
  ];
  return (
    <>
      <CfRequestTimeline requests={requests} />
    </>
  );
}

import { CfRequestTimeline } from '@chufix-design/react';

export default function Demo() {
  const requests= [
    {
      id: 'r1',
      label: 'GET /api/users/me',
      start: 0,
      end: 80,
      phases: [
        { type: 'blocked', duration: 4 },
        { type: 'dns', duration: 6 },
        { type: 'connect', duration: 12 },
        { type: 'wait', duration: 50 },
        { type: 'receive', duration: 8 },
      ],
    },
    {
      id: 'r2',
      label: 'GET /api/orders?status=open',
      start: 70,
      end: 320,
      phases: [
        { type: 'wait', duration: 230 },
        { type: 'receive', duration: 20 },
      ],
      tone: 'warning',
    },
    {
      id: 'r3',
      label: 'GET /assets/app.js',
      start: 50,
      end: 95,
      phases: [
        { type: 'queued', duration: 5 },
        { type: 'wait', duration: 30 },
        { type: 'receive', duration: 10 },
      ],
    },
    {
      id: 'r4',
      label: 'GET /assets/main.css',
      start: 50,
      end: 110,
    },
    {
      id: 'r5',
      label: 'POST /api/track',
      start: 200,
      end: 240,
    },
    {
      id: 'r6',
      label: 'DELETE /api/sessions/abc',
      start: 300,
      end: 540,
      tone: 'error',
    },
  ];
  return (
    <>
      <CfRequestTimeline requests={requests} />
    </>
  );
}

API

Props

属性	类型	默认	说明
`requests`	`RequestTiming[]`	—	请求时序
`unit`	`'ms' \| 's'`	`'ms'`	刻度单位
`rowHeight`	`number`	`22`	每行高
`labelWidth`	`number`	`220`	左侧 label 列宽
`showGrid`	`boolean`	`true`	显示刻度与网格线

Events

事件	载荷	说明
`select`	`RequestTiming`	点击某行