ブラウザレンダリング(解析:HTMLパース, DOM/CSSOMツリー構築)

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

【入門編】 HTMLパーサーの投機的パース(プリスキャン) – Webブラウザの仕組み実践ガイド

やあ、こんにちは。Webの深淵へようこそ。フロントエンドの世界へ足を踏み入れたばかりの君に、今日はブラウザが裏側でやっている「ちょっとズル賢い、でも最高に頭の良い仕事」について話をしよう。君が普段何気なく開いているWebサイト。実は、ブラウ...
Webブラウザの仕組み

【入門編】 ブラウザメインスレッドのアーキテクチャ – Webブラウザの仕組み実践ガイド

ブラウザという「魔法の箱」の裏側で、一体何が起きているのか。Web開発を始めたばかりの頃、誰もが一度は「なぜコードを書いた順番通りに動かないことがあるのか?」と首を傾げる瞬間があるはずです。今日は、ブラウザの心臓部である「メインスレッド」と...
Webブラウザの仕組み

【入門編】 コンポジットレイヤーとGPU合成の仕組み – Webブラウザの仕組み実践ガイド

やあ、こんにちは。Webの広大な海へようこそ。ブラウザの裏側で一体何が起きているのか。今日はその中でも、特に「画面がどうやって滑らかに動いているのか」という、ちょっと魔法のような仕組み、「コンポジットレイヤー」と「GPU合成」について話をし...
Webブラウザの仕組み

【入門編】 will-changeプロパティによるGPUアクセラレーション – Webブラウザの仕組み実践ガイド

こんにちは。Webブラウザという「魔法の箱」の裏側を覗きに来てくれてありがとうございます。普段何気なく見ているWebサイトですが、ブラウザは裏でとてつもない速さで「絵画の描き直し」を繰り返しています。今日は、その中でも特に「ここぞという時に...
Webブラウザの仕組み

【入門編】 Interaction to Next Paint (INP) の計測 – Webブラウザの仕組み実践ガイド

こんにちは。Webの世界へようこそ。ブラウザの深淵を覗く旅へようこそ。今日は、多くのWeb開発者が「なぜかサイトが重く感じる」と頭を抱える原因の一つ、「INP(Interaction to Next Paint)」について、少しだけお話しさ...
Webブラウザの仕組み

【入門編】 Layout Instability API (CLS) – Webブラウザの仕組み実践ガイド

こんにちは。Webという広大な海を渡る皆さんの船を、少しでも頑丈に、そして快適にするお手伝いをしているエンジニアです。今日は、皆さんがWebサイトを見ている時にふと感じる「あのイライラ」の正体と、それをブラウザがどう見張っているのかというお...
Webブラウザの仕組み

【入門編】 Paint Timing API (FCP/LCP) – Webブラウザの仕組み実践ガイド

こんにちは。Webという広大な世界へようこそ。ブラウザの裏側で何が起きているのか、気になり始めたあなたは、もう立派な「エンジニアの卵」です。今日は、Webサイトが画面に表示されるまでの「魔法のような瞬間」を、数字で捉えるPaint Timi...
Webブラウザの仕組み

【入門編】 requestAnimationFrameとレンダリングサイクルの同期 – Webブラウザの仕組み実践ガイド

こんにちは。ブラウザの深淵を覗き込み、日夜ピクセルと戯れているフロントエンド・アーキテクトです。Web制作を始めたばかりの頃、「あれ?JavaScriptでアニメーションを動かしているのに、なんかカクカクするな…」と悩んだことはありませんか...
Webブラウザの仕組み

【入門編】 レイアウトスラッシングの回避パターン – Webブラウザの仕組み実践ガイド

やあ、こんにちは。Webの広大な海へようこそ。フロントエンドという仕事をしていると、たまに「なぜか画面がカクつく」「スクロールが重い」という謎の現象にぶつかることがあるよね。実はそれ、ブラウザが裏側で必死に「計算のやり直し」をさせられている...
Webブラウザの仕組み

【入門編】 リソースヒント(preload, prefetch, preconnect) – Webブラウザの仕組み実践ガイド

やあ。ブラウザという名の「巨大な劇場」の裏方へようこそ。Webサイトを表示する時、ブラウザは実はものすごい速さで「舞台セット」を組み立てています。HTMLを読み込み、DOMという構造を作り、CSSで装飾して……。でもね、もし「お芝居が始まる...
スポンサーリンク