30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

パフォーマンス

ブラウザのレンダリングとスタイルシートについて

スタイルシートのダウンロードや実行が終わるまで、ブラウザはレンダリングをブロックする。 そのため、スタイルシートの配信やダウンロードを最適化することは、ウェブサイトのパフォーマンス向上につながる。 この記事では、スタイルシートのダウンロード…

requestIdleCallback を使って優先度の低い処理を後回しにする

ブラウザ内部で行われる処理は、基本的にシングルスレッドで行われる。 そのため、処理に時間がかかるタスクがひとつあると、後続のタスクの処理がその分だけ遅れることになる。 この「タスク」には、JavaScript の実行も含まれるし、画面の描画、ユーザーの…

テキストリソースを圧縮してウェブサイトのパフォーマンスを改善する

ウェブサーバが配信するリソースのサイズは、ウェブサイトのパフォーマンスを左右する重要な要素。 画像や動画を最適化するのと同様に、テキストリソースのファイルサイズも削減することで、パフォーマンスによい影響を与える。 圧縮したテキストリソースを…

ブラウザによるキャッシュの仕組み

ウェブサーバは、キャッシュに関する情報をレスポンスヘッダに含めることで、そのレスポンスで返したリソースをどのようにキャッシュすべきかをウェブクライアントに指示することができる。ウェブクライアントはその指示に基づいた処理を行う。 この記事では…

ブラウザにおける ES Modules の利用とパフォーマンスについて

現代の主要なブラウザでは、ES Modules(以下、ESM)を利用することができる。 つまり、import文やexport文を使った JavaScript ファイルを、トランスパイルすることなくそのまま使えるということである。 モジュールシステムをそのまま使えるので、複数のフ…

script タグの書き方でウェブベージの表示速度やスクリプトの実行順序はどう変化するのか

ウェブベージで JavaScript ファイルを読み込むためには<script>タグを使うが、その際にasync属性やdefer属性を設定することができる。 そして、これらの属性を使うかどうかで、ウェブベージの表示速度や JavaScript ファイルの実行順序に違いが生まれる。 この記事…

『ハイパフォーマンス ブラウザネットワーキング』を読んだ

ウェブに関するネットワーク技術について網羅的に扱った書籍。 TCP や UDP のようなトランスポートプロトコルの話から、WebSocket や WebRTC のようなブラウザで使える API まで、幅広く扱っている。 www.oreilly.co.jp 読書メモは Gist に置いた。 『ハイパ…

React (+ Redux) アプリの state 更新に関するパフォーマンス戦略

コンポーネントの再レンダリングを適切に抑制していくことが、React アプリのパフォーマンス改善の基本。 コンポーネントの再レンダリングが発生する要因はいくつかあるが、「親の再レンダリングによって発生する子の再レンダリング」については、以下の記事…

React.memo を使ったパフォーマンス最適化について

パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばい…