diff --git a/docs/getting-started/features.md b/docs/getting-started/features.md
index ed1dc5912..e2f0f6f8b 100644
--- a/docs/getting-started/features.md
+++ b/docs/getting-started/features.md
@@ -20,6 +20,12 @@ Components tab shows your components information, including the node tree, state
 
 ![components](/features/components.png)
 
+## Timeline
+
+Timeline tab shows the performance of your app, including the time spent on rendering, updating, and so on.
+
+![timeline](/features/timeline.png)
+
 ## Assets（Vite only）
 
 Assets tab shows your files from the project directory, you can see the information of selected file with some helpful actions.
diff --git a/docs/guide/migration.md b/docs/guide/migration.md
index 8a9a4ba32..07ae4e439 100644
--- a/docs/guide/migration.md
+++ b/docs/guide/migration.md
@@ -8,20 +8,11 @@ The v7 version of devtools only supports Vue3. If your application is still usin
 
 In v7, we've made some feature-level adjustments compared to v6. You can view the v7 feature overview in the [Features](/getting-started/features). Here, we mainly mention some of the main feature changes.
 
-### Deprecated Features
-
-Due to high performance costs and potential memory leak risks, we have removed some features in v7. These features are:
-
-- `Performance` Timeline
-- `Component Events` Timeline
-
-💡 By the way, we are looking for a balanced approach to re-enable it with better performance. You can follow the latest progress [here](https://github.com/vuejs/devtools-next/issues/609).
-
 ### Feature Adjustments
 
-- Timeline Tab
+- Plugin Timeline Tab
 
-In v7, we moved the timeline tab to be managed within each plugin's menu. Here is a screenshot of the pinia devtools plugin:
+In v7, we moved the plugin timeline tab to be managed within each plugin's menu. Here is a screenshot of the pinia devtools plugin:
 
 ![pinia-timeline](/features/pinia-timeline.png)
 
diff --git a/docs/public/features/timeline.png b/docs/public/features/timeline.png
new file mode 100644
index 000000000..126d0d89b
Binary files /dev/null and b/docs/public/features/timeline.png differ
diff --git a/packages/applet/src/components/timeline/index.vue b/packages/applet/src/components/timeline/index.vue
index c94db069e..09f30b29f 100644
--- a/packages/applet/src/components/timeline/index.vue
+++ b/packages/applet/src/components/timeline/index.vue
@@ -12,11 +12,14 @@ import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import EventList from './EventList.vue'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   layerIds: string[]
   docLink: string
   githubRepoLink?: string
-}>()
+  headerVisible?: boolean
+}>(), {
+  headerVisible: true,
+})
 
 const { expanded: expandedStateNodes } = createExpandedContext('timeline-state')
 
@@ -92,11 +95,18 @@ rpc.functions.on(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEvent
 onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
 })
+
+defineExpose({
+  clear() {
+    eventList.value = []
+    groupList.value.clear()
+  },
+})
 </script>
 
 <template>
   <div class="h-full flex flex-col">
-    <DevToolsHeader :doc-link="docLink" :github-repo-link="githubRepoLink">
+    <DevToolsHeader v-if="headerVisible" :doc-link="docLink" :github-repo-link="githubRepoLink">
       <Navbar />
     </DevToolsHeader>
     <template v-if="eventList.length">
diff --git a/packages/applet/src/index.ts b/packages/applet/src/index.ts
index 865ba540b..d28607999 100644
--- a/packages/applet/src/index.ts
+++ b/packages/applet/src/index.ts
@@ -1,3 +1,5 @@
+import SelectiveList from './components/basic/SelectiveList.vue'
+import Timeline from './components/timeline/index.vue'
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import './styles/base.css'
@@ -9,3 +11,8 @@ export * from './modules/components'
 export * from './modules/custom-inspector'
 export * from './modules/pinia'
 export * from './modules/router'
+
+export {
+  SelectiveList,
+  Timeline,
+}
diff --git a/packages/client/src/components/timeline/TimelineLayers.vue b/packages/client/src/components/timeline/TimelineLayers.vue
new file mode 100644
index 000000000..cba2e4111
--- /dev/null
+++ b/packages/client/src/components/timeline/TimelineLayers.vue
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { rpc, useDevToolsState } from '@vue/devtools-core'
+import { useDevToolsColorMode, vTooltip, VueIcIcon } from '@vue/devtools-ui'
+import { defineModel } from 'vue'
+
+defineProps<{ data: {
+  id: string
+  label: string
+}[] }>()
+
+const emit = defineEmits(['select', 'clear'])
+const devtoolsState = useDevToolsState()
+const recordingState = computed(() => devtoolsState.timelineLayersState.value.recordingState)
+const timelineLayersState = computed(() => devtoolsState.timelineLayersState.value)
+const recordingTooltip = computed(() => recordingState.value ? 'Stop recording' : 'Start recording')
+const { colorMode } = useDevToolsColorMode()
+const isDark = computed(() => colorMode.value === 'dark')
+const selected = defineModel()
+function select(id: string) {
+  selected.value = id
+  emit('select', id)
+  rpc.value.updateTimelineLayersState({
+    selected: id,
+  })
+}
+
+watch(() => timelineLayersState.value.selected, (state: string) => {
+  selected.value = state
+}, {
+  immediate: true,
+})
+
+function getTimelineLayerEnabled(id: string) {
+  return {
+    'mouse': timelineLayersState.value.mouseEventEnabled,
+    'keyboard': timelineLayersState.value.keyboardEventEnabled,
+    'component-event': timelineLayersState.value.componentEventEnabled,
+    'performance': timelineLayersState.value.performanceEventEnabled,
+  }[id]
+}
+
+function toggleRecordingState() {
+  rpc.value.updateTimelineLayersState({
+    recordingState: !recordingState.value,
+  })
+}
+
+function toggleTimelineLayerEnabled(id: string) {
+  const normalizedId = {
+    'mouse': 'mouseEventEnabled',
+    'keyboard': 'keyboardEventEnabled',
+    'component-event': 'componentEventEnabled',
+    'performance': 'performanceEventEnabled',
+  }[id]
+  rpc.value.updateTimelineLayersState({
+    [normalizedId]: !getTimelineLayerEnabled(id),
+  })
+}
+</script>
+
+<template>
+  <div h-full flex flex-col p2>
+    <div class="mb-1 flex justify-end pb-1" border="b dashed base">
+      <div class="flex items-center gap-2 px-1">
+        <div v-tooltip.bottom-end="{ content: recordingTooltip }" class="flex items-center gap1" @click="toggleRecordingState">
+          <span v-if="recordingState" class="recording recording-btn bg-[#ef4444]" />
+          <span v-else class="recording-btn bg-black op70 dark:(bg-white) hover:op100" />
+        </div>
+        <div v-tooltip.bottom-end="{ content: 'Clear all timelines' }" class="flex items-center gap1" @click="emit('clear')">
+          <VueIcIcon name="baseline-delete" cursor-pointer text-xl op70 hover:op100 />
+        </div>
+        <div v-tooltip.bottom-end="{ content: '<p style=\'width: 285px\'>Timeline events can cause significant performance overhead in large applications, so we recommend enabling it only when needed and on-demand. </p>', html: true }" class="flex items-center gap1">
+          <VueIcIcon name="baseline-tips-and-updates" cursor-pointer text-xl op70 hover:op100 />
+        </div>
+      </div>
+    </div>
+    <ul class="p2">
+      <li
+        v-for="item in data" :key="item.id"
+        class="group relative selectable-item"
+        :class="{ active: item.id === selected }"
+        @click="select(item.id)"
+      >
+        {{ item.label }}
+        <span class="absolute right-2 rounded-1 bg-primary-500 px1 text-3 text-white op0 [.active_&]:(bg-primary-400 dark:bg-gray-600) group-hover:op80 hover:op100!" @click.stop="toggleTimelineLayerEnabled(item.id)">
+          {{ getTimelineLayerEnabled(item.id) ? 'Disabled' : 'Enabled' }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+.recording-btn {
+  --at-apply: w-3.5 h-3.5 inline-flex cursor-pointer rounded-50%;
+}
+.recording {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  transition-duration: 1s;
+  box-shadow: #ef4444 0 0 8px;
+}
+</style>
diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts
index b0bb921bc..90f3e59f4 100644
--- a/packages/client/src/constants/tab.ts
+++ b/packages/client/src/constants/tab.ts
@@ -25,6 +25,13 @@ export const builtinTab: [string, ModuleBuiltinTab[]][] = [
       path: 'pages',
       title: 'Pages',
     },
+    {
+      icon: 'i-carbon-roadmap',
+      name: 'Timeline',
+      order: -100,
+      path: 'timeline',
+      title: 'Timeline',
+    },
     {
       icon: 'i-carbon-image-copy',
       name: 'assets',
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
index f72305c32..663b22e8f 100644
--- a/packages/client/src/main.ts
+++ b/packages/client/src/main.ts
@@ -18,6 +18,7 @@ import Pages from '~/pages/pages.vue'
 import PiniaPage from '~/pages/pinia.vue'
 import RouterPage from '~/pages/router.vue'
 import Settings from '~/pages/settings.vue'
+import Timeline from '~/pages/timeline.vue'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
@@ -32,6 +33,7 @@ const routes = [
   { path: '/pinia', component: PiniaPage },
   { path: '/router', component: RouterPage },
   { path: '/pages', component: Pages },
+  { path: '/timeline', component: Timeline },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
   { path: '/settings', component: Settings },
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
new file mode 100644
index 000000000..3df12fb98
--- /dev/null
+++ b/packages/client/src/pages/timeline.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { SelectiveList, Timeline } from '@vue/devtools-applet'
+import {
+  rpc,
+  useDevToolsState,
+} from '@vue/devtools-core'
+import { Pane, Splitpanes } from 'splitpanes'
+
+const timelineRef = ref()
+
+// responsive layout
+const splitpanesRef = ref<HTMLDivElement>()
+const splitpanesReady = ref(false)
+const { width: splitpanesWidth } = useElementSize(splitpanesRef)
+// prevent `Splitpanes` layout from being changed before it ready
+const horizontal = computed(() => splitpanesReady.value ? splitpanesWidth.value < 700 : false)
+
+// #region toggle app
+const devtoolsState = useDevToolsState()
+const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
+  label: app.name + (app.version ? ` (${app.version})` : ''),
+  value: app.id,
+})))
+
+const normalizedAppRecords = computed(() => appRecords.value.map(app => ({
+  label: app.label,
+  id: app.value,
+})))
+
+const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
+watchEffect(() => {
+  activeAppRecordId.value = devtoolsState.activeAppRecordId.value
+})
+
+function toggleApp(id: string) {
+  rpc.value.toggleApp(id).then(() => {
+    clearTimelineEvents()
+  })
+}
+
+// #endregion
+const activeTimelineLayer = ref('')
+const timelineLayers = [
+  {
+    label: 'Mouse',
+    id: 'mouse',
+  },
+  {
+    label: 'Keyboard',
+    id: 'keyboard',
+  },
+  {
+    label: 'Component events',
+    id: 'component-event',
+  },
+  {
+    label: 'Performance',
+    id: 'performance',
+  },
+]
+
+function clearTimelineEvents() {
+  timelineRef.value?.clear()
+}
+
+function toggleTimelineLayer() {
+  clearTimelineEvents()
+}
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <Splitpanes ref="splitpanesRef" class="flex-1 overflow-auto" :horizontal="horizontal" @ready="splitpanesReady = true">
+      <Pane v-if="appRecords.length > 1" border="base h-full" size="20">
+        <div class="no-scrollbar h-full flex select-none gap-2 overflow-scroll">
+          <SelectiveList v-model="activeAppRecordId" :data="normalizedAppRecords" class="w-full" @select="toggleApp" />
+        </div>
+      </Pane>
+      <Pane border="base" h-full>
+        <div class="h-full flex flex-col">
+          <div class="no-scrollbar h-full flex select-none gap-2 overflow-scroll">
+            <TimelineLayers v-model="activeTimelineLayer" :data="timelineLayers" class="w-full" @select="toggleTimelineLayer" @clear="clearTimelineEvents" />
+          </div>
+        </div>
+      </Pane>
+      <Pane relative h-full size="65">
+        <div class="h-full flex flex-col p2">
+          <Timeline ref="timelineRef" :layer-ids="[activeTimelineLayer]" :header-visible="false" doc-link="" />
+        </div>
+      </Pane>
+    </Splitpanes>
+  </div>
+</template>
diff --git a/packages/core/src/rpc/global.ts b/packages/core/src/rpc/global.ts
index 65ba3019a..6303c6674 100644
--- a/packages/core/src/rpc/global.ts
+++ b/packages/core/src/rpc/global.ts
@@ -1,5 +1,5 @@
 import type { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, OpenInEditorOptions } from '@vue/devtools-kit'
-import { devtools, DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected, updateDevToolsClientDetected } from '@vue/devtools-kit'
+import { devtools, DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected, updateDevToolsClientDetected, updateTimelineLayersState } from '@vue/devtools-kit'
 import { createHooks } from 'hookable'
 
 const hooks = createHooks()
@@ -32,6 +32,7 @@ function getDevToolsState() {
       routerId: item.routerId,
     })),
     activeAppRecordId: state.activeAppRecordId,
+    timelineLayersState: state.timelineLayersState,
   }
 }
 
@@ -93,6 +94,9 @@ export const functions = {
   getInspectorActions(id: string) {
     return getInspectorActions(id)
   },
+  updateTimelineLayersState(state: Record<string, boolean>) {
+    return updateTimelineLayersState(state)
+  },
   callInspectorNodeAction(inspectorId: string, actionIndex: number, nodeId: string) {
     const nodeActions = getInspectorNodeActions(inspectorId)
     if (nodeActions?.length) {
diff --git a/packages/core/src/vue-plugin/devtools-state.ts b/packages/core/src/vue-plugin/devtools-state.ts
index 755b01e4c..07d334f7c 100644
--- a/packages/core/src/vue-plugin/devtools-state.ts
+++ b/packages/core/src/vue-plugin/devtools-state.ts
@@ -12,6 +12,7 @@ interface DevToolsState {
   vitePluginDetected: boolean
   appRecords: AppRecord[]
   activeAppRecordId: string
+  timelineLayersState: Record<string, boolean>
 }
 
 type DevToolsRefState = {
@@ -44,6 +45,7 @@ export function createDevToolsStateContext() {
   const vitePluginDetected = ref(false)
   const appRecords = ref<Array<AppRecord>>([])
   const activeAppRecordId = ref('')
+  const timelineLayersState = ref<Record<string, boolean>>({})
 
   function updateState(data: DevToolsState) {
     connected.value = data.connected
@@ -54,6 +56,7 @@ export function createDevToolsStateContext() {
     vitePluginDetected.value = data.vitePluginDetected
     appRecords.value = data.appRecords
     activeAppRecordId.value = data.activeAppRecordId!
+    timelineLayersState.value = data.timelineLayersState!
   }
 
   function getDevToolsState() {
@@ -76,6 +79,7 @@ export function createDevToolsStateContext() {
     vitePluginDetected,
     appRecords,
     activeAppRecordId,
+    timelineLayersState,
   }
 }
 
diff --git a/packages/devtools-kit/src/core/app/index.ts b/packages/devtools-kit/src/core/app/index.ts
index c8cb93373..9678ecaba 100644
--- a/packages/devtools-kit/src/core/app/index.ts
+++ b/packages/devtools-kit/src/core/app/index.ts
@@ -57,6 +57,7 @@ export function createAppRecord(app: VueAppInstance['appContext']['app']): AppRe
       id,
       name,
       instanceMap: new Map(),
+      perfGroupIds: new Map(),
       rootInstance,
     }
 
diff --git a/packages/devtools-kit/src/core/plugin/components.ts b/packages/devtools-kit/src/core/plugin/components.ts
index 02d929bf3..ab6b3dc0d 100644
--- a/packages/devtools-kit/src/core/plugin/components.ts
+++ b/packages/devtools-kit/src/core/plugin/components.ts
@@ -6,6 +6,7 @@ import { ComponentWalker } from '../../core/component/tree/walker'
 import { getAppRecord, getComponentId, getComponentInstance } from '../../core/component/utils'
 import { activeAppRecord, devtoolsContext, devtoolsState, DevToolsV6PluginAPIHookKeys } from '../../ctx'
 import { hook } from '../../hook'
+import { setupBuiltinTimelineLayers } from '../timeline'
 import { exposeInstanceToWindow } from '../vm'
 
 const INSPECTOR_ID = 'components'
@@ -24,6 +25,8 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
       treeFilterPlaceholder: 'Search components',
     })
 
+    setupBuiltinTimelineLayers(api)
+
     api.on.getInspectorTree(async (payload) => {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
         // @ts-expect-error skip type @TODO
diff --git a/packages/devtools-kit/src/core/timeline/index.ts b/packages/devtools-kit/src/core/timeline/index.ts
new file mode 100644
index 000000000..56677b61a
--- /dev/null
+++ b/packages/devtools-kit/src/core/timeline/index.ts
@@ -0,0 +1,139 @@
+import type { DevToolsV6PluginAPI } from '../../api/v6'
+import { isBrowser } from '@vue/devtools-shared'
+import { getAppRecord, getInstanceName } from '../../core/component/utils'
+import { devtoolsState } from '../../ctx/state'
+import { hook } from '../../hook'
+import { PERFORMANCE_EVENT_LAYER_ID, performanceMarkEnd, performanceMarkStart } from './perf'
+
+const COMPONENT_EVENT_LAYER_ID = 'component-event'
+
+export function setupBuiltinTimelineLayers(api: DevToolsV6PluginAPI) {
+  if (!isBrowser)
+    return
+
+  // Mouse events timeline layer
+
+  api.addTimelineLayer({
+    id: 'mouse',
+    label: 'Mouse',
+    color: 0xA451AF,
+  })
+
+  ;(['mousedown', 'mouseup', 'click', 'dblclick'] as const).forEach((eventType) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.mouseEventEnabled)
+      return
+    window.addEventListener(eventType, async (event: MouseEvent) => {
+      await api.addTimelineEvent({
+        layerId: 'mouse',
+        event: {
+          time: Date.now(),
+          data: {
+            type: eventType,
+            x: event.clientX,
+            y: event.clientY,
+          },
+          title: eventType,
+        },
+      })
+    }, {
+      capture: true,
+      passive: true,
+    })
+  })
+
+  // Keyboard events timeline layer
+
+  api.addTimelineLayer({
+    id: 'keyboard',
+    label: 'Keyboard',
+    color: 0x8151AF,
+  })
+
+  ;(['keyup', 'keydown', 'keypress'] as const).forEach((eventType) => {
+    window.addEventListener(eventType, async (event: KeyboardEvent) => {
+      if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.keyboardEventEnabled)
+        return
+      await api.addTimelineEvent({
+        layerId: 'keyboard',
+        event: {
+          time: Date.now(),
+          data: {
+            type: eventType,
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+          },
+          title: event.key,
+        },
+      })
+    }, {
+      capture: true,
+      passive: true,
+    })
+  })
+
+  // Component events timeline layer
+
+  api.addTimelineLayer({
+    id: COMPONENT_EVENT_LAYER_ID,
+    label: 'Component events',
+    color: 0x4FC08D,
+  })
+
+  hook.on.componentEmit(async (app, instance, event, params) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.componentEventEnabled)
+      return
+
+    const appRecord = await getAppRecord(app)
+
+    if (!appRecord)
+      return
+
+    const componentId = `${appRecord.id}:${instance.uid}`
+    const componentName = getInstanceName(instance) || 'Unknown Component'
+
+    api.addTimelineEvent({
+      layerId: COMPONENT_EVENT_LAYER_ID,
+      event: {
+        time: Date.now(),
+        data: {
+          component: {
+            _custom: {
+              type: 'component-definition',
+              display: componentName,
+            },
+          },
+          event,
+          params,
+        },
+        title: event,
+        subtitle: `by ${componentName}`,
+        meta: {
+          componentId,
+        },
+      },
+    })
+  })
+
+  // Performance timeline layer
+
+  api.addTimelineLayer({
+    id: 'performance',
+    label: PERFORMANCE_EVENT_LAYER_ID,
+    color: 0x41B86A,
+  })
+
+  hook.on.perfStart((app, uid, vm, type, time) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.performanceEventEnabled)
+      return
+    performanceMarkStart(api, app, uid, vm, type, time)
+  })
+
+  hook.on.perfEnd((app, uid, vm, type, time) => {
+    if (!devtoolsState.timelineLayersState.recordingState || !devtoolsState.timelineLayersState.performanceEventEnabled)
+      return
+    performanceMarkEnd(api, app, uid, vm, type, time)
+  })
+}
diff --git a/packages/devtools-kit/src/core/timeline/perf.ts b/packages/devtools-kit/src/core/timeline/perf.ts
new file mode 100644
index 000000000..8b863d802
--- /dev/null
+++ b/packages/devtools-kit/src/core/timeline/perf.ts
@@ -0,0 +1,97 @@
+import type { App } from 'vue'
+import type { DevToolsV6PluginAPI } from '../../api/v6'
+import type { VueAppInstance } from '../../types'
+import { getAppRecord, getInstanceName } from '../../core/component/utils'
+import { devtoolsState } from '../../ctx/state'
+
+type HookAppInstance = App & VueAppInstance
+const markEndQueue = new Map<string, {
+  app: App
+  uid: number
+  instance: HookAppInstance
+  type: string
+  time: number
+}>()
+export const PERFORMANCE_EVENT_LAYER_ID = 'performance'
+
+export async function performanceMarkStart(api: DevToolsV6PluginAPI, app: App, uid: number, vm: HookAppInstance, type: string, time: number) {
+  const appRecord = await getAppRecord(app)
+  if (!appRecord) {
+    return
+  }
+  const componentName = getInstanceName(vm) || 'Unknown Component'
+  const groupId = devtoolsState.perfUniqueGroupId++
+  const groupKey = `${uid}-${type}`
+  appRecord.perfGroupIds.set(groupKey, { groupId, time })
+  await api.addTimelineEvent({
+    layerId: PERFORMANCE_EVENT_LAYER_ID,
+    event: {
+      time: Date.now(),
+      data: {
+        component: componentName,
+        type,
+        measure: 'start',
+      },
+      title: componentName,
+      subtitle: type,
+      groupId,
+    },
+  })
+  if (markEndQueue.has(groupKey)) {
+    const {
+      app,
+      uid,
+      instance,
+      type,
+      time,
+    } = markEndQueue.get(groupKey)!
+    markEndQueue.delete(groupKey)
+    await performanceMarkEnd(
+      api,
+      app,
+      uid,
+      instance,
+      type,
+      time,
+    )
+  }
+}
+
+export function performanceMarkEnd(api: DevToolsV6PluginAPI, app: App, uid: number, vm: HookAppInstance, type: string, time: number) {
+  const appRecord = getAppRecord(app)
+  if (!appRecord)
+    return
+
+  const componentName = getInstanceName(vm) || 'Unknown Component'
+  const groupKey = `${uid}-${type}`
+  const groupInfo = appRecord.perfGroupIds.get(groupKey)
+  if (groupInfo) {
+    const groupId = groupInfo.groupId
+    const startTime = groupInfo.time
+    const duration = time - startTime
+    api.addTimelineEvent({
+      layerId: PERFORMANCE_EVENT_LAYER_ID,
+      event: {
+        time: Date.now(),
+        data: {
+          component: componentName,
+          type,
+          measure: 'end',
+          duration: {
+            _custom: {
+              type: 'Duration',
+              value: duration,
+              display: `${duration} ms`,
+            },
+          },
+        },
+        title: componentName,
+        subtitle: type,
+        groupId,
+      },
+    })
+  }
+  else {
+    markEndQueue.set(groupKey, { app, uid, instance: vm, type, time })
+  }
+}
diff --git a/packages/devtools-kit/src/core/timeline/storage.ts b/packages/devtools-kit/src/core/timeline/storage.ts
new file mode 100644
index 000000000..f4d0eacfe
--- /dev/null
+++ b/packages/devtools-kit/src/core/timeline/storage.ts
@@ -0,0 +1,34 @@
+import { isBrowser } from '@vue/devtools-shared'
+
+const TIMELINE_LAYERS_STATE_STORAGE_ID = '__VUE_DEVTOOLS_KIT_TIMELINE_LAYERS_STATE__'
+
+export function addTimelineLayersStateToStorage(state: Record<string, boolean | string>) {
+  if (!isBrowser) {
+    return
+  }
+  localStorage.setItem(TIMELINE_LAYERS_STATE_STORAGE_ID, JSON.stringify(state))
+}
+
+export function getTimelineLayersStateFromStorage() {
+  if (!isBrowser) {
+    return {
+      recordingState: false,
+      mouseEventEnabled: false,
+      keyboardEventEnabled: false,
+      componentEventEnabled: false,
+      performanceEventEnabled: false,
+      selected: '',
+    }
+  }
+  const state = localStorage.getItem(TIMELINE_LAYERS_STATE_STORAGE_ID)
+  return state
+    ? JSON.parse(state)
+    : {
+        recordingState: false,
+        mouseEventEnabled: false,
+        keyboardEventEnabled: false,
+        componentEventEnabled: false,
+        performanceEventEnabled: false,
+        selected: '',
+      }
+}
diff --git a/packages/devtools-kit/src/ctx/index.ts b/packages/devtools-kit/src/ctx/index.ts
index 9ee3a6726..56a591b9d 100644
--- a/packages/devtools-kit/src/ctx/index.ts
+++ b/packages/devtools-kit/src/ctx/index.ts
@@ -14,6 +14,7 @@ export * from './inspector'
 export * from './plugin'
 export * from './router'
 export * from './state'
+export { updateTimelineLayersState } from './timeline'
 
 export interface DevtoolsContext {
   hooks: Hookable<DevToolsContextHooks & DevToolsMessagingHooks, HookKeys<DevToolsContextHooks & DevToolsMessagingHooks>>
diff --git a/packages/devtools-kit/src/ctx/state.ts b/packages/devtools-kit/src/ctx/state.ts
index c5356a735..e5480ced9 100644
--- a/packages/devtools-kit/src/ctx/state.ts
+++ b/packages/devtools-kit/src/ctx/state.ts
@@ -2,6 +2,7 @@ import type { AppRecord, CustomCommand, CustomTab } from '../types'
 import { target as global, isUrlString } from '@vue/devtools-shared'
 import { debounce } from 'perfect-debounce'
 import { devtoolsContext } from '.'
+import { getTimelineLayersStateFromStorage } from '../core/timeline/storage'
 import { DevToolsMessagingHookKeys } from './hook'
 
 export interface DevToolsAppRecords extends AppRecord {}
@@ -18,6 +19,8 @@ export interface DevToolsState {
   devtoolsClientDetected: {
     [key: string]: boolean
   }
+  perfUniqueGroupId: number
+  timelineLayersState: Record<string, boolean>
 }
 
 global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ ??= []
@@ -38,6 +41,8 @@ function initStateFactory() {
     commands: [],
     highPerfModeEnabled: true,
     devtoolsClientDetected: {},
+    perfUniqueGroupId: 0,
+    timelineLayersState: getTimelineLayersStateFromStorage(),
   }
 }
 global[STATE_KEY] ??= initStateFactory()
diff --git a/packages/devtools-kit/src/ctx/timeline.ts b/packages/devtools-kit/src/ctx/timeline.ts
index 8c30ed60e..cfe590d10 100644
--- a/packages/devtools-kit/src/ctx/timeline.ts
+++ b/packages/devtools-kit/src/ctx/timeline.ts
@@ -1,6 +1,8 @@
 import type { PluginDescriptor, TimelineLayerOptions } from '../types'
 import { target } from '@vue/devtools-shared'
 import { getAppRecord } from '../core/component/utils'
+import { addTimelineLayersStateToStorage } from '../core/timeline/storage'
+import { devtoolsState, updateDevToolsState } from './state'
 
 interface DevToolsKitTimelineLayer extends TimelineLayerOptions {
   appRecord: unknown
@@ -22,3 +24,14 @@ export function addTimelineLayer(options: TimelineLayerOptions, descriptor: Plug
     appRecord: getAppRecord(descriptor.app),
   })
 }
+
+export function updateTimelineLayersState(state: Record<string, boolean>) {
+  const updatedState = {
+    ...devtoolsState.timelineLayersState,
+    ...state,
+  }
+  addTimelineLayersStateToStorage(updatedState)
+  updateDevToolsState({
+    timelineLayersState: updatedState,
+  })
+}
diff --git a/packages/devtools-kit/src/hook/index.ts b/packages/devtools-kit/src/hook/index.ts
index 5a77521c1..c5695edac 100644
--- a/packages/devtools-kit/src/hook/index.ts
+++ b/packages/devtools-kit/src/hook/index.ts
@@ -21,6 +21,9 @@ const on: VueHooks['on'] = {
   componentAdded(fn) {
     return devtoolsHooks.hook(DevToolsHooks.COMPONENT_ADDED, fn)
   },
+  componentEmit(fn) {
+    return devtoolsHooks.hook(DevToolsHooks.COMPONENT_EMIT, fn)
+  },
   componentUpdated(fn) {
     return devtoolsHooks.hook(DevToolsHooks.COMPONENT_UPDATED, fn)
   },
@@ -30,6 +33,12 @@ const on: VueHooks['on'] = {
   setupDevtoolsPlugin(fn) {
     devtoolsHooks.hook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, fn)
   },
+  perfStart(fn) {
+    return devtoolsHooks.hook(DevToolsHooks.PERFORMANCE_START, fn)
+  },
+  perfEnd(fn) {
+    return devtoolsHooks.hook(DevToolsHooks.PERFORMANCE_END, fn)
+  },
 }
 
 export function createDevToolsHook(): DevToolsHook {
@@ -113,6 +122,24 @@ export function subscribeDevToolsHook() {
     devtoolsHooks.callHook(DevToolsHooks.COMPONENT_REMOVED, app, uid, parentUid, component)
   })
 
+  hook.on<DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]>(DevToolsHooks.COMPONENT_EMIT, async (app, instance, event, params) => {
+    if (!app || !instance || devtoolsState.highPerfModeEnabled)
+      return
+    devtoolsHooks.callHook(DevToolsHooks.COMPONENT_EMIT, app, instance, event, params)
+  })
+
+  hook.on<DevToolsEvent[DevToolsHooks.PERFORMANCE_START]>(DevToolsHooks.PERFORMANCE_START, (app, uid, vm, type, time) => {
+    if (!app || devtoolsState.highPerfModeEnabled)
+      return
+    devtoolsHooks.callHook(DevToolsHooks.PERFORMANCE_START, app, uid, vm, type, time)
+  })
+
+  hook.on<DevToolsEvent[DevToolsHooks.PERFORMANCE_END]>(DevToolsHooks.PERFORMANCE_END, (app, uid, vm, type, time) => {
+    if (!app || devtoolsState.highPerfModeEnabled)
+      return
+    devtoolsHooks.callHook(DevToolsHooks.PERFORMANCE_END, app, uid, vm, type, time)
+  })
+
   // devtools plugin setup
   hook.on<DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]>(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => {
     if (options?.target === 'legacy')
diff --git a/packages/devtools-kit/src/types/app.ts b/packages/devtools-kit/src/types/app.ts
index 49acaa193..236753655 100644
--- a/packages/devtools-kit/src/types/app.ts
+++ b/packages/devtools-kit/src/types/app.ts
@@ -50,6 +50,7 @@ export interface AppRecord {
   version?: string
   types?: Record<string, string | symbol>
   instanceMap: Map<string, VueAppInstance>
+  perfGroupIds: Map<string, { groupId: number, time: number }>
   rootInstance: VueAppInstance
   routerId?: string
 }
diff --git a/packages/devtools-kit/src/types/hook.ts b/packages/devtools-kit/src/types/hook.ts
index b0371d1bd..1075ecc83 100644
--- a/packages/devtools-kit/src/types/hook.ts
+++ b/packages/devtools-kit/src/types/hook.ts
@@ -26,9 +26,12 @@ export interface DevToolsEvent {
   [DevToolsHooks.APP_CONNECTED]: () => void
   [DevToolsHooks.APP_UNMOUNT]: (app: VueAppInstance['appContext']['app']) => void | Promise<void>
   [DevToolsHooks.COMPONENT_ADDED]: (app: HookAppInstance, uid: number, parentUid: number, component: VueAppInstance) => void | Promise<void>
+  [DevToolsHooks.COMPONENT_EMIT]: (app: HookAppInstance, instance: VueAppInstance, event: string, params: unknown) => void | Promise<void>
   [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added']
   [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added']
   [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: { target?: string }) => void
+  [DevToolsHooks.PERFORMANCE_START]: (app: App, uid: number, vm: HookAppInstance, type: string, time: number) => void
+  [DevToolsHooks.PERFORMANCE_END]: (app: App, uid: number, vm: HookAppInstance, type: string, time: number) => void
 }
 
 export interface DevToolsHook {
@@ -51,9 +54,12 @@ export interface VueHooks {
     vueAppUnmount: (fn: DevToolsEvent[DevToolsHooks.APP_UNMOUNT]) => void
     vueAppConnected: (fn: DevToolsEvent[DevToolsHooks.APP_CONNECTED]) => void
     componentAdded: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]) => () => void
+    componentEmit: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_EMIT]) => () => void
     componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void
     componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void
     setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void
+    perfStart: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_START]) => void
+    perfEnd: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_END]) => void
   }
   setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void
 }
diff --git a/packages/playground/basic/src/pages/Home.vue b/packages/playground/basic/src/pages/Home.vue
index 085d5893c..bcd98a14a 100644
--- a/packages/playground/basic/src/pages/Home.vue
+++ b/packages/playground/basic/src/pages/Home.vue
@@ -2,8 +2,8 @@
 import Foo from '../components/Foo.vue'
 import IndexComponent from '../components/IndexComponent/index.vue'
 
+const emit = defineEmits(['update'])
 const visible = ref(false)
-
 const obj = reactive<{
   count: number
   foo?: number
@@ -17,12 +17,19 @@ obj.foo = toRef(obj, 'count')
 // @ts-expect-error type guard
 obj.bar = ref('bar')
 
+function trigger() {
+  emit('update', 1)
+}
+
 const toRefObj = toRefs(obj)
 </script>
 
 <template>
   <div class="m-auto mt-3 h-80 w-120 flex flex-col items-center justify-center rounded bg-[#363636]">
     Home
+    <button @click="trigger">
+      Click me
+    </button>
     <Foo v-if="visible" />
     <IndexComponent v-if="visible" />
     <img src="/vite.svg" alt="Vite Logo">