ごみばこいんの jQuery 依存をなくそうとした。 背景としては jQuery の読み込みに 30KB くらい使っていて、でも jQuery をそんなに大活用しているわけでもなくて。 じゃあいらんか、と。
zepto にすることも考えた。が、せっかくなのでまるっと消すことにした。 GitHub - madrobby/zepto: Zepto.js is a minimalist JavaScript library for modern browsers with a jQuery-compatible API
自分で書いていたやつから jQuery な記載を消していった。 $は document.querySelector とか document.querySelectorAll とかで。 XHR がちょっと面倒だなあ…とか思ったけど fetch API あるやん！で解決した、便利。
あとは Chrome の DevTool でコンソールで試しながら変数あるかなあとか見たりしながら書いてた。
画像の表示に使っていた lity という lightbox なライブラリが jQuery 依存していたので別のものに切り替える必要があった。
GitHub - jsor/lity: Lightweight accessible and responsive lightbox.
cdnjs を lightbox で探していたらよさそうなのがあった。 luminous という lightbox なライブラリで lity と容量もあまりかわらない（3KB くらい）っぽい。
GitHub - imgix/luminous: A simple lightweight no-dependencies JavaScript lightbox.
imgix 画像加工ができる CDN サービスをやっている会社が提供している lightbox なライブラリとのこと。
imgix • Real-time image processing and image CDN
余談にはなるが日本で同様のものだと ImageFlux が有名だろうか。むしろ画像 CDN でパラメータで扱うのはこれしかしらなかった。。 画像変換サービス ImageFlux｜さくらインターネット
あと jQuery に依存していたわけではないが Chrome の DevTool から Performance タブで Load イベントまでの様子を測ってみると Highlight.js がそこそこに時間を使っていてなんとかしたいなあと。
GitHub - highlightjs/highlight.js: Javascript syntax highlighter
これまたいくつか調べてみると prism なるものが見つかった。 テーマを切り替えることもできるし、様々な言語のハイライトに対応しているし、プラグインで拡張できるし、でっかいハイライトするなら WebWorker を使っての asyncRender も有効に使えそうな感じがする。
GitHub - PrismJS/prism: Lightweight robust elegant syntax highlighting.
実際にいれてみると、言語検出機能がないので、特に言語を指定せずにざっくり使っていた部分についてハイライトが効かなかった。のでそれっぽいものを自分でざっくり書いた WordPress で使うので、投稿についたタグの情報とか、コードの中身とかからざっくり判断でわりかし十分。多分間違っていても、そんなに気にならない。
そのほか、処理順を入れ替えたり、遅いやつをもっと遅延させて影響なくしたり requestAnimationFrame を使ってみるなどした。 変更する前と比べて、表示されるまでがだいぶ早くなった、と思う。（主観）