Webブラウザの仕組み

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

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

こんにちは!フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「なんだかこのボタン、クリックしても反応するまでにワンテンポ遅れるな…」「スマホでスクロールすると、カクカクして気持ち悪いな…」と感じたこ...
Webブラウザの仕組み

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

こんにちは!フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Web制作やプログラミングを学び始めると、次のような壁にぶつかりませんか?「JavaScriptでアニメーションを作ってみたけれど、なんだかカクカクする…」「`se...
Webブラウザの仕組み

【入門編】 ペイントフラッシングとレンダリングデバッグ – Webブラウザの仕組み実践ガイド

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

【入門編】 CSS Houdiniがレンダリングパイプラインに与える影響 – Webブラウザの仕組み実践ガイド

こんにちは!Webブラウザの裏側の世界へようこそ。世界最高峰のフロントエンド・アーキテクトを自負する私ですが、今回は難解な仕様書の言葉をいったん脇に置いて、皆さんと一緒に「CSS Houdini(フウディーニ)」という魔法のような技術の世界...
Webブラウザの仕組み

【入門編】 Shadow DOMがレンダリングに与える影響 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を長年歩んできた私ですが、Webブラウザという巨大で謎めいたエンジンの内部を覗き見るとき、今でもワクワクが止まりません。今回は、Web制作を少し進めると耳にする「Shadow DOM(シャドウ・ドム)」という...
Webブラウザの仕組み

【入門編】 JavaScriptの実行タイミング制御(defer, async, type=module) – Webブラウザの仕組み実践ガイド

こんにちは!Web制作やJavaScriptの勉強、毎日お疲れ様です。画面に文字や画像を表示させるためにHTMLを書いて、動きをつけるためにJavaScriptを読み込ませる……。最初は「よし、動いた!」と感動するのですが、少し慣れてくると...
Webブラウザの仕組み

【入門編】 ドキュメント読み込み状態とイベント – Webブラウザの仕組み実践ガイド

こんにちは!Webブラウザの仕組みの旅へようこそ。世界最高峰のフロントエンド・アーキテクチャの世界を覗くなんて聞くと、何やら難解な暗号や、見たこともないような複雑なコードが飛び交う世界を想像してしまうかもしれませんね。でも、どうぞ安心してく...
Webブラウザの仕組み

【入門編】 ロングタスク(Long Tasks)とレンダリングの競合 – Webブラウザの仕組み実践ガイド

こんにちは!フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。Webサイトを作っていて、「なんだかスマホでスクロールするとカクカクするな……」「ボタンを押してから画面が変わるまでに、ほんの一瞬だけ引っかかりを感じるな……」とモ...
Webブラウザの仕組み

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

こんにちは!Webブラウザの奥深い世界へようこそ。フロントエンドの現場を長年歩んできた私ですが、ブラウザという小さな宇宙の中で日々繰り広げられているドラマは、いつ見ても本当にエキサイティングです。今回は、近年のWebパフォーマンス界隈で最も...
Webブラウザの仕組み

【入門編】 ネイティブLazy Loadingとレンダリング – Webブラウザの仕組み実践ガイド

こんにちは!Web制作やフロントエンドの世界へようこそ。日々、素敵なホームページやWebアプリを作っていると、避けて通れないのが「表示スピード(パフォーマンス)」の悩みですよね。「画像をたくさん載せたら、ページが重くなってしまった……」「ス...
スポンサーリンク