Javascript の負荷軽減と高速化。不具合修正など Luxeritas 3.6.12

Luxeritas 3.6.12 をリリースし申した。

機能追加なし(要望のあったシンタックスハイライトの言語だけ追加した)。見た目も特に何も変わってない。

なので、バージョン番号はリビジョンアップになってるけど、内部的にはマイナーアップデート相当の大きな変更が加わってます。

不具合関連は報告のあったものと自分で気づいたものと含めて、結構たくさん修正した気がする。

ちなみにファイルサイズが馬鹿デカくなってるけど、内蔵版の FontAwesome を更新したからですw。デフォルト設定では、CDN に設定されてるので内蔵版とかほとんど意味ないんだけどねぇ・・・

変更されてる部分のちょっとした解説

内部処理に関する話なので、読まなくていいよw

Vanilla JS 化の促進

jQuery に依存してる部分を以前よりも更に減らした。

特に、グローバルナビ・モバイルナビの開閉等に関する動作は完全な純 Javascript(Vanilla JS)化したので、jQuery 読み込まなくても動くようになった。

というか、ライブラリを使用してるもの以外の Luxeritas オリジナルのスクリプト類のほぼ全体は Vanilla JS 化した。

スクロールイベントの負荷軽減

Javascript で特にクライアント側の負荷が高いスクロールイベントとリサイズイベントに requestAnimationFrame を挟んで負荷減らした(つもり)。

Luxeritas 2.x 系の頃は setInterval で負荷を減らしてたけど、ラグが酷いので 3.x 系から外した。 requestAnimationFrame だとラグがほとんどないので採用。

2つに分けてた Javascript を1個に結合

Javascript は大きく async 用と defer 用 に分けてたけど、defer 用のスクリプトも async で読み込んじゃって document.readyState の値を見てから実行するかどうか決めるようにした。

なので、これまで 2 つに分けてた Javascript のファイルを 1 個にして、基本的に async で読み込むようにした。HTTP リクエストを1個削減できるので、この方が無駄がないはず。

実行タイミングも、これまで以上に詳細に分けて最適化した(つもり)。

スマホのスクロール関連

グローバルナビを「上スクロールの時だけ表示」に設定して、スマホで上スクロールすると、一瞬ナビが表示されてすぐ消えるという現象が発生しちゃってた。

原因は、アドレスバーが表示される瞬間に画面サイズが変わるため、スクロールとは別のリサイズイベントが発火。これによってスクロール位置を保持してる Class 等が全部リセットされてた。

リサイズイベントの中身を変更して修正しました。

その他にも細か~い不具合修正とかいっぱいありますw

細かい部分の詳細は下記の改訂履歴のとおりでござる。

改訂履歴

機能拡張

  1. ブロックエディタのシンタックスハイライター選択言語に「PowerShell」「Nim」「Rust」「R」を追加(要望反映)

最適化

  1. ライブラリに依存してるもの以外の Javascript は全部 Vanilla JS 化した
  2. スクロールイベントとリサイズイベントの負荷を軽減した(つもり)
  3. async 用と defer 用に分けてた Javascript 1つにした
  4. Javascript の実行タイミングを更に詳細に分けて、最適と思われる実行タイミングにした(つもり)

不具合修正

  1. 目次ウィジェットで「項目が無いときはウィジェット非表示」にチェックを入れていると、ウィジェットタイトル及びウィジェットの枠そのものが表示されず目次リストだけ表示されてた不具合修正
  2. グローバルナビを「上スクロールの時だけ表示」に設定して、スマホで上スクロールすると、一瞬ナビが表示されてすぐ消えるという現象が発生する不具合修正
  3. 1カラムに設定してるとモバイルメニューの「Next」「Prev」「Search」ボタンが機能しなかった不具合修正
  4. オープニングアニメで「縦に伸張」か「横に伸張」を選択してると、Firefox でモバイルメニューのサイドバーがレイヤーの下に表示されちゃう不具合修正
  5. オープニングアニメ用の CSS が未圧縮のまま出力されてた不具合修正
  6. グローバルナビを非表示に設定してると、一部 Notice が出る箇所があったので修正

その他

  1. FontAwesome のバージョン上げた 5.5.0 → 5.10.1
  2. PrismJS のバージョン上げた 1.14.0 → 1.17.1

Luxeritas

Posted by るな