Webブラウザの仕組み

スポンサーリンク
Webブラウザの仕組み

【入門編】 レイアウトシフト(CLS)の発生メカニズム – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを見ているとき、スマホの画面をスクロールしようとした瞬間、急に広告や画像がスポッと割り込んできて、「うわっ、読もうとしていた記事が下に押しやられた!」 ...
Webブラウザの仕組み

【入門編】 containプロパティによるレンダリングの分離 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。Webサイトを作っていると、最初はサクサク動いていたのに、JavaScriptでDOMをゴリゴリ書き換えたり、アニメーションを派手に動かしたりした途端、「カクカクし...
Webブラウザの仕組み

【入門編】 メインスレッドのブロッキング防止 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクつく」「ボタンを押してから画面が切り替わるまでに一瞬フリーズする」……そんな謎のプチストレスに直面し...
Webブラウザの仕組み

【入門編】 ペイント(Paint)とコンポジット(Composite)のプロセス – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「アニメーションがモタつく……」なんて壁にぶつかったことはありませんか?「コードは綺...
Webブラウザの仕組み

【入門編】 レイアウト(Reflow)の発生要因と回避策 – Webブラウザの仕組み実践ガイド

こんにちは!Web制作やフロントエンドの世界へようこそ。HTMLやCSSを書き始めて、「よし、動いた!」と画面を表示させた瞬間って、本当にワクワクしますよね。でも、少し慣れてくるとこんな疑問が湧いてきませんか?「JavaScriptで要素の...
Webブラウザの仕組み

【入門編】 ブラウザのキャッシュ戦略とレンダリングへの影響 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「よし、コードを書いたぞ!」と公開したのに、いざブラウザでリロードしてみたら……「あれ? さっき直したはずのデザインが反映されてない!?」...
Webブラウザの仕組み

【入門編】 レンダリングブロックリソース(CSS/JS)の最適化 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの世界へようこそ。チーフアーキテクトの私です。Webサイトを作っていて、「あれ、なんか画面が表示されるまでに一瞬真っ白な時間ができるな…」って気になったこと、ありませんか? 読者があなたのサイトにアクセスしたとき、...
Webブラウザの仕組み

【入門編】 リソース優先度(Priority Hints)の制御 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を長年歩んできた者です。Webブラウザって、私たちが普段何気なく開いている画面の裏側で、実はものすごいスピードで「何から先に片付けようか?」と大忙しで判断を下しているんです。今回は、そんなブラウザの頭の中をち...
Webブラウザの仕組み

【入門編】 ブラウザのプリロードスキャナ(Preload Scanner)の仕組み – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンド・アーキテクトの私です。Webサイトを作っていて、「なんだか表示が遅いな……」と頭を抱えた経験はありませんか? 画像やスタイルシートが読み込まれるのを、ブラウザがなんだかボーッと待っているように見えるあの瞬間。もど...
Webブラウザの仕組み

【入門編】 リフロー(再レイアウト)を発生させるプロパティ一覧 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンド・アーキテクチャの現場を長年歩んできた者です。Web制作を学び始めると、「画面がカクカクする」「スマホでスクロールすると妙に重い」という、言い知れぬパフォーマンスの壁にぶつかりますよね。その原因の多くは、今回取り上...
スポンサーリンク