検索はajaxで。
digitank.org
構成
$ ll 合計 3212284 -rw-r--r-- 1 lmtak lmtak 148337 5月 8 17:04 2022 actbl.js -rw-rw-r-- 1 lmtak lmtak 10901 5月 10 21:54 2022 index.html -rw-r--r-- 1 lmtak lmtak 26391552 5月 10 17:14 2022 notes-1.db -rw-r--r-- 1 lmtak lmtak 304673792 5月 10 17:15 2022 notes-2.db -rw-r--r-- 1 lmtak lmtak 359410688 5月 10 17:16 2022 notes-3.db -rw-r--r-- 1 lmtak lmtak 413247488 5月 10 17:17 2022 notes-4.db -rw-r--r-- 1 lmtak lmtak 468364288 5月 10 17:20 2022 notes-5.db -rw-r--r-- 1 lmtak lmtak 520237056 5月 10 17:23 2022 notes-6.db -rw-r--r-- 1 lmtak lmtak 571278336 5月 10 17:26 2022 notes-7.db -rw-r--r-- 1 lmtak lmtak 625399808 5月 10 17:30 2022 notes-8.db -rw-rw-r-- 1 lmtak lmtak 1624 5月 10 18:54 2022 searcher.php -rw-r--r-- 1 lmtak lmtak 171921 5月 8 17:03 2022 titletbl.js
index.html から、ajax で searcher.php に検索クエリを投げて、応答を展開している。
展開の途中で、楽曲ID からバージョン番号や難易度値を取得するために、actbl.js や titletbl.js の複製を読み込んでいる。
また、textage.cc/score へのリンクでは（楽曲全体ではなく）当該部分の前後あわせて 4 小節分を表示範囲とするように、クエリ・ストリングを構築する。
画面表示時間
検索キーワードを1 1 1 1 1 1 1 1にすると、画面のレンダリングに体感 3 秒くらいかかっている。F12 Dev Tools で通信状況をみると、
ajax の非同期通信は往復で 0.4 秒程度で、そこからレンダリングに 2 秒以上かかっているんだなぁ
Waiting (TTFB) 169.00 ms は、searcher.php がリクエストパラメータを解釈して、SQL 文を構築し、notes-8.db からの検索結果を JSON で構築するまでの所要時間で、
Content Download 140.34 ms が、digitank.org サーバから応答 JSON の全文受信するまでの所要時間といえる。
TTFB = Time To First Byte : 応答の 1 バイト目を受信するまでの時間
element.innerHTML = '<h3>' + li_list.length + ' hits.</h3><ol>' + li_list.join(' ') + '</ol>';
li_list配列に li 要素を 6000 項目くらい詰め込んで、それをjoin()しているのが 2 秒かかって原因か。
element.innerHTML = '<h3>' + li_list.length + ' hits.</h3><ol>' + li_list.slice(0, 100).join(' ') + '</ol>'; if (li_list.length > 100) { setTimeout(function(E, L){E.innerHTML = '<h3>' + L.length + ' hits.</h3><ol>' + L.join(' ') + '</ol>'}, 1000, element, li_list); }
いったん 100 件だけレンダリングして、1 秒後に全件の再描画をさせるような処理にすると、体感 1 秒未満で初期表示されてストレス減ったかも。
いろいろなバグフィックス
- substream は、titletbl.js 内では
35という特別な値で扱われているが、URL は"/s/"なので置換する。 - LEGGENDARIA だけは、URL のクエリ・ストリングが
'L'ではなく'X'なので置換する。
