アウトライン
B / Sアーキテクチャ（B / Sはまた、C / Sの構造であるが、C / Sが自分のショーを書き、B / Sは、それを達成するために比較的均一な表示エンジンを持っている）Web開発者欄には、ブラウザのために従事していますあまりにもおなじみのブラウザ。あなたは、マイクロソフトJAVAストリームまたはストリームの流れやPHP、新しいジャンルのWEB開発されているかどうか。どんなにあなたのサーバが使用する事業構造の種類、ORACLEデータベースまたはMSSQLは、ユーザーの視点から、これは彼らが直接、と接触することができるものである視覚的な印象にユーザーフロントエンドユーザーエクスペリエンス、マッチアップを、我々また、常にそれを扱っていきます、これは多くの問題の根本から来て、おそらく我々の開発作業のため、原則の内部実装を見て、あるかもしれない、純粋な開発者から技術の分野の専門家に、より効果的になりますこれらの詳細こと。
この記事では、HTML / CSSクラスについて説明し、ブラウザは、関連する知識を表示します。
それはjavascriptのブラウザエンジンが含まれていません。
サーバへのHTTPクライアントません。
これは、サーバ側の処理の流れの部分を含みません。
ブラウザの種類
私たちは今、多くの場合、ブラウザの5種類を使用してありますが、Internet Explorerは、Firefoxの、サファリ、クロームオペラでは、市場が主流のWebブラウザのレイアウトエンジンの3種類が含まれ、WebKi（クロム、サファリ、オペラ ）、ヤモリ（Mozillaの、 レイアウトエンジンを使用してのFirefox等）とトライデント（またMSHTML、IE使用レイアウトエンジン）をいいます。（参照http://www.cnblogs.com/liuzijing688/archive/2008/05/18/1201755.htmlを、あなたは、サブケースを実行するためにブラウザを使用しているものを実行することができます）http://html5test.com/を。これはFirefoxの、クロム、Safariブラウザ、パート3のソースコードはオープンソースであり、行動のソースコードの形式的分析に基づいた分析の一部。ちなみに、Chromeとより多くの他のオープンソースのブラウザ市場シェア（参照http://www.w3schools.com/browsers/browsers_stats.aspを）（IE6の使用http://www.ie6countdown.com /などの段階的廃止など）、HTML5フロントエンドの導入は、開発ツール、HTMLのサポート徐々に統一規格、IE6の低いバージョン（7,8）、CSSハックの互換性と他のシナリオのための将来の需要は少なくなります多分に、焦点を当てますむしろ、我々の効率を向上させる、互換性に焦点を当て思想を具現コア値を反映するより達成し、これは乾燥物質の真の現像剤です。使用の真のしやすさと引き換えに、動作モードを変更し、安全性を高めるために、少しだけを考えるユーザーの観点からは、良いことですが、私はIE9のために以降のみ製品開発の未来を願っています。
ブラウザの主な責任
ブラウザ、私たちが毎日使用していますが、一日は、開発WEBフィールドをインタビューした場合、あなたは彼の任務に名前を付ける必要があった、ない突然皆のは明らかに表現することができます。私は、URIによってリソースを検索、通常、我々は、メインのリソース形式はもちろんHTML、PDF、画像、動画で見る、ブラウザの主な機能は表示され、ユーザーが様々な形でWEB資源を望んでいるのを確認だと思います（ユニフォームリソース識別子）を実現しています。
W3C（World Wide Webコンソーシアム）組織は、HTML / CSSの仕様、ブラウザがHTMLファイルをどのように解釈するかの明確な記述、およびどのようにそれを表示するには、W3Cはまた、組織WEB標準プロトコルの分野を開発しているのセットを開発します。現在、我々は、一般的なHTML、1999年に導入されたことにより、XHTML1.0と主HTML4.01を、（持ってhttp://www.w3.org/TR/html401/）。HTML5仕様は完成に近づいて、主要な主流のブラウザがサポートされているものの、まだ開発段階にあり、まだ完璧ではありません。CSSは現在、主にCSS2.0である（（http://www.w3.org/TR/CSS2/）、 時間、ハードウェア開発とソフトウェア産業の進展の上に、HTML5 / CSS3の金の組み合わせがポップアップ表示されます同様に、CSSバージョン3が進行中である。ブラウザ市場の花もWeb開発者とエンドユーザーのために独自開発し、開発しながら、多くの場合、唯一の規範的なコンテンツのほとんどをサポートし、100のゴングを開花される前に、深刻な互換性の問題を提起すると言う。幸いなことに、ほとんどのブラウザは、現在徐々にこのエラーの挙動を修正。
共通インターフェイス要素を持っている主要なブラウザ、の間には多くの類似点があります。
- アドレスバー
- 前方と後方のボタン
- しおりセット
- リフレッシュ、停止ボタン
- ホームボタン
ビューのブラウザインタフェースの観点から、該当規範が実際に本当に奇妙なので、一貫した行うことができますがあります。これは、お互いを模倣による年間の主要なブラウザベンダーです。HTML5契約は、アドレスバー、ステータスバー、ツールバーとしてだけでいくつかの一般的な上場しているブラウザのインターフェイス要素の制約をやりました。もちろん、各ブラウザは、Firefoxのダウンロードマネージャなど、いくつかの個々の特性を持っています。後に、ここではもう嫌になるほどの章を参照してくださいしない、より遊びブラウザユーザーインターフェース（ブラウザインターフェイス要素）を導入。
彼は、ブラウザは、我々が見てきたもの、一般的で、その後、お互いの関係はどのようなものであるか、ブラウザ、次の主要コンポーネントについて話すと言います。
インフラブラウザ
- インタフェース要素（またはインタフェースコントロール） - ブックマークメニューウィンドウ、前後、ウェブアドレスバーの表示領域以外の部分を含みます。
- ブラウザエンジン - インタフェースのエンジンクエリおよび操作をレンダリングします。
- レンダリングエンジン - 要求の内容を表示するための責任を負います。例えば、HTMLに要求し、それはHTMLとCSSを解析するための責任があるとの結果がウィンドウに表示されます。
- ネットワーク - などのHTTPリクエストとしてネットワーク要求、。これは、プラットフォームに依存しないインタフェースとプラットフォームの独立した実装を含みます。
- UIリア - そのようなウィンドウでコンボボックスとして、基本要素を描画します。これは、プラットフォームに依存しないインターフェース、適切なオペレーティングシステムの実装の内部使用を提供します。
- JavaScriptインタープリタ。構文解析のためのJavaScriptコードを実行します。
- データストレージ。これは、永続化層です。ブラウザはクッキーなどハードディスク上のすべてのデータを格納する必要があります。「ウェブデータベース」：新しいHTML仕様（HTML5）は、完全な（軽量いえ）ブラウザデータベースを定義します。
他の異なるレンダリングエンジンクロムブラウザで複数のインスタンスの使用は、各タブ、タブのページは、それぞれが独立したプロセスであることに留意すべきです。
レンダリング処理
ユーザーは、ネットワーク層到着ブラウザのレンダリングエンジン、レンダリング動作開始を経由してHTMLテキスト（text / htmlの）を要求します。次のようにレンダリングがフローチャートに基づいて、前記各文書データブロックの、典型的にはせいぜい8Kを、レンダリング。
詳細なフローチャート
レンダリングエンジンは、最初に、これが最初のステップである、HTML文書はDOMツリーに変換されて解析します。その後、いずれかのインライン、埋め込みまたは取り込まアウトリーチ式CSSスタイルがDOMツリーをレンダリングするための付加的な木を生成すると同時に、解決される - 演色ツリーが含むと、木（ツリーをレンダリング）をレンダリングし、ディスプレイ等、矩形サイズ属性、およびこれらの配列は、基本的に同じ長方形の表示順です。その後、画面上の表示位置を決定するために、レンダリングツリーを処理してレイアウトを行う各ノード。最後に、ツリーがトラバースされ、最後の章をレンダリングするUIは、各ノードがプロットされたバックエンド層に記載されています。
上記の手順は、ユーザーエクスペリエンスを向上させるために、段階的なプロセスであり、レンダリングエンジンをしようとすると、エンドユーザーに可能な限り迅速に結果が表示されます。すべてのHTMLが解析されるまで、彼らはレンダリングツリーを作成し、レイアウト完了するまでは待ちません。それは同時に、ネットワーク層からの文書の内容が表示される最初の部分コンテンツを受信しているでしょう。
DOMツリー
フロントエンドの開発者のためのDOM JavaScriptは、おそらくあまりにもおなじみの、DOMは、私たちは、ドキュメントオブジェクトモデルを呼び出すドキュメントオブジェクトモデルと呼ばれます。私たちは、HTML要素の外部インターフェースとしてそれを見ることができ、これらのインタフェースは、JavaScriptの開発者が複雑なページ機能を実装することができるようになります持っています。DOMツリーはルートのDocumentオブジェクトです。DOM仕様で、目に見えるもありhttp://www.w3.org/DOM/DOMTRが。違いは、XMLパーサは、HTMLを書くのではない標準的な方法を解析する場合は、エラーを解析するように例外をスローしない、比較的緩和されていることです。
HTMLパーサーを使用してブラウザは、ツリー上の対応する位置に加え受け部材DOM DOMオブジェクトにHTMLテキストを解析します。DTD（解析時に私たちが使用する文書型定義）仕様は説明し、DTDは、階層の要素間のすべての許可の要素（要素）と、これらの要素（属性）の性質だけでなく、可能性を含んでいます。私たちは、それが以前の書き込みのHTML文書との互換性のためで、市場にDTDの多くの種類を参照してください、現在の推奨標準DTDの仕様では、目に見える定義http://www.w3.org/TR/html4/strict.dtdを正のHTMLを解析し、この仕様は、リストの情報要素の種類、要素の属性やイベントのサポートの上に、ベースにしています。
デフォルトのHTMLによって参照されるすべての外部リソースは、同時に、非同期にその決意とダウンロードリソースをロードされますが、スクリプトリソース（.jsファイル）は、このようにdocument.writeなど、解決のプロセスで実行する可能性があるデフォルトのスクリプトリソースそうあなたのようなプロパティ延期またはASYNを追加しない限り、負荷は、同時に行われたとき。CSSのDOMオブジェクトは、そのリソースの構造を変更しないので、非同期ロードされます。これは、<リンクのhref = a.css>と<SCRIPT SRC = a.js>のように、問題を生成する、a.js a.cssクラス定義内で使用される、しかしにより負荷に非同期a.cssであることができます現在の時刻はまだスタイルのリソースをロードされている場合は、スクリプトをロードするとき、a.jsが同期実行され、スクリプトのロード操作が知っているブロックされた場合には、ブラウザがなり、特別な処理をエラーかもしれませんスタイルファイルをロード。
上記の解決プロセスが完了すると、ブラウザは解像度の遅延モードのペースとしてマークされ続け、それが全体の分析プロセスの本当の終わりです。loadイベントがトリガされながら、ドキュメントのステータスは、完了するまでに設定されています。
ツリーをレンダリング
浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧，我们知道DOM树为javascript提供了一些列的访问接口（DOM API），但这棵树是不对外的。它的主要作用就是把HTML按照一定的布局与样式显示出来，用到了CSS的相关知识。从MVC的角度来说，可以将render树看成是V，dom树看成是M，C则是具体的调度者，比HTMLDocumentParser等。
Render树的每一个节点我们叫它renderer，其由下列类型的基础类构造。
class
RenderObject{
virtual
void
layout();
virtual
void
paint(PaintInfo);
virtual
void
rect repaintRect();
Node* node;
//the DOM node
RenderStyle* style;
// the computed style
RenderLayer* containgLayer;
//the containing z-index layer
}
|
DOM树与Render树
可以这么说，没有DOM树就没有Render树，但是它们之间可不是简单的一对一的关系。我们已经知道了render树是用于显示的，那不可见的元素当然 不会在这棵树中出现了，譬如<head>，您还能想到哪些呢？除此之外，diplay等于none的也不会被显示在这棵树里头，但是 visibility等于hidden的元素是会显示在这棵树里头的，可以自己想一下为什么。说了这么多render树，我们还没见一下它的真容呢，它到 底会是个什么模样呢？我们看一下图。
与DOM对象类型很丰富啊，什么head,title,div，而Render树相对来说就比较单一了，毕竟它的职责就是为了以后的显示渲染用 嘛。从上图我们还可以看出，有些DOM元素没有对应的renderer，而有些DOM元素却对应了好几个renderer，对应多个renderer的情 况是普遍存在的，就是为了解决一个renderer描述不清楚如何显示出来的问题，譬如select元素，我们就需要三个renderer，one for the display area, one for the drop down list box and one for the button。
上图中还有一种关系未可看出，即renderer与dom元素的位置也可能是不一样的。说的就是那些添加了float:---或者position:absolute的元素，因为它们脱离了正常的文档流顺序，构造Render树的时候会针对它们实际的位置进行构造。
CSS样式
样式来源有下列三种方式
- CSS rules, either in external style sheets or in style elements.
p {color:blue} - Inline style attributes like
<p style="color:blue" />
- HTML visual attributes (which are mapped to relevant style rules)
<p bgcolor="blue" />
一个元素最终经过计算可能匹配到了很多条样式规则，他们之间存在一定的优先顺序，从低到高有：
- 浏览器默认样式--见http://www.iecss.com/
- 用户浏览器个性化偏好设置
- HTML开发者定义的一般样式
- HTML开发者定义的!important样式
- 用户浏览器中个性化设置!important样式
样式优先级计算公式
- count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a)
- count the number of ID attributes in the selector (= b)
- count the number of other attributes and pseudo-classes in the selector (= c)
- count the number of element names and pseudo-elements in the selector (= d)
具体可见http://www.w3.org/TR/CSS2/cascade.html#specificity
布局与显示
上面确定了renderer的样式规则后，然后就是重要的显示因素布局了。当renderer构造出来并添加到render树上之后，它并没有位置跟大小信息，为它确定这些信息的过程，我们就称之为布局。
从页面开发角度说，拿到一个HTML页面，明确了页面要实现的功能之后，首先开始动手做的就是布局啦，其它譬如背景图片，字体，文字啦之类的样式问题还好 说，布局却是让人有点感觉经常与其打交道却经常的感觉驾驭不了它，至于界面逻辑或者交互设计虽然也比较难但是至少能让人摸着头脑，所以有必要细说一下这个 布局。平时大家浏览网页遇到好看的布局也一定要多花点时间去分析分析它，非前端开发人员多掌握一点界面设计或者交互设计之类的知识未尝不是一件好事，更何 况现在好多情况都是一套软件产品从设计到出品整套制造过程都要参与，很有收缩性。
浏览器进行页面布局基本过程是以浏览器可见区域为画布，左上角为（0,0）基础坐标，从左到右，从上到下从DOM的根节点开始画，首先确定显示元素的大小 跟位置，此过程是通过浏览器计算出来的，用户CSS中定义的量未必就是浏览器实际采用的量，灵活的布局方式却是靠经验以及设计领域相关经验等得来的。如果 显示元素有子元素得先去确定子元素的显示信息，如果页面布局完后有改动能不整体重新布局就不重新布局，当然由于脚本或者用户操作也有可能随时会被重新布 局，那就回到了本段路起点。
高度和宽度
显示元素的高度(height)，宽度(width)的确定。元素的高度由子元素遍历计算得来，而宽度由本身确定。
最终所有显示元素被构建成一个盒子类似的东西构成了整个布局效果，盒子模型效果图如下：
Box Model详细描述可见http://www.w3.org/TR/CSS2/box.html
BOX TYPE
每个显示元素上还有一个重要属性就是display及z-index，display不同的类型使用不同的渲染方式，即使没有手动去指定它本身也会存在一个默认值，具体默认值情况请参见 http://www.w3.org/TR/CSS2/sample.html.
block类型的盒子具有自己的一块区域，里头养了很多inline box。各个block box按上下顺序部件，各个inline box按从左到右顺序布局，如果宽度不够会自动换行。
定位方案,坐标值(left,top)
Normal--定位基于基本布局过程，从左到右，从上到下递增实现。
Float--脱离正常文档流，居最左或居最右。
Absolute--其位置信息由用户指定。
有了size（width,height),position(left,top),box type(display:none,inline,block..e.t.c)一个显示元素基本就最终确定了。
布局完成后，浏览器将结果渲染出来，最终我们看到了眼前的页面。
参考：
- http://www.cnblogs.com/mirror/archive/2013/04/05/3000517.html
- 前端必读：浏览器内部工作原理
转载于:https://www.cnblogs.com/JoannaQ/archive/2013/04/07/3003309.html