[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

1141users がブックマーク コメント 43

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

ブラウザレンダリングの仕組み

1141 users zenn.dev/ak

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント43件

  • 注目コメント
  • 新着コメント
Keisuke69
いつかブラウザを作ってみたいと思ってたがなかなか大変そうだな。これ書いた方って社会人2年目なの...?すご

その他
aox
Faxとどう違うんですかね

その他
NOV1975
これ、みんなのリクエストしている話とズレてる気もするが.../それはともかく、最初のバイナリとテキストの話は不要では?(文字コードはともかく、いわゆる「バイナリデータ」ではないので。)

その他
helldeath
こんなにブクマついてるのにブコメへの星の少なさが珍しい。797ブクマでトップが星5個。

その他
xlc
みんな「知識系」のコンテンツが好きだねえ。ある程度の技術力があるエンジニアなら調べなくても「きっとそうに違いない」となんとなく理解している内容。そして知識ではなく仕事に生かしてる。

その他
wazpk6no
tridentとgeckoとblinkの違いを期待してた...

その他
ext3
byteからcharへの変換を指定するcontent-typeの指定もテキストで記載されているとなると、ヘッダー受け取る前から何かしらのbyte-char変換指定が必要になると思うが、果たして最初のbyteはどうやって変換されてるんだろうか

その他
furuichi
DOMの解説も後ろでしているので、冒頭部分でいきなり"DOM"と書いてある部分は「解説は後段」的な注釈いれてあると、対象読者を考えるともっとわかりやすくなると思います。

その他
kmaebashi
例によってインタプリタの説明が微妙。「1行ずつ機械語に翻訳」とは直接は書いてないが、構文解釈(構文解析?)だって、ループの中で何度もするわけじゃない。

その他
frkw2004
スマホ用のブラウザ作る時は、読み込んでいる途中のストリームとレンダリング作業とを上手く最適化して、低速通信時でもストレスなく表示+操作できるといいなあ。処理レイヤーが違うけど。

その他
eleven-soul
htnl

その他
cartman0
zennのコメントが酷い。間違ってると言うなら正確な記事書いてくれればいいのに。まとまってる資料他にそうそうないやろ

その他
ryuichi1208
何回読んでも覚えられない。。

その他
tohima
おもしろかったー

その他
nokazn
簡単なレンダリングエンジンそのうち作ってみたい

その他
Cru
未加工のバイトから人間が読める文字に変換ってとこで読むのやめた。base64からASCIIに変換?gzip解凍?https復号?いずれ加工されまくってるバイナリって事になるしなぁしなぁ

その他
kibitaki
おっ?最近じゃあレンダリングの話なんて珍しいねぇ。よおしおじちゃんがさぼるレンダラに蹴り入れるにはとかお手軽メモリリークとかテーブルネストとかの話を・・・って違うの?あ、そう。

その他
ustam
まあ基本ではあるよね。わかってないと、この先の地獄のような複雑さには対応できない。

その他
kareki11
わかりやすい

その他
pqe
ノードとは何でしょうか?

その他
nmcli
HTMLが顔、CSSが化粧、DOMは骨格と筋肉、それをScriptで美容整形するようなイメージが2010年代までは通用したが、今はもうこれでは説明不足になってきてしまったの

その他
wazpk6no
wazpk6no tridentとgeckoとblinkの違いを期待してた...

2021年05月07日 リンク

その他
ext3
ext3 byteからcharへの変換を指定するcontent-typeの指定もテキストで記載されているとなると、ヘッダー受け取る前から何かしらのbyte-char変換指定が必要になると思うが、果たして最初のbyteはどうやって変換されてるんだろうか

2021年05月07日 リンク

その他
helldeath
helldeath こんなにブクマついてるのにブコメへの星の少なさが珍しい。797ブクマでトップが星5個。

2021年05月07日 リンク

その他
xlc
xlc みんな「知識系」のコンテンツが好きだねえ。ある程度の技術力があるエンジニアなら調べなくても「きっとそうに違いない」となんとなく理解している内容。そして知識ではなく仕事に生かしてる。

2021年05月07日 リンク

その他
frkw2004
frkw2004 スマホ用のブラウザ作る時は、読み込んでいる途中のストリームとレンダリング作業とを上手く最適化して、低速通信時でもストレスなく表示+操作できるといいなあ。処理レイヤーが違うけど。

2021年05月07日 リンク

その他
cantaloupe
レンダリング 学習 素材

その他
rryu
HTMLのトークンって < や </ じゃないのと思ったらHTMLのパースは巨大なステートマシンで区切りのいいところで結果をトークンとして置いていくという仕組みでやるらしい。

その他
Nobkz
読んでるけど、ざっと、なんかいろいろ、混乱してそうだなー。例えば、"HTMLファイルは、「0」と「1」でできたデータになっています"、いやまぁ、そうなんだけどさ...

その他
furuichi
furuichi DOMの解説も後ろでしているので、冒頭部分でいきなり"DOM"と書いてある部分は「解説は後段」的な注釈いれてあると、対象読者を考えるともっとわかりやすくなると思います。

2021年05月07日 リンク

その他
aquarickn
色使いとか最初の説明の順番とか最高やないか

その他
gyochan
時間経過とそれがいつ起こるかのタイムライン(WBSちっくなヤツ)があるとありがたいなー(要求)defer属性、async属性、むにゃむにゃ...

その他
yoiIT
分かりやすい

その他
yarumato
"HTMLの解析 BytesからCharactersに変換 Tokensに変換 (DOM)Nodesに変換 DOMの構築 CSSの解析 CSSOMの構築"

その他
Shinwiki
ぷにるとかLunascapeとかあんドーナツもこうなの?

その他
kiriyoke
ブラウザの仕組みは知らなかったのでありがたい記事だった

その他
arebouya
エンジニア時代に知りたかった。業務では直接使わない知識だったけど、あれば絶対一読してた。

その他
remix-cafe
メモ

その他
mitsuok-33
大学の講義レベルの内容が詰まった良記事。直接仕事に生きることではないんだけどね。

その他
modal_soul
ハイパフォーマンスブラウザネットワーキングのブラウザ寄りの話って感じ。リクエストからコンテンツ取得するまでのところも面白いよね

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「ブラウザレンダリ...」が注目されています。

気持ちをシェアしよう

ツイートする

ブラウザレンダリングの仕組み

Webの用語を100秒で解説するチャンネルを作りました! よかったらチェックしてみてください! はじめに ... Webの用語を100秒で解説するチャンネルを作りました! よかったらチェックしてみてください! はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか?」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステップにな

ブックマークしたユーザー

  • isudzumi2025年05月31日 isudzumi
  • fivestech2024年03月01日 fivestech
  • appup2023年07月18日 appup
  • simomm2023年06月20日 simomm
  • tanaka_shi2023年06月11日 tanaka_shi
  • minorusato2023年06月11日 minorusato
  • eleven-soul2023年06月10日 eleven-soul
  • pere_ponta2023年04月12日 pere_ponta
  • montdsichel2023年03月23日 montdsichel
  • bomberkiddy2023年02月06日 bomberkiddy
  • bono_gpgr2022年11月25日 bono_gpgr
  • techtech05212022年10月02日 techtech0521
  • t4332022年07月26日 t433
  • cartman02022年02月21日 cartman0
  • hondasatoru2022年02月10日 hondasatoru
  • tsu4420002022年02月10日 tsu442000
  • fshuto2021年12月27日 fshuto
  • matsukaz2021年12月23日 matsukaz
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /