ブラウザが HTML をロードしてレンダリングするプロセス (標準によって定義され、最新のブラウザ用に最適化されたプロセス)-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

ブラウザが HTML をロードしてレンダリングするプロセス (標準によって定義され、最新のブラウザ用に最適化されたプロセス)

PHP中文网

Aug 23, 2016 am 09:03 AM

まず、標準で定義されているブラウザのレンダリングプロセス (オンラインで見つかります) を見てみましょう:

ブラウザが Web ページを開くプロセス

ユーザーが初めて Web サイトにアクセスするとき、ブラウザはリクエストをサーバーにアクセスすると、サーバーは HTML ファイルを返します
ブラウザは HTML コードのロードを開始し、外部 CSS または JS ファイルを参照するリンクタグを見つけます
CSS と JS ファイルを再度取得すると、サーバーは CSS と JS ファイルを返します
ブラウザは HTML の本体部分のコードを読み込み続け、CSS と JS ファイルが取得され、ページが表示されます。レンダリングが開始されます。
ブラウザは画像を参照するコード内で img タグを見つけ、それをサーバーに送信します。 この時点で、ブラウザは画像がダウンロードされるまで待機せず、次のコードのレンダリングを続行します
画像は特定の領域を占有し、ページのレイアウトに影響を与えるため、サーバーは画像ファイルを返します。ブラウザは、コードのこの部分に戻って再レンダリングする必要があります。
ブラウザは、JavaScript コードの行を含むスクリプトタグを見つけて、すぐに実行しました。
JavaScript スクリプトは、このステートメントを実行しました。ブラウザでコード内の特定の p を非表示にします (style.display=”none”)。おっと、突然そのような要素が失われ、ブラウザはコードのこの部分を再レンダリングする必要がありました
ついに HTML の到着を待ったところ、ブラウザは突然泣き出しました...

html

のレンダリングの順序は、IEブラウザのダウンロードの順序は上から下であり、レンダリングの順序も上から下へのダウンロードとレンダリングが同時に行われます。
ページの特定の部分をレンダリングすると、その上のすべての部分がダウンロードされます (関連するすべての要素がダウンロードされたことを意味するわけではありません)
意味解釈タグが見つかった場合は、ファイルを埋め込みます ( JS スクリプト、CSS スタイル)、IE のダウンロードプロセスにより、ダウンロード用に別の接続が有効になります。
そしてダウンロード後に解析します。
解析プロセス中は、ページの下向きのすべての要素のダウンロードが停止され、読み込みがブロックされます。
スタイルシートがダウンロードされると、以前にダウンロードされたすべてのスタイルシートと一緒に解析され、以前のすべての要素 (以前にレンダリングされた要素を含む) が再レンダリングされます。
JSやCSSで再定義があった場合、先に定義した関数が後から定義された関数で上書きされます。

JS の読み込み

を並行してダウンロードして解析することはできません (ダウンロードのブロック)
開発者は、スクリプトタグが解析されるとすぐにスクリプトを解析して実行したいと考えています。スクリプトが実行されるまでドキュメントの解析をブロックします。スクリプトがインポートされると、JS が参照されると、ブラウザは JS リクエストを送信し、リクエストの戻りを待ちます。リソースが要求されるまでドキュメントを保持します。ブラウザには安定した DOM ツリー構造が必要であり、JS には、document.write や appendChild を使用したり、location.href を直接使用してジャンプするなど、DOM ツリー構造を直接変更するコードが存在する可能性が非常に高いため、ブラウザはJS が DOM ツリーを変更すると、DOM ツリーを再構築する必要があり、他のダウンロードやプレゼンテーションがブロックされるのを防ぐためです。このパターンは長年維持されており、特に HTML4 と HTML5 で指定されています。開発者は、スクリプトを遅延としてマークして、ドキュメントの解析がブロックされず、ドキュメントの解析が完了した後に実行されるようにすることができます。 HTML5 では、スクリプトの解析実行に別のスレッドが使用されるように、スクリプトを非同期としてマークするオプションが追加されています。

ここで説明する必要がある点がいくつかあります:

1. ブラウザの処理プロセスは

HTML を解析して DOM ツリーを生成する -> DOM ツリーとスタイルシートに基づいてレンダーツリーを生成するということがわかっています。 -> レンダリングレンダーツリー表示。ユーザーがページをより速く表示できるようにするために、ブラウザは HTML の解析中に部分的な DOM ツリーを生成し、部分的なレンダーツリーを生成して表示します。

2. このプロセスでは、スクリプトの実行をブロックし、レンダリングをブロックする 2 つの外部リソース、つまり外部 js と外部 css が存在します。外部 js は DOM ツリーの生成をブロックします。これはブラウザーが安定した DOM ツリーを必要とし、js がこの構造を破壊する可能性があるためです (もちろん、スタイルも変更される可能性があります [これはスタイルシートではなくスタイルであることに注意してください)。ただし、これはブロックしません。影響はありません); 外部 CSS スタイルシートもスクリプトの実行をブロックします理論的には、スタイルシートは Dom ツリーを変更しないため、解析を停止する必要はありません。ただし、問題が発生します。スタイルがロードされて解析されていない場合、スクリプトは明らかに間違った値を取得します。これは特殊なケースのように見えますが、実際には非常に一般的な問題です。 Firefox は、スタイルシートの読み込みと解析中にすべてのスクリプトをブロックしますが、Chrome は、アンロードされたスタイルシートの影響を受ける可能性のある特定のスタイルプロパティにアクセスしようとするスクリプトのみをブロックします。

3. 画像などの他の外部リソースは、ページの一般的なフレームが表示されることがよくありますが、画像の位置が表示されないことがわかります。ダウンロードして、後で再レンダリングしてください。

最新のブラウザ向けの最適化:

標準のブラウザのレンダリングとダウンロードのプロセスに従います。次のコードは、HTML 内のリソースと同じ順序で外部リソースを読み込みます。外部リソースリクエスト http が先頭に追加されます://hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d はすべてのスタイルの前に読み込まれる必要があります

...百度统计代码-->
<script>var _hmt = _hmt || [];
    (function() {var host=document.location.hostname;if(/lcfarm.com$/ig.test(host)){          
    var hm = document.createElement("script");
          hm.src = "//hm.baidu.com/hm.js?a041a0f4ff93aef6aa83f34134331a1d";          
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        }
    })();script>
    <link rel="stylesheet"
     type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_f9db6a6.css?1.1.2">
     <link rel="stylesheet" 
     type="text/css" href="//static.lcfarm.com/pc-dist/common/css/common_530eedd.css?1.1.2">
     <link rel="stylesheet" type="text/css" href="//static.lcfarm.com/pc-dist/css/index_8b620da.css?1.1.2">
     <link rel="stylesheet" 
     type="text/css" href="//static.lcfarm.com/pc-dist/pkg/index.html_aio_2_2379650.css?1.1.2">head>
     <body>...
     <script type="text/javascript" data-loader="" 
     src="//static.lcfarm.com/pc-dist/common/dep/mod_36ad799.js?1.1.2">script>
     <script type="text/javascript" data-loader="" 
     src="//static.lcfarm.com/pc-dist/common/dep/jquery_c07f226.js?1.1.2">script>
     <script type="text/javascript" 
     src="//static.lcfarm.com/pc-dist/common/js/jquery/jquery.cookie_546183c.js?1.1.2">script>
     <script type="text/javascript" src="//static.lcfarm.com/pc-dist/pkg/common_85ea494.js?1.1.2">script>
     <script type="text/javascript" 
     src="//static.lcfarm.com/pc-dist/pkg/index.html_aio_350303c.js?1.1.2">script>body>html></script>

でもクロム上の現実。次の効果は、Firefox、ie8+、およびその他のブラウザーで見つかりました (https://www.webpagetest.org/ を使用してテスト)

なぜですか?これは

投機的解析です

WebkitとFirefoxの両方でこの最適化が行われており、スクリプトが実行されると、別のスレッドが残りのドキュメントを解析し、後でロードする必要があるリソースを

ネットワークを介してロードします。このアプローチにより、リソースを並行してロードできるため、全体的な速度が向上します。事前解析では Dom ツリーは変更されないことに注意してください。この作業は、外部スクリプト、スタイルシート、イメージなどの外部リソースへの参照のみを解析するメインの解析プロセスに委ねられます。上の図に示すように、スクリプトを実行すると、多くの外部リソース参照が解析され、それらをダウンロードするためにスレッドが開始され、メインスレッドはまだ hm.js の戻りを待っていることがわかります。

上記は、ブラウザーの HTML の読み込みとレンダリングのプロセス (最新のブラウザーの標準定義プロセスと最適化) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) を参照してください。！

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。