diff --git a/.github/workflows/benchmark.yaml b/.github/workflows/benchmark.yaml
index 14faf4801c..76c13d82ae 100644
--- a/.github/workflows/benchmark.yaml
+++ b/.github/workflows/benchmark.yaml
@@ -85,6 +85,8 @@ jobs:
         with:
           name: benchmark
           tool: "customSmallerIsBetter"
+          gh-pages-branch: main
+          benchmark-data-dir-path: "docs/dev/bench"
           output-file-path: "test/benchmark/report/combined_benchmark.json"
           github-token: ${{ secrets.GITHUB_TOKEN }}
           auto-push: true
diff --git a/docs/dev/bench/index.html b/docs/dev/bench/index.html
new file mode 100644
index 0000000000..3358f22cf9
--- /dev/null
+++ b/docs/dev/bench/index.html
@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
+    <style>
+      html {
+        font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
+        -webkit-font-smoothing: antialiased;
+        background-color: #fff;
+        font-size: 16px;
+      }
+      body {
+        color: #4a4a4a;
+        margin: 8px;
+        font-size: 1em;
+        font-weight: 400;
+      }
+      header {
+        margin-bottom: 8px;
+        display: flex;
+        flex-direction: column;
+      }
+      main {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+      a {
+        color: #3273dc;
+        cursor: pointer;
+        text-decoration: none;
+      }
+      a:hover {
+        color: #000;
+      }
+      button {
+        color: #fff;
+        background-color: #3298dc;
+        border-color: transparent;
+        cursor: pointer;
+        text-align: center;
+      }
+      button:hover {
+        background-color: #2793da;
+        flex: none;
+      }
+      .spacer {
+        flex: auto;
+      }
+      .small {
+        font-size: 0.75rem;
+      }
+      footer {
+        margin-top: 16px;
+        display: flex;
+        align-items: center;
+      }
+      .header-label {
+        margin-right: 4px;
+      }
+      .benchmark-set {
+        margin: 8px 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+      }
+      .benchmark-title {
+        font-size: 3rem;
+        font-weight: 600;
+        word-break: break-word;
+        text-align: center;
+      }
+      .benchmark-graphs {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        align-items: center;
+        flex-wrap: wrap;
+        width: 100%;
+      }
+      .benchmark-chart {
+        max-width: 1000px;
+      }
+    </style>
+    <title>Benchmarks</title>
+  </head>
+
+  <body>
+    <header id="header">
+      <div class="header-item">
+        <strong class="header-label">Last Update:</strong>
+        <span id="last-update"></span>
+      </div>
+      <div class="header-item">
+        <strong class="header-label">Repository:</strong>
+        <a id="repository-link" rel="noopener"></a>
+      </div>
+    </header>
+    <main id="main"></main>
+    <footer>
+      <button id="dl-button">Download data as JSON</button>
+      <div class="spacer"></div>
+      <div class="small">Powered by <a rel="noopener" href="https://github.com/marketplace/actions/continuous-benchmark">github-action-benchmark</a></div>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.2/dist/Chart.min.js"></script>
+    <script src="data.js"></script>
+    <script id="main-script">
+      'use strict';
+      (function() {
+        // Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
+        const toolColors = {
+          cargo: '#dea584',
+          go: '#00add8',
+          benchmarkjs: '#f1e05a',
+          benchmarkluau: '#000080',
+          pytest: '#3572a5',
+          googlecpp: '#f34b7d',
+          catch2: '#f34b7d',
+          julia: '#a270ba',
+          jmh: '#b07219',
+          benchmarkdotnet: '#178600',
+          customBiggerIsBetter: '#38ff38',
+          customSmallerIsBetter: '#ff3838',
+          _: '#333333'
+        };
+
+        const benchColors = ['#dea584','#00add8','#f1e05a','#000080','#3572a5','#f34b7d','#a270ba','#b07219','#178600','#38ff38','#ff3838']
+
+        function init() {
+          function collectBenchesPerTestCase(entries) {
+            const map = new Map();
+            for (const entry of entries) {
+              const {commit, date, tool, benches} = entry;
+              for (const bench of benches) {
+                const result = { commit, date, tool, bench };
+                const arr = map.get(bench.name);
+                if (arr === undefined) {
+                  map.set(bench.name, [result]);
+                } else {
+                  arr.push(result);
+                }
+              }
+            }
+            console.log(map);
+            return map;
+          }
+
+          const data = window.BENCHMARK_DATA;
+
+          // Render header
+          document.getElementById('last-update').textContent = new Date(data.lastUpdate).toString();
+          const repoLink = document.getElementById('repository-link');
+          repoLink.href = data.repoUrl;
+          repoLink.textContent = data.repoUrl;
+
+          // Render footer
+          document.getElementById('dl-button').onclick = () => {
+            const dataUrl = 'data:,' + JSON.stringify(data, null, 2);
+            const a = document.createElement('a');
+            a.href = dataUrl;
+            a.download = 'benchmark_data.json';
+            a.click();
+          };
+
+          // Prepare data points for charts
+          return Object.keys(data.entries).map(name => ({
+            name,
+            dataSet: collectBenchesPerTestCase(data.entries[name]),
+          }));
+        }
+
+        function renderAllChars(dataSets) {
+
+          function renderGraph(parent, name, dataset) {
+            const nameElem = document.createElement('h1');
+            nameElem.className = 'benchmark-sub-title';
+            nameElem.textContent = name;
+            parent.appendChild(nameElem);
+
+            const canvas = document.createElement('canvas');
+            canvas.className = 'benchmark-chart';
+            parent.appendChild(canvas);
+
+
+            const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_'];
+            const data = {
+              // labels: Object.keys(dataset).map(d => d.commit.id.slice(0, 7)),
+              labels: dataset.values().next().value.map(d => d.commit.id.slice(0, 7)),
+              datasets: Array.from(dataset).map(([key, value], index) => ({
+                label: key,
+                data: value.map(d => d.bench.value),
+                borderColor: benchColors[index % benchColors.length],
+                backgroundColor: benchColors[index % benchColors.length] + '60', // 使用myColors数组循环为每个数据集分配颜色
+              }))
+            };
+
+            const options = {
+              scales: {
+                xAxes: [
+                  {
+                    scaleLabel: {
+                      display: true,
+                      labelString: 'commit',
+                    },
+                  }
+                ],
+                yAxes: [
+                  {
+                    scaleLabel: {
+                      display: true,
+                      labelString: dataset.values().next().value.length > 0 ? dataset.values().next().value[0].bench.unit : '',
+                    },
+                    ticks: {
+                      beginAtZero: true,
+                    }
+                  }
+                ],
+              },
+              tooltips: {
+                callbacks: {
+                  afterTitle: items => {
+                    const data = Array.from(dataset)[items[0].datasetIndex][1][items[0].index];
+                    return '\n' + data.commit.message + '\n\n' + data.commit.timestamp + ' committed by @' + data.commit.committer.username + '\n';
+                  },
+                  label: item => {
+                    let label = item.value;
+                    const { range, unit } = Array.from(dataset)[item.datasetIndex][1][item.index].bench;
+                    label += ' ' + unit;
+                    if (range) {
+                      label += ' (' + range + ')';
+                    }
+                    return label;
+                  },
+                  afterLabel: item => {
+                    const { extra } = Array.from(dataset)[item.datasetIndex][1][item.index].bench;
+                    return extra ? '\n' + extra : '';
+                  }
+                }
+              },
+              onClick: (_mouseEvent, activeElems) => {
+                if (activeElems.length === 0) {
+                  return;
+                }
+                // XXX: Undocumented. How can we know the index?
+                const url = Array.from(dataset)[activeElems[0]._datasetIndex][1][activeElems[0]._index].commit.url;
+                window.open(url, '_blank');
+              },
+            };
+
+            new Chart(canvas, {
+              type: 'line',
+              data,
+              options,
+            });
+          }
+
+          function renderBenchSet(name, benchSet, main) {
+            const setElem = document.createElement('div');
+            setElem.className = 'benchmark-set';
+            main.appendChild(setElem);
+
+            const nameElem = document.createElement('h1');
+            nameElem.className = 'benchmark-title';
+            nameElem.textContent = name;
+            setElem.appendChild(nameElem);
+
+            const graphsElem = document.createElement('div');
+            graphsElem.className = 'benchmark-graphs';
+            setElem.appendChild(graphsElem);
+
+            // for (const [benchName, benches] of benchSet.entries()) {
+            //   renderGraph(graphsElem, benchName, benches)
+            // }
+
+            const groupedBenchSet = new Map();
+
+            for (const [benchName, benches] of benchSet.entries()) {
+              const lastUnderscoreIndex = benchName.lastIndexOf("_");
+              const groupKey = benchName.substring(0, lastUnderscoreIndex);
+              const subKey = benchName.substring(lastUnderscoreIndex + 1);
+
+              if (!groupedBenchSet.has(groupKey)) {
+                groupedBenchSet.set(groupKey, new Map());
+              }
+
+              groupedBenchSet.get(groupKey).set(subKey, benches);
+            }
+
+            for (const [groupKey, subBenchSet] of groupedBenchSet.entries()) {
+              renderGraph(graphsElem, groupKey, subBenchSet);
+            }
+          }
+
+          const main = document.getElementById('main');
+          for (const {name, dataSet} of dataSets) {
+            renderBenchSet(name, dataSet, main);
+          }
+        }
+
+        renderAllChars(init()); // Start
+      })();
+    </script>
+  </body>
+</html>
+
