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

2019年8月19日

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

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

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

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

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

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

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

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 リクエストを１個削減できるので、この方が無駄がないはず。

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

スマホのスクロール関連

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

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

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

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

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

• Luxeritas 公式ページ
• ダウンロードページ

改訂履歴

機能拡張

最適化

不具合修正

その他