Ferrit Explore
中文·繁體·EN·日本語 Sign in Register
cielxl / veld / report / perf-chart.html
<!DOCTYPE html><html><head><meta charset="utf-8"><style>
  :root{--rust:#C2410C;--nginx:#059669;--ink:#0F172A;--muted:#64748B;--line:#E2E8F0;--bg:#F8FAFC;--win:#047857;--loss:#B91C1C;}
  *{box-sizing:border-box;margin:0;padding:0;}
  html{-webkit-print-color-adjust:exact;}
  body{width:1140px;font-family:"Segoe UI",-apple-system,"Helvetica Neue",sans-serif;color:var(--ink);background:#fff;padding:26px 30px;}
  .head{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:3px solid var(--rust);padding-bottom:12px;margin-bottom:6px;}
  h1{font-size:23px;letter-spacing:-.3px;} h1 .o{color:var(--rust);} h1 .g{color:var(--nginx);}
  .sub{font-size:12.5px;color:var(--muted);margin-top:3px;}
  .legend{font-size:12px;color:var(--muted);text-align:right;line-height:1.7;}
  .legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin:0 5px 0 12px;vertical-align:-1px;}
  .sr{background:var(--rust);} .sn{background:var(--nginx);}
  .chart{margin-top:14px;}
  .row{display:grid;grid-template-columns:148px 1fr 96px;align-items:center;gap:14px;padding:7px 0;}
  .name{font-size:13px;font-weight:700;} .name small{display:block;font-weight:400;font-size:11px;color:var(--muted);}
  .bars{display:flex;flex-direction:column;gap:5px;}
  .bar{position:relative;height:18px;background:var(--bg);border-radius:5px;}
  .fill{height:100%;border-radius:5px;}
  .fr{background:linear-gradient(90deg,#EA580C,#C2410C);} .fn{background:linear-gradient(90deg,#10B981,#059669);}
  .val{position:absolute;right:9px;top:0;height:18px;line-height:18px;font:700 11.5px/18px "SF Mono",Consolas,monospace;color:#0f172a;}
  .d{text-align:right;font:800 15px/1 "Segoe UI";} .d.win{color:var(--win);} .d.loss{color:var(--loss);}
  .foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:26px;font-size:12.5px;color:#334155;}
  .foot b{color:var(--rust);} .foot .lab{color:var(--muted);}
</style></head><body>
  <div class="head">
    <div><h1><span class="o">veld</span> &nbsp;vs&nbsp; <span class="g">nginx</span> — Throughput</h1>
      <div class="sub">requests/sec, higher is better · 8-core Ubuntu 22.04 · wrk · interleaved peak-of-5</div></div>
    <div class="legend"><div><i class="sn"></i>nginx 1.18</div><div><i class="sr"></i>veld</div></div>
  </div>
  <div class="chart">
    <div class="row"><div class="name">index 47B<small>concurrency 10</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:65%"></div><span class="val">6,390</span></div>
      <div class="bar"><div class="fill fr" style="width:100%"></div><span class="val">9,831</span></div></div><div class="d win">+54%</div></div>
    <div class="row"><div class="name">index 47B<small>concurrency 100</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:44%"></div><span class="val">11,967</span></div>
      <div class="bar"><div class="fill fr" style="width:100%"></div><span class="val">27,061</span></div></div><div class="d win">+126%</div></div>
    <div class="row"><div class="name">index 47B<small>concurrency 500</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:55%"></div><span class="val">15,218</span></div>
      <div class="bar"><div class="fill fr" style="width:100%"></div><span class="val">27,502</span></div></div><div class="d win">+81%</div></div>
    <div class="row"><div class="name">1 KB<small>concurrency 100</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:53%"></div><span class="val">12,589</span></div>
      <div class="bar"><div class="fill fr" style="width:100%"></div><span class="val">23,977</span></div></div><div class="d win">+90%</div></div>
    <div class="row"><div class="name">10 KB<small>concurrency 100</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:97%"></div><span class="val">13,467</span></div>
      <div class="bar"><div class="fill fr" style="width:100%"></div><span class="val">13,936</span></div></div><div class="d win">+3%</div></div>
    <div class="row"><div class="name">100 KB<small>concurrency 100</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:90%"></div><span class="val">8,446</span></div>
      <div class="bar"><div class="fill fr" style="width:100%"></div><span class="val">9,361</span></div></div><div class="d win">+11%</div></div>
    <div class="row"><div class="name">1.4 MB<small>concurrency 50</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:100%"></div><span class="val">1,336</span></div>
      <div class="bar"><div class="fill fr" style="width:84%"></div><span class="val">1,118</span></div></div><div class="d loss">−16%</div></div>
    <div class="row"><div class="name">1.4 MB<small>concurrency 100</small></div><div class="bars">
      <div class="bar"><div class="fill fn" style="width:100%"></div><span class="val">1,240</span></div>
      <div class="bar"><div class="fill fr" style="width:91%"></div><span class="val">1,127</span></div></div><div class="d loss">−9%</div></div>
  </div>
  <div class="foot">
    <div><span class="lab">Memory (RSS): </span><b>~6 MB</b> vs nginx 25 MB</div>
    <div><span class="lab">CPU / 1k req: </span><b>11.7</b> vs 25.8 &nbsp;(≈2.2× efficiency)</div>
    <div><span class="lab">p99 latency: </span><b>lower in all 8 scenarios</b></div>
  </div>
</body></html>