ブラウザの環境概要

6904 ワード
JavaScript 先端 JavaScriptを学ぶ
JavaScriptコードをウェブページに埋め込む方法
スクリプトタグ:コード埋め込みページ
<script>
  console.log('Hello World');
script>
このラベルのtype属性はスクリプトタイプを指定するために使用されますが、scriptはJavaScriptコードを参照しているので、書かなくてもいいです.type属性は2つの値があります.
  • text/javascript:標準値
  • appication/javascript:比較的新しいブラウザに対して、この値を設定することを提案します.
    • type属性の値が上記の2つでない場合、ブラウザはscriptのコードを実行しない.
    <script id="mydata" type="x-custom-data">
  console.log('Hello World');   //    
script>
    text属性を使って内容を読み取ることができます.
    document.getElementById('mydata').text
// "
//   console.log('Hello World');
// "
    スクリプトラベル:外部スクリプトを読み込みます.scriptタグは、Src属性によって外部のスクリプトをロードする.スクリプトファイルに英語以外の文字がある場合は、charset属性で符号化を明記する必要がある.
    <script charset="utf-8" src="example.js">script>
    外部スクリプトをロードする方法とコードブロックを直接追加する方法は混用できません.そうでないと、直接追加されたコードブロックは無視されます.
    <script src="example.js">
  console.log('Hello World!');  //console.log    
script>
    scriptタグを使用することができるintegrity属性は、ロードするスクリプトの一貫性を検証し、属性値は外部スクリプトのHashタグ名である.
    <script src="/assets/application.js"
  integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs=">
script>
    イベントのプロパティを使うhtml要素のいくつかのイベント属性によって追加することができます.
    <div onclick="alert('Hello')">div>
    URLプロトコルでonclickタグについては、aプロトコルを使用することができる.
    <a href="javascript:alert('Hello')">a>
    javascript:タグをクリックして、後のa関数を実行します.alertが返した文字列があれば、新しい文書を作成して文字列の内容を示します.
    //javascript:     
<a href="javascript:new Date().toLocaleTimeString();">
  What time is it
a>
    スクリプトラベル
    仕事の原理javascript:タグは通常scriptタグ内の末尾に置かれ、bodyタグを実行するとscriptタグが生成されたことを保証します.複数のDOMタグは同時にダウンロードされますが、実行するときは順次に実行されます.
    defer属性scriptタグにscript属性のスクリプトのダウンロードを防ぐために、内蔵deferコードおよび動的に生成されたdeferタグに対してブロックページレンダリングJavaScript属性を追加することができます.script属性を使用すると、ロードされたスクリプトにdeferを使用してはいけません.
    async属性document.write属性は、ブロック効果を解決することもできます.この属性があるasyncタグは、ダウンロード時にレンダリングをブロックしません.この属性を使用してスクリプトの実行順序を保証できません.script属性のスクリプトがあります.asyncメソッドを使用するべきではないです.一般的に、スクリプト間の依存関係がなければ、document.write属性を使用します.スクリプト間の依存関係がある場合は、async属性が使用される.deferおよびasync属性を同時に使用しても、defer属性が機能しない場合、ブラウザ挙動はdefer属性によって決定される.
    使用プロトコルをロード
    ブラウザのデフォルトasyncプロトコルを使用して、ダウンロードプロトコルを指定できます.
    <script src="https://example.js">script>  //  https    (       )
<script src="//example.js">script>    //
    ブラウザの構成
    ブラウザの核心にレンダリングエンジンとJavaScriptエンジンがあります.
    レンダリングエンジン
    このエンジンの主な役割は、ウェブページのコードをユーザーの視覚で感知できるドキュメントの異なるブラウザにレンダリングエンジンがあることです.
  • http:Firefoxエンジン
  • Gecko:Safariエンジン
  • WebKit:Chromeエンジン
  • Blink:IEエンジン
  • Trident:Edgeエンジン
    • これらはウェブページを処理する時、通常四つの段階があります.
  • 解析コード:EdgeHTMLコード解析HTML、DOMコード解析CSS(CSSOM)
  • オブジェクト合成:CSS Object ModelおよびDOMをレンダリングツリー(CSSOM)に合成する
  • レイアウト:レンダリングツリーのレイアウトを計算する(render tree)
  • 描画:レンダリングツリーをスクリーン
    • に描画する.
    上の4ステップの実行順序は厳密には順番に実行されません.
    流れと描き直し
    レンダリングツリーがウェブページのレイアウトに変換され、「レイアウトフロー」と呼ばれる.レイアウトがページに表示されているこのプロセスを「描画」といい、この段階を「再描画」といいます.したがって、再ストリームは必ず再描画を引き起こします.しかし、再描画は必ずしも再ストリームを引き起こすとは限りません.
    JavaScriptエンジンlayoutエンジンは、ウェブページのJavaScriptコードを処理するためのものです.JavaScriptは解釈型言語です.実行速度を上げるために、ブラウザはJavaScriptをある程度コンパイルして、実行速度を上げるための中間コードを生成します.また、仮想マシンをJavaScriptエンジンにもなります.
    Javascriptの静的属性と原型の属性について話します.