ブラウザ × レンダリング

ブラウザ

ブラウザ

 状態:学習中  閲覧数:2,644  投稿日:2015-09-17  更新日:2015-09-18
主な機能
・「ユーザーが選択したウェブ リソースをサーバーへ要求してブラウザ ウィンドウに表示すること」 → ユーザーへ情報提示

ブラウザによる HTML ファイルの解釈方法と表示方法
・HTML と CSS の仕様で規定

仕様
・ウェブに関する標準化団体「W3C(World Wide Web Consortium)」が管理


ブラウザの上位構造


ブラウザの主な構成要素
日本語表記 英語表記 内容
3 レンダリング エンジン Rendering engine 要求されたコンテンツの画面表示を担当。例えば、要求されたコンテンツが HTML の場合は、HTML と CSS を解析し、解析されたコンテンツを画面に表示。Blink、WebKit、Gecko、Tridentなど
2 ブラウザ エンジン Browser engine UI とレンダリング エンジンの間の処理を整理
1 ユーザーインターフェース User Interface アドレスバー、戻る/進むボタン、ブックマーク メニューなど。ブラウザ画面のうち、要求したページが表示されるメイン ウィンドウを除くすべての部分


処理フロー

 閲覧数:459 投稿日:2015-09-18 更新日:2015-09-20

1.コンテンツをネットワーキング レイヤから取得


レンダリング エンジンが、「要求したドキュメントのコンテンツ」をネットワーキング レイヤから取得


2.HTML Parser → DOM Tree


レンダリング エンジンは、 HTML ドキュメントを解析して DOM Tree へ変換
・タグを「コンテンツ ツリー」というツリー内の DOM ノード(DOM Tree)に変換

HTML パーサーの役割
・HTML マークアップを解析して解析ツリーを作成すること

DOM とは?
・「Document Object Model」の略
・HTML ドキュメントや、HTML 要素と JavaScript などの外部世界とのインターフェースをオブジェクトで表現したもの

DOM の仕様は?
・HTML と同様に、標準化団体 W3C が策定
ドキュメントの操作に関する全般的な仕様
HTML の定義

生成される DOM Tree とは?
・解析ツリー
・「DOM 要素と属性のノード」のツリー
・ツリーのルートは「Document」オブジェクト


3.CSS Parser → Style Rules




4.Render Tree = DOM Tree + Style Rules


色や寸法などの視覚的な属性を持つ矩形を含む
・矩形は、画面に表示される正しい順序で並んでいる


5.Render Tree → 各ノード描画


5-1.「レイアウト」処理
・画面に表示される正確な座標が各ノードに割り当てられる

5-2.「描画」処理
・レンダー ツリーが走査され、UI バックエンド レイヤを使用して各ノードが描画される






August 5th, 2011
How Browsers Work: Behind the scenes of modern web browsers
・和訳A.ブラウザのしくみ: 最新ウェブブラウザの内部構造
・和訳B.How Browsers Work - Behind the Scenes of Modern Web Browsers — Translation of "How Browsers Work" 0.1 documentation
・和訳C.ブラウザってどうやって動いてるの?(モダンWEBブラウザシーンの裏側)




コンソールエラー / ブラウザ間差異

コピペ出来ないWebページをコピペ出来るようにするためには? 2017年



週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード / 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game / オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 4
7 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました / この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 / ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 / 表色系 / 顕色系 / 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新