こちらの Chrome 拡張ですが、
jQuery のセレクタで無駄に引き直しているところがあったのでそこを修正しました。また、Plus for Trello 拡張を意識して、複数のハッシュタグがある場合に先頭のものを使用するようにしました。
詳しくはこちらの GitHub で。
セレクタの性能改善については、一回 .list-card-title
で個々のカードを引きにいった後、そこで取得した shortID でもう一回 .list-card-details
で色塗りする親をセレクタで引いていたのが性能劣化を起こしていたので parent()
で済ませるようにしました。
実行速度的には timer1 をセレクタで引き直すもの、timer2 を parent() で引くものとしたとき
coloredhashtag.js:95 timer1: 15.673ms coloredhashtag.js:101 timer2: 0.042ms coloredhashtag.js:89 ---- coloredhashtag.js:95 timer1: 14.759ms coloredhashtag.js:101 timer2: 0.028ms coloredhashtag.js:89 ---- coloredhashtag.js:95 timer1: 17.747ms coloredhashtag.js:101 timer2: 0.027ms coloredhashtag.js:89 ---- coloredhashtag.js:95 timer1: 13.844ms coloredhashtag.js:101 timer2: 0.028ms coloredhashtag.js:89 ---- coloredhashtag.js:95 timer1: 12.155ms coloredhashtag.js:101 timer2: 0.029ms coloredhashtag.js:89 ---- coloredhashtag.js:95 timer1: 13.309ms coloredhashtag.js:101 timer2: 0.028ms coloredhashtag.js:89 ---- coloredhashtag.js:95 timer1: 12.999ms coloredhashtag.js:101 timer2: 0.027ms
という感じでカード一つの処理あたり 10 - 20 ms 程度の性能改善が見込まれます。今回実行速度も測ってみて、クラス名で引きにいくのはコストかかる処理だということを再認識しました。