ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）

なぜWebサイトは「読み込み中」で止まるのか？「Critical CSS」でレンダリングを爆速にする方法こんにちは。Web開発の現場へようこそ！皆さんは、Webサイトを開いたときに「真っ白な画面が数秒続いて、いきなりパッと表示される」という...

Webブラウザは「超真面目な職人」！レンダリングブロックと仲良く付き合う方法こんにちは。Webの世界へようこそ。日々、私たちが何気なく開いているWebサイト。実はブラウザの中では、職人気質なレンダリングエンジンが、ものすごいスピードで「We...

やあ、こんにちは。Webの広大な海を渡る冒険へようこそ。ブラウザのレンダリング……この言葉を聞くだけで、なんだか小難しい図面や複雑なコードが頭をよぎって、少し身構えてしまうかもしれませんね。でも、大丈夫。あなたが今開いているその画面で起きて...

こんにちは。Webの深淵を歩くエンジニアの皆さん。ブラウザという名の「魔法の箱」が、どうやって皆さんの書いたコードを読み解き、画面に絵を描いているのか。今日は、その中でも特に「気が利く」技術であるLinkヘッダーによるリソースヒントについて...

こんにちは！Webブラウザという「魔法の箱」の裏側を覗いてみたいという好奇心、最高ですね。Webサイトを表示するとき、ブラウザは裏側でとんでもない量の仕事を、ほんの一瞬のうちにこなしています。皆さんがChromeの「Performanceタ...

やあ、こんにちは。Webブラウザという「魔法の箱」の裏側へようこそ。Webサイトを表示する時、私たちは当たり前のようにURLを入力してエンターキーを叩くけれど、ブラウザの中では実はものすごい速さで「冒険」が行われているんだ。今日は、その冒険...

やあ、こんにちは。Webの広大な海を渡る冒険へようこそ。ブラウザのレンダリング――つまり、サーバーから届いた「ただの文字の羅列」が、どうやって画面上でキラキラと輝くWebサイトに変わるのか。この魔法のような仕組みに興味を持ったなら、あなたは...

Webブラウザの「中身」の世界へようこそ。フロントエンドの迷宮を歩んでいると、時折こんな壁にぶつかりますよね。「大事な画像なのに、なぜか後回しで表示される……」。今日は、そんなもどかしさを解決する魔法の杖、`fetchpriority`（フ...

こんにちは。Webブラウザという「魔法の箱」の裏側を覗こうとしているあなた、ようこそ。多くの人はWebサイトを「ただ表示されるもの」だと思っています。でも、あなたは違いますよね。その裏でブラウザという職人が、どれほど汗をかいて画面を作り上げ...

「画面がカクつく…」その犯人は“レイヤーの作りすぎ”かもしれません。Webブラウザの裏側を覗いてみよう！こんにちは。Web開発の世界へようこそ。一生懸命作ったサイトをスマホでスクロールしたとき、「なんだか重いな」「カクカクするな」と感じたこ...