検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >いつ何が起こったのですか？ _html/css_WEB-ITnose

いつ何が起こったのですか？ _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 08:51:50983ブラウズ

いつ何が起こったのですか...?

このリポジトリは、古くからあるインタビューの質問に答えようとします。ブラウザに google.com と入力して Enter キーを押すとどうなりますか?

しかし、通常の回答に限定されることはなくなり、詳細を見逃すことなく、できるだけ具体的に回答するよう努めます。

これは共同プロセスとなるため、一緒に改善していきましょう。追加を待っている詳細がまだたくさんあります。お気軽にプル リクエストを送信してください。

このコンテンツは、クリエイティブ コモンズ Zero_ ライセンスに基づいてリリースされています。

コンテンツ

.. content:: :backlinks: none :local:

「g」キーを押します

次のコンテンツでは、物理キーボードの使い方を紹介しますシステムは作業を中断しますが、カバーされていない部分が 1 つあります。 「g」キーを押してブラウザがこのメッセージを受信すると、オートコンプリート メカニズムがトリガーされます。ブラウザーは、独自のアルゴリズムとプライベート ブラウジング モードかどうかに基づいて、ブラウザーのアドレス ボックスの下に入力候補を表示します。ほとんどのアルゴリズムは、検索履歴やブックマークなどに基づいて候補に優先順位を付けます。 「google.com」と入力しようとしたため、候補が一致しませんでした。ただし、入力プロセス中にバックグラウンドで実行されているコードがまだ多くあり、キーストロークを行うたびに候補がより正確になります。ブラウザは、入力する前に「google.com」を提案する可能性があります。

Enter キーが押されました

最初から開始するために、開始点としてキーボードの Enter キーを一番下まで押すことを選択します。このとき、Enter キー専用の電流ループが直接またはコンデンサを介して間接的に閉じられ、少量の電流がキーボードの論理回路システムに流入することが可能になります。このシステムは各キーのステータスをスキャンし、キー スイッチの潜在的なバウンス変化をデバウンスし、それをキーボード コード値に変換します。ここで、復帰のコード値は 13 です。キーボード コントローラーはコード値を取得すると、その後の送信のためにそれをエンコードします。現在、この転送プロセスはほとんどの場合、ユニバーサル シリアル バス (USB) または Bluetooth (Bluetooth) を介して行われます。以前は PS/2 または ADB 接続を介して行われていました。

USB キーボード:

  • キーボードの USB コンポーネントは、コンピューターの USB インターフェイスを介して USB コントローラーに接続されます。USB インターフェイスの最初のピンがこれを提供します。 5V電圧で

  • キーコード値は、キーボードの内部回路の「エンドポイント」と呼ばれるレジスタに保存されます

  • USBコントローラ 約10msごと次に、「エンドポイント」を 1 回クエリして、保存されているキー コード値データを取得します。この最小時間間隔はキーボードによって提供されます。

  • キー値コード値は、 USB シリアル インターフェイス エンジン 低レベル USB プロトコルに従う USB データ パケット

  • これらのデータ パケットは、D+ ピンまたは D- ピン (中央の 2 つのピン) を介してキーボードから送信されます。コンピュータへの最大速度は 1.5Mb/s です。速度制限は、人間とコンピューターの対話デバイスが常に「低速デバイス」 (USB 2.0 準拠) として宣言されているためです。

  • このシリアル信号はコンピューターの USB コントローラーでデコードされ、人間とコンピュータの対話デバイス用のユニバーサル キーボード ドライバーについてさらに説明します。次に、キーのコード値がオペレーティング システムのハードウェア抽象化層に転送されます。

仮想キーボード (タッチ スクリーン デバイス):

  • 最新の容量性スクリーンでは、ユーザーが指を画面上に置くと、電流のごく一部が導電層の静電領域から指を通って伝導され、ループが形成され、画面上のタッチポイントの電圧が低下します。そして、スクリーン コントローラーが割り込みを生成し、この「クリック」の座標

  • を報告します。その後、モバイル オペレーティング システムは、現在アクティブなアプリケーションに、GUI コンポーネントの 1 つでクリック イベントが発生したことを通知します。 、これが仮想キーボードになります ボタン

  • 仮想キーボードはソフト割り込みをトリガーし、「キーが押されました」メッセージを OS に返します

  • このメッセージは現在に返されます アクティブなアプリケーションが「キーダウン」イベントを通知します

割り込みを生成します [非 USB キーボード]

キーボードが信号を送信します割り込み要求ライン (IRQ) 上の信号は、割り込みコントローラによって割り込みベクトル (実際には整数) にマップされます。 CPU は割り込み記述子テーブル (IDT) を使用して、割り込みベクトルを対応する関数にマップします。これらの関数は割り込みハンドラーと呼ばれ、オペレーティング システム カーネルによって提供されます。割り込みが到着すると、CPU は IDT と割り込みベクトルに基づいて対応する割り込みハンドラーにインデックスを付け、オペレーティング システム カーネルが表示されます。

(Windows) WM_KEYDOWN メッセージがアプリケーションに送信されます

HID は、キーボード押下イベントを KBDHID.sys ドライバーに送信し、HID 信号をスキャン コード (Scancode) に変換します。ここでのキャリッジ リターンのスキャン コードは VK_RETURN (0x0d) です。 KBDHID.sys ドライバーは、すべてのキーボードおよびキーパッド入力イベントを安全に処理する役割を担う KBDCLASS.sys (キーボード クラス ドライバー) と対話します。次に、Win32K.sys を呼び出し、インストールされているサードパーティのキーボード フィルターにメッセージを渡す可能性があります。これらはすべてカーネル モードで発生します。

Win32K.sys は、GetForegroundWindow() API 関数を通じて現在アクティブなウィンドウを見つけます。この API 関数は、現在のブラウザのアドレス バーへのハンドルを提供します。 Windows システムの「メッセージ ポンプ」メカニズムは、SendMessage(hWnd, WM_KEYDOWN, VK_RETURN, lParam) 関数を呼び出します。lParam は、このキーに関する詳細情報を示すために使用されるマスクです (ここでは 0)。実際には、コード (OEM に依存する可能性がありますが、通常は VK_RETURN ではありません)、ファンクション キー (alt、shift、ctrl) が押されているかどうか (ここにはありません)、およびその他の状態をスキャンします。

Windows の SendMessage API は、特定のウィンドウ ハンドル hWnd のメッセージ キューにメッセージを直接追加します。その後、hWnd に割り当てられたメイン メッセージ処理関数 WindowProc が呼び出され、キュー内のメッセージが処理されます。

現在アクティブなハンドル hWnd は、実際には編集コントロールです。このコードは、SendMessage によって渡された 3 番目のパラメーター wParam をチェックします。そのため、ユーザーが Enter キーを押したことを認識します。

(Mac OS その後、OS X の WindowServer プロセスに渡されます。次に、WindowServer は、Mach ポートを介してこのイベントを適切な (アクティブな、またはリッスンしている) アプリケーションに配布し、信号はアプリケーションのメッセージ キューに置かれます。キュー内のメッセージは、mach_ipc_dispatch 関数を使用して、十分に高い特権を持つスレッドによって読み取ることができます。このプロセスは通常、NSEventType が KeyDown である NSEvent を通じて、NSApplication メイン イベント ループによって生成および処理されます。

(GNU/Linux)Xorg サーバーはキー コード値を監視します

グラフィカル X サーバーを使用する場合、コード。マッピング プロセスが完了すると、X サーバーはキー文字をウィンドウ マネージャー (DWM、メタシティ、i3 など) に送信し、ウィンドウ マネージャーはその文字を現在のウィンドウに送信します。現在のウィンドウは、関連するグラフィック API を使用して、入力ボックス内のテキストを印刷します。

URL を解析します

    ブラウザは URL を通じて次の情報を知ることができます:

  • プロトコル "http" は HTTP プロトコルを使用します
    • リソース "/" 要求されたリソースはホームページ (インデックス)
    • URL または検索キーワードが入力されていますか?

プロトコルまたはホスト名が不正な場合、ブラウザはアドレス バーに入力されたテキストをデフォルトの検索エンジンに渡します。ほとんどの場合、テキストが検索エンジンに渡されるとき、URL には、検索がこの特定のブラウザーからのものであることを検索エンジンに伝える特定の文字列が含まれます。

HSTS リストを確認します...

ブラウザは、ブラウザに付属の「プリロード HSTS (HTTP Strict Transport Security)」リストをチェックします。このリストには、ブラウザが要求するリクエストが含まれています。接続に HTTPS を使用する Web サイトのみ
  • Web サイトがこのリストに含まれている場合、ブラウザーは HTTP プロトコルの代わりに HTTPS を使用します。それ以外の場合、最初のリクエストは HTTP プロトコルを使用して送信されます
  • 次の点に注意してくださいWeb サイトが HSTS リストにない場合でも、HSTS ポリシーを使用して Web サイトにアクセスするようにブラウザに要求することもできます。ブラウザが Web サイトに最初の HTTP リクエストを送信すると、Web サイトはブラウザに応答を返し、リクエストの送信に HTTPS のみを使用するようにブラウザに要求します。ただし、この最初の HTTP リクエストはユーザーをダウングレード攻撃の脅威にさらす可能性があります_。そのため、最新のブラウザーには HSTS リストが事前に設定されています。
    • 非 ASCII Unicode 文字の変換

ブラウザは、入力に a-z、A-Z、0-9、-、または 以外の文字が含まれているかどうかを確認します。 🎜> ここでのホスト名は google.com であるため、非 ASCII 文字がない場合、ブラウザはホスト名の部分に Punycode_ エンコーディングを使用します
    • DNS クエリ...
ブラウザはドメイン名がキャッシュにあるかどうかを確認します

キャッシュにない場合は、gethostbyname ライブラリ関数 (関数はオペレーティング システムによって異なります) を呼び出して、
  • gethostbyname 関数は DNS を実行しようとしています。解析する前に、まずドメイン名がローカル ホスト内にあるかどうかを確認してください。ホストの場所はオペレーティング システムによって異なります_
  • gethostbyname が異なる場合は、このドメイン名のキャッシュ レコードがあり、ホスト内で見つからない場合は、DNS クエリ要求を DNS サーバーに送信します。 DNS サーバーは、ネットワーク通信スタック (通常はローカル ルーターまたは ISP のキャッシュ DNS サーバー) によって提供されます。

  • ローカル DNS サーバーにクエリを実行します

  • DNS サーバーとホストが同じサブネットにある場合、システムは次の ARP プロセスに従って DNS サーバー上で ARP クエリを実行します
  • DNS サーバーとホストが同じサブネットにある場合異なるサブネットでは、システムは次の ARP プロセスに従ってデフォルト ゲートウェイをクエリします

ARP

ARP ブロードキャストを送信するには、ターゲット IP アドレスが必要であり、 ARP によってブロードキャストされるインターフェイスの MAC アドレスを知るため。

  • 最初に ARP キャッシュをクエリします。キャッシュがヒットした場合は、結果を返します: ターゲット IP = MAC

キャッシュがヒットしなかった場合:

  • ルーティング テーブルを表示して、ターゲット IP アドレスがローカル ルーティング テーブルのサブネット内にあるかどうかを確認します。その場合は、そのサブネットに接続されているインターフェイスを使用し、そうでない場合は、デフォルト ゲートウェイに接続されているインターフェイスを使用します。
  • 選択したネットワーク インターフェイスの MAC アドレスをクエリします
  • レイヤー 2 ARP リクエストを送信します:

ARP リクエスト::

Sender MAC: interface:mac:address:hereSender IP: interface.ip.goes.hereTarget MAC: FF:FF:FF:FF:FF:FF (Broadcast)Target IP: target.ip.goes.here

ホストとルーターを接続するハードウェアの種類に応じて、次の状況に分類できます:

直接接続:

  • ルーターに直接接続している場合、ルーターは ARP 応答を返します (以下を参照)。

ハブ:

  • ハブに接続されている場合、ハブは ARP 要求を他のすべてのポートにブロードキャストします。また、ルーターも「接続」されている場合は、ハブは ARP 要求を他のすべてのポートにブロードキャストします。それを実行すると、ARP Reply が返されます。

スイッチ:

  • スイッチに接続されている場合、スイッチはローカル CAM/MAC テーブルをチェックして、探している MAC アドレスを持つポートを確認します。 、 if 見つからない場合、スイッチは ARP 要求を他のすべてのポートにブロードキャストします。
  • スイッチの MAC/CAM テーブルに対応するエントリがある場合、スイッチはクエリしたい MAC アドレスを持つポートに ARP 要求を送信します。
  • ルーターも " 「接続されている」場合、ARP Reply

ARP Reply::

Sender MAC: target:mac:address:hereSender IP: target.ip.goes.hereTarget MAC: interface:mac:address:hereTarget IP: interface.ip.goes.here

DNS サーバーまたはデフォルト ゲートウェイの IP アドレスがわかったので、次のことができます。 DNS リクエストを続行します:

  • ポート 53 を使用して UDP リクエスト パケットを DNS サーバーに送信します。応答パケットが大きすぎる場合は、TCP プロトコルが使用されます。
  • ローカル/ISP DNS サーバーは結果を見つけられない場合、最初の権限が見つかるまで再帰的なクエリ要求を上位の DNS サーバーに送信します。見つかった場合は、結果が返されます。

ソケットを使用します

をブラウザとしてターゲットサーバーの IP アドレスと URL で指定されたポート番号を取得した後 (http プロトコルのデフォルトのポート番号は 80、https のデフォルトのポート番号は 80) 443)、システム ライブラリ関数ソケットを呼び出し、TCP ストリーム ソケットを要求します。対応するパラメータは AF_INET と SOCK_STREAM です。

  • このリクエストはまずトランスポート層に渡され、そこでリクエストは TCP セグメントにカプセル化されます。ターゲット ポートはヘッダーに追加され、ソース ポートはシステム カーネルの動的ポート範囲 (Linux では ip_local_port_range) から選択されます。
  • TCP セグメントはネットワーク層に送信され、ネットワークレイヤーは別の IP を追加します。ヘッダーにはターゲット サーバーの IP アドレスとローカル マシンの IP アドレスが含まれており、これらは TCP パケットにカプセル化されます。
  • この TCP パケットはリンク層に入り、リンク層はローカルの内蔵ネットワーク カードの MAC アドレスとゲートウェイの MAC アドレスを含むフレーム ヘッダーをパケットに追加します (ローカルルーター）。前述したように、カーネルがゲートウェイの MAC アドレスを知らない場合は、ARP ブロードキャストを実行してそのアドレスを照会する必要があります。

これで、TCP パケットの準備が整い、次の方法を使用して送信できるようになります:

  • Ethernet_
  • WiFi_
  • セルラー データNetwork_

ほとんどのホーム ネットワークと小規模ビジネス ネットワークでは、パケットはローカル コンピューターから開始され、ローカル ネットワークを通過し、モデムを介してデジタル信号をアナログ信号に変換します。電話回線、ケーブルテレビケーブル、無線電話回線での伝送に適しています。伝送線のもう一方の端には別のモデムがあり、次のネットワーク ノードで処理できるようにアナログ信号をデジタル信号に変換します。ノードの宛先アドレスと送信元アドレスについては後で説明します。

大企業や新しい家庭では、光ファイバーまたは直接イーサネット接続を使用することが多く、その場合、信号は常にデジタルであり、処理のために次のネットワーク ノードに直接渡されます。

最後のパケットは、ローカル サブネットを管理するルーターに到達します。そこから、自律ゾーンの境界ルーター、他の自律ゾーンを経由して、最終的にターゲット サーバーに到達します。途中で通過するルーターは、IP データグラム ヘッダーから宛先アドレスを抽出し、パケットを次の宛先に正しくルーティングします。 IP データグラム ヘッダーの TTL フィールドの値は、パケットがルータを通過するたびに 1 ずつ減ります。パケットの TTL が 0 になったり、ネットワークの輻輳などの理由でルータのパケット キューがいっぱいになったりすると、パケットは 1 ずつ減ります。ルーターによって破棄されます。

上記の送受信プロセスは、TCP 接続中に何度も発生します:

  • 客户端选择一个初始序列号(ISN)，将设置了 SYN 位的封包发送给服务器端，表明自己要建立连接并设置了初始序列号
  • 服务器端接收到 SYN 包，如果它可以建立连接：
    • 服务器端选择它自己的初始序列号
    • 服务器端设置 SYN 位，表明自己选择了一个初始序列号
    • 服务器端把 (客户端ISN + 1) 复制到 ACK 域，并且设置 ACK 位，表明自己接收到了客户端的第一个封包
  • 客户端通过发送下面一个封包来确认这次连接：
    • 自己的序列号+1
    • 接收端 ACK+1
    • 设置 ACK 位
  • 数据通过下面的方式传输：
    • 当一方发送了N个 Bytes 的数据之后，将自己的 SEQ 序列号也增加N
    • 另一方确认接收到这个数据包（或者一系列数据包）之后，它发送一个 ACK 包，ACK 的值设置为接收到的数据包的最后一个序列号
  • 关闭连接时：
    • 要关闭连接的一方发送一个 FIN 包
    • 另一方确认这个 FIN 包，并且发送自己的 FIN 包
    • 要关闭的一方使用 ACK 包来确认接收到了 FIN

UDP 数据包

TLS 握手--------* 客户端发送一个 ``Client hello`` 消息到服务器端，消息中同时包含了它的TLS版本，可用的加密算法和压缩算法。* 服务器端向客户端返回一个 ``Server hello`` 消息，消息中包含了服务器端的TLS版本，服务器选择了哪个加密和压缩算法，以及服务器的公开证书，证书中包含了公钥。客户端会使用这个公钥加密接下来的握手过程，直到协商生成一个新的对称密钥* 客户端根据自己的信任CA列表，验证服务器端的证书是否有效。如果有效，客户端会生成一串伪随机数，使用服务器的公钥加密它。这串随机数会被用于生成新的对称密钥* 服务器端使用自己的私钥解密上面提到的随机数，然后使用这串随机数生成自己的对称主密钥* 客户端发送一个 ``Finished`` 消息给服务器端，使用对称密钥加密这次通讯的一个散列值* 服务器端生成自己的 hash 值，然后解密客户端发送来的信息，检查这两个值是否对应。如果对应，就向客户端发送一个 ``Finished`` 消息，也使用协商好的对称密钥加密* 从现在开始，接下来整个 TLS 会话都使用对称秘钥进行加密，传输应用层（HTTP）内容TCP 数据包~

HTTP 协议···

如果浏览器是 Google 出品的，它不会使用 HTTP 协议来获取页面信息，而是会与服务器端发送请求，商讨使用 SPDY 协议。

如果浏览器使用 HTTP 协议，它会向服务器发送这样的一个请求::

GET / HTTP/1.1Host: google.com[其他头部]

“其他头部”包含了一系列的由冒号分割开的键值对，它们的格式符合HTTP协议标准，它们之间由一个换行符分割开来。这里我们假设浏览器没有违反HTTP协议标准的bug，同时浏览器使用 HTTP/1.1 协议，不然的话头部可能不包含 Host 字段，同时 GET 请求中的版本号会变成 HTTP/1.0 或者 HTTP/0.9 。

HTTP/1.1 定义了“关闭连接”的选项 "close"，发送者使用这个选项指示这次连接在响应结束之后会断开::

Connection:close

不支持持久连接的 HTTP/1.1 必须在每条消息中都包含 "close" 选项。

在发送完这些请求和头部之后，浏览器发送一个换行符，表示要发送的内容已经结束了。

服务器端返回一个响应码，指示这次请求的状态，响应的形式是这样的::

200 OK[响应头部]

然后是一个换行，接下来有效载荷(payload)，也就是 www.google.com 的HTML内容。服务器下面可能会关闭连接，如果客户端请求保持连接的话，服务器端会保持连接打开，以供以后的请求重用。

如果浏览器发送的HTTP头部包含了足够多的信息（例如包含了 Etag 头部，以至于服务器可以判断出，浏览器缓存的文件版本自从上次获取之后没有再更改过，服务器可能会返回这样的响应::

304 Not Modified[响应头部]

这个响应没有有效载荷，浏览器会从自己的缓存中取出想要的内容。

在解析完 HTM L之后，浏览器和客户端会重复上面的过程，直到HTML页面引入的所有资源（图片，CSS，favicon.ico等等）全部都获取完毕，区别只是头部的 GET / HTTP/1.1 会变成 GET /$(相对www.google.com的URL) HTTP/1.1 。

如果HTML引入了 www.google.com 域名之外的资源，浏览器会回到上面解析域名那一步，按照下面的步骤往下一步一步执行，请求中的 Host 头部会变成另外的域名。

HTTP 服务器请求处理

HTTPD(HTTP Daemon)在服务器端处理请求/相应。最常见的 HTTPD 有 Linux 上常用的 Apache 和 nginx，以及 Windows 上的 IIS。

  • HTTPD がリクエストを受信します
  • サーバーはリクエストを次のパラメータに分割します:
    • HTTP リクエスト メソッド (GET、POST、HEAD、PUT、および DELETE)。 Google にアクセスするこのケースでは、GET メソッドが使用されます。
    • ドメイン名: google.com
    • リクエスト パス/ページ: / (google.com で指定されたページをリクエストしていないため、 / はデフォルトのパスです)
  • サーバーは、google.com の仮想ホストが構成されていることを確認します
  • サーバーは、google.com が GET を受け入れることを確認します
  • サーバーはユーザーが GET メソッドを使用できることを確認します (IP アドレス、ID 情報などに基づいて)
  • サーバーに URL 書き換えモジュール (Apache の mod_rewrite など) がインストールされている場合および IIS の URL 書き換え)、サーバーは書き換えルールとの一致を試みます。一致した場合、サーバーはルールに従ってリクエストを書き換えます
  • サーバーは、リクエスト情報に基づいて、対応する応答コンテンツを取得します。この場合、アクセス パスは「/」であるため、ホームページ ファイルにアクセスされます (このルールをオーバーライドすることもできますが、これが最も一般的に使用されます)。
  • サーバーは、指定された処理プログラムを使用してこのファイルを分析および処理します。Google が PHP を使用する場合、サーバーは PHP を使用してインデックス ファイルを解析し、出力をキャプチャし、PHP 出力結果を要求者に返します。

ブラウザの背後にあるストーリー

サーバーがリソース (HTML、CSS、JS、画像など) を提供すると、ブラウザは次の操作を実行します:

  • HTML、CSS、JS の解析
  • DOM ツリーの構築->レンダリング->レイアウト->描画

ブラウザの機能は、サーバーから必要なリソースを取得し、ブラウザウィンドウに表示することです。リソースは通常 HTML ファイルですが、PDF、画像、またはその他の種類のコンテンツである場合もあります。リソースの場所は、ユーザーが提供する URI (Uniform Resource Identifier) によって決まります。

ブラウザが HTML ファイルを解釈して表示する方法は、HTML および CSS 標準で詳しく説明されています。これらの標準は、Web 標準団体 W3C (World Wide Web Consortium) によって維持されています。

さまざまなブラウザのユーザー インターフェイスは、ほとんどの場合非常に似ており、多くの共通の UI 要素があります。

    アドレス バー
    • 戻るボタンと進むボタン
    • ブックマーク オプション
    • 更新ボタンと停止ボタン
    • ホーム ボタン

ブラウザの高レベル アーキテクチャ

を構成するコンポーネントブラウザの起動 コンポーネントは次のとおりです:

  • ユーザー インターフェイス ユーザー インターフェイスには、アドレス バー、進むボタンと戻るボタン、ブックマーク メニューなどが含まれます。リクエスト ページを除くすべてのものが含まれます。あなたが見るコンテンツはユーザーです インターフェースの一部
  • ブラウザ エンジン ブラウザ エンジンは、UI とレンダリング エンジンの作業を調整する役割を果たします
  • レンダリング エンジン レンダリング エンジンは、要求されたコンテンツを表示する役割を果たします。要求されたコンテンツが HTML の場合、レンダリング エンジンは HTML と CSS を解析し、コンテンツを画面に表示します。
  • ネットワーク コンポーネント ネットワーク コンポーネントは、次のようなネットワーク呼び出しを担当します。プラットフォームを使用した HTTP リクエストなど インターフェイスに関係なく、下位層はさまざまなプラットフォームに固有の実装です
  • UI バックエンド UI バックエンドは、基本的な UI コンポーネントを描画するために使用されます。ドロップダウン リスト ボックスおよびウィンドウとして。 UI バックエンドはプラットフォームに依存しない統合インターフェイスを公開し、下位層はオペレーティング システムの UI メソッドを使用して
  • JavaScript エンジン JavaScript エンジンは Javascript コードの解析と実行に使用されます
  • データ ストレージ データ ストレージ コンポーネントは永続化レイヤーです。ブラウザーは、Cookie などのさまざまなデータをローカルに保存する必要がある場合があります。ブラウザは、localStorage、IndexedDB、WebSQL、FileSystem などのストレージ メカニズムもサポートする必要があります
HTML 解析

ブラウザのレンダリング エンジンは、ネットワーク層から要求されたドキュメントを取得します。通常はドキュメント8kB のチャンクで転送されます。

HTML パーサーの主な仕事は、HTML ドキュメントを解析し、解析ツリーを生成することです。

解析ツリーは、DOM 要素と属性をノードとして持つツリーです。 DOM は Document Object Model の略で、HTML ドキュメントのオブジェクト表現であり、HTML 要素を外部 (JavaScript など) に提供するインターフェイスでもあります。ツリーのルートは「Document」オブジェクトです。 DOM と HTML ドキュメント全体は、ほぼ 1 対 1 の関係にあります。

解析アルゴリズム

HTML は、一般的なトップダウンまたはボトムアップの方法を使用して解析できません。主な理由は次のとおりです。

  • 言語自体の「トレラント」機能
  • HTML 自体が不完全である可能性があるため、ブラウザにはそれをサポートするための従来のフォールト トレラント メカニズムが必要です。
  • 解析。プロセスを繰り返す必要があります。他の言語の場合、解析プロセス中にソース コードは変更されませんが、HTML の場合、script 要素に含まれる document.write() メソッドなどの動的コードによってソース コード、つまり解析プロセスにコンテンツが追加されます。実際に入力コンテンツを変更します

一般的な解析手法は使用できないため、ブラウザーは HTML 解析専用のパーサーを作成しました。解析アルゴリズムは HTML5 標準仕様で詳しく説明されています。アルゴリズムには主にトークン化とツリー構築の 2 つの段階が含まれます。

解析が完了すると、

ブラウザは Web ページの外部リソース (CSS、画像、JavaScript ファイルなど) の読み込みを開始します。

この時点で、ブラウザーはドキュメントを「対話型」としてマークし、ブラウザーは「遅延」モードでスクリプトの解析を開始します。つまり、ドキュメントの解析後に実行する必要があるスクリプトです。その後、ドキュメントのステータスが「完了」に変わり、ブラウザは「読み込み」イベントを実行します。

HTML ページを解析するときに「構文エラー」が発生することはありません。ブラウザはエラーを修正して解析を続行します。

同期 Javascript コードを実行します。

CSS 解析

  • CSS 辞書と構文に従って、CSS ファイルと c9ccee2e6ea535a969eb3f532ad9fe89 タグに含まれるコンテンツを分析します
  • 各 CSS ファイルはスタイルに解析されますシート オブジェクト、このオブジェクトにはセレクターを含む CSS ルール、および CSS 構文に対応するオブジェクトが含まれています
  • CSS パーサーはトップダウンである場合もあれば、パーサー ジェネレーターを使用して生成される場合もあります ボトムアップ パーサー

ページのレンダリング

  • DOM ノード ツリーを走査し、各ノードの CSS スタイル値を計算することにより、「フレーム ツリー」または「レンダリング ツリー」を作成します
  • は、 「フレーム ツリー」は、子ノードの幅、ノードの水平方向のパディング、ボーダー、マージンを下から順に累積し、ノード ヘッダーの推奨幅を
  • に割り当てることで各ノードの実際の幅を計算します。テキストの折り返しを適用して、各ノードの子ノードに上から下まで実行可能な幅
  • を適用し、子ノードの高さとこのノードのパディング、ボーダー、マージンを累積し、から各ノードの高さを計算します下から上へ
  • 上記の計算結果を使用してそれぞれを構築します。 ノードの座標
  • float を使用する要素があり、位置に絶対的または相対的な属性がある場合、より複雑な計算が行われます。詳細については、http://dev.w3.org/csswg/css2/ および http://www.w3.org/Style/CSS/current-work を参照してください。
  • のどの部分を表すレイヤーを作成します。ページは再ラスタライズせずにグループとして描画できます。各フレーム オブジェクトはレイヤーに割り当てられます
  • ページ上の各レイヤーにはテクスチャ (?) が割り当てられます
  • 各レイヤーのフレーム オブジェクトが走査され、コンピューターは描画コマンドを実行します それぞれを描画このプロセスは CPU によってラスタライズされるか、D2D/SkiaGL を通じて GPU に直接描画されることがあります
  • 上記のすべての手順では、最新のページのレンダリング中に計算された値を使用することができるため、多くの計算
  • 各レイヤーの最終位置を計算します。一連のコマンドが Direct3D/OpenGL によって発行され、GPU コマンド バッファーがクリアされ、コマンドが GPU に送信されて非同期でレンダリングされ、フレームが計算されます。 Windows サーバーに送信されます。

GPU レンダリング

  • レンダリング プロセス中、グラフィックス処理層は汎用 CPU またはグラフィックス プロセッサ GPU を使用する場合があります
  • 使用時GPU がグラフィックスのレンダリングに使用される場合、グラフィックス ドライバー ソフトウェアはタスクを複数の部分に分割し、GPU の強力な並列コンピューティング機能を最大限に活用して、レンダリング プロセス中に多数の浮動小数点計算を実行できます。

Window Server

レンダリング後の処理とユーザー開始の処理

レンダリング後、ブラウザーは特定の時間メカニズム (Google Doodle アニメーションなど) に従って JavaScript コードを実行します。 ) またはユーザーと対話します (検索バーにキーワードを入力して検索候補を取得します)。 Google ホームページでは動作しませんが、Flash や Java などのプラグインも実行できます。これらのスクリプトはネットワーク リクエストをトリガーすることができ、また Web ページのコンテンツとレイアウトを変更して、レンダリングと描画を再度実行する可能性があります。

.. クリエイティブ コモンズ ゼロ: https://creativecommons.org/publicdomain/zero/1.0/.. CSS 辞書と構文: http://www.w3.org/TR/CSS2/grammar.html .. Punycode: https://en.wikipedia.org/wiki/Punycode.. イーサネット: http://en.wikipedia.org/wiki/IEEE_802.3.. WiFi: https://en.wikipedia.org / wiki/IEEE_802.11.. 携帯電話データ ネットワーク: https://en.wikipedia.org/wiki/Cellular_data_communication_protocol.. アナログ - デジタル コンバーター: https://en.wikipedia.org/wiki/Analog-to-digital_converter .. ネットワーク ノード: https://en.wikipedia.org/wiki/Computer_network#Network_nodes.. オペレーティング システムによって異なります: https://en.wikipedia.org/wiki/Hosts%28file%29#Location_in_the_file_system .. _ダウングレード攻撃: http://en.wikipedia.org/wiki/SSL_stripping

翻訳されたアドレス https://github.com/skyline75489/what-happens-when-zh_CN/blob/master/README.rst

元のアドレス https://github.com/alex/what- happens-when

(私はただの自然の運び手?)

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Web 標準についてもう一度言及する時期が来ました_html/css_WEB-ITnose次の記事：Web 標準についてもう一度言及する時期が来ました_html/css_WEB-ITnose

関連記事

続きを見る