TIL10. HTML、CSS、DOM

6128 ワード
CSS JavaScript html テキストリンク

Today I Learned


今日は、HTML、CSS、Javascriptを使用してDocumentオブジェクトモデルを簡単に操作する方法を学びました.多くの理論上のことは学んだことがないので、今日は整理してから過ごすことにしました.

HTML(Hypertext Markup Language)


HTMLはHyperTextタグ言語の略で、Webドキュメントを表すタグ言語です.

ユーザーが論理を計算して実行するのではなく、ドキュメントの構造を寸法で表すことができます.HTMLもそうです.したがって、HTMLはプログラミング言語ではありません.

HTML 5の前と今


完全な初期HTMLは本当にドキュメントの構造しか表現できません.しかし、時代の発展に伴い、ウェブページにスタイルが追加され始め、私たちが今見ている動的なウェブサイトになりました.
以前はhtmlドキュメントでスタイルに関連するタグを使用していました.しかし、この点が蓄積するにつれて、ドキュメント構造はますます複雑になり、どのドキュメント構造を担当し、どのドキュメントスタイルを担当するかを見つけるのは難しい.したがって,HTMLは文書の構造のみを担当し,CSSは文書の様式を担当する.以前に使用したスタイルラベル<s></s>、<b></b>などは使用されなくなったり、他の方向に置き換えられたりしています.
HTML 5規格の拡張に伴い、HTMLはより多くのことをすることができます.
  • <video>:ソースを使用してビデオを再生できます.
  • <audio>:ソースを使用してオーディオを再生できます.
  • <canvas>:ダイナミックペイントまたはゲーム(!)作成できます.
    • 驚いたのか?
    また,従来のhtmlよりも構造化された設計が可能である.(semantic markup)
    Semantic markupを支援するラベル:
  • <section>
  • <nav>
  • <head>
  • <aside>
  • <footer>
  • ...
    これらのラベルはdivと同様に、領域に影響を与えることはありませんが、開発者がWebページをより構造的に設計するのに役立ちます.

    ちょっと動く

    • CSS(Cascading Style Sheet)


    上のますます複雑なhtmlドキュメントを簡略化するためには、CSSという方法でドキュメント構造と設計を分ける必要があります.
    /**
 * selector: 클래스명, 아이디, 태그 등 내가 스타일을 정의할 곳
 * property: 어떤 스타일을 정의할 것인지
 * value: property를 얼마나 적용할 것인지
 */
.classname {
  property: value;
}
    CSSはコレクター、property、値からなる.ただし、必ずしも.cssファイルに作成されるわけではありません.方法は次のとおりです.
  • .cssファイルを作成し、htmlファイルにインポートします.
  • htmlの<style></style>タグ内部定義cssスタイル
  • htmlタグ行内スタイル属性を使用<div style="background-color:red; width:500px; height:500px"></div>
    • 優先順位もあります.優先順位は3,2,1です.また、同じ優先度であれば、後で作成したcssが適用される.
    html、cssレイアウト、特定の状況で中央に並べ替える方法などは本当に基本中の基本であり、最も重要であり、必ずケースを覚えておきましょう.

    css selector


    cssはコレクターでdomに関連するものを使用することができます.tag名、クラス名、idを使用できます.

    使用方法

    /* tag를 셀렉터로 사용하기 */
p {
  font-size: 20px;
}

/* class명을 셀렉터로 사용하기 */
.classname {
  property: value;
}

/* id명을 셀렉터로 사용하기 */
#id {
  property: value;
}
    優先順位は、#id>.class>tag.2つのプロパティの値が競合する場合、同じ優先度で作成したcssが適用されます.htmlでは、idは1回しか宣言できませんが、クラスは他のタグの複数回の宣言に問題がありません.そのため、通常、クラス名を使用してグループ化してスタイルを定義します.

    DOM(Document Object Model)


    現実世界に存在するものを特定の角度から見て対象とし,抽象化,モデリングと呼ぶ.このような過程を経て作られたのが模型です.
    同様に、抽象概念のhtmlドキュメントをタグとしてモデリングし、オブジェクト形式で作成したDocument Object Modelである.

    DOMの構造


    DOMは木の構造であり、DOMの木を形成する.したがって,ノードをブラウズする際には,ツリー電位巡回アルゴリズムを用いてオブジェクトをブラウズすることができる.以下の4つのノードから構成されます.
  • document:親ノードがなくルートノードです.
  • element:要素ノード.htmlタグを表示します.
  • attribute:要素ノードにアタッチされているノードは、サブノードではありません.
  • text:要素を表すテキストは、サブ要素が存在しないため、常にleaf node|である.

    • DOM Treeのレンダリングプロセス

  • ブラウザはhtmlの読み取りと解凍後、DOM Treeを構成します.
  • ブラウザは、スタイルシートを読み取り、グループ化し、CSSOM Treeを構成します.ステップ1およびステップ2は、Attachmentステップと称される.
  • DOM TreeとCSSOM Treeを組み合わせてRender Treeを構成する.

    レンダーツリーを作成する手順

    • 操作DOM


    DOMの操作はJavaScriptを使用します.実際、JavaScriptを学ぶ最大の理由です.Javascriptを使用してサーバを作成できるようになりましたが、javascriptの誕生はDOMを操作するためです.
    しかし,最初に操作可能なDOMの種類は少なく,formの検証などの単純な論理でしか使用できない.
    上にはDOMツリーの形成過程が記述されており、3段階の過程を経てレンダリングされ、私たちが見ることができるページになります.DOMが変更されると、この3つの段階のプロセスが再び発生します.たとえば、1つのDOMが1万回変更されると、1つのDOMを置き換えるために1万回のレンダリングが発生します.レンダリングプロセスは、ブラウザが最適化できるのに十分な高速さにもかかわらず、コストがかかるプロセスです.最近では、Virtual DOMのフレームワーク(またはライブラリ)が様々な理由で導入されている.

    Virtual DOM


    仮想DOMはJavaScriptオブジェクトとしてDOMを表す.既存のDOMの内部に変更がある場合は、すぐにレンダリングされますが、仮想DOMはこれらの変更をまとめてレンダリングします.

    仮想DOMは常にDOMを操作するより良いですか?


    答えは「NO」です.
  • レンダリングは集約されますが、ページを描くDOMが多いほど速度が遅くなります.実際のDOMを表示するために仮想DOMをブラウズする必要があるため、ブラウザーの表示回数は減少するが、仮想DOMのブラウズ回数は増加する.
  • DOMはメモリに格納する必要があるため、より多くのメモリが消費されます.

    • なぜ仮想DOMを使うの?


    メンテナンスが容易です.一般的には、速度が十分速いからです.

    の最後の部分


    今日、ブラウザのレンダリングプロセスとhtml、cssがどのように構成されているか、DOMの定義と仮想DOMの違いについて学びました.フロントエンドでは、JavaScriptの役割はDOMを処理する核心であるため、DOMの操作方法とレンダリングプロセスを理解し、スキップすることは不可欠な部分のようです.また、JavaScriptでDOMを操作することを熟知するために、私は練習を続けて自分でやります.

    ソース


    https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko
    solr 4ハイライトクエリの例:
    言語Design Pattern-interface