フロントエンド開発の基本的な知識

フロントエンド開発の概要に関する基本的な知識

---

1. HTML

1. 一般的に使用されるメタヘッダー

HTMLのメタタグは常にヘッドタグに配置されます。これは、ページに関する一部のメタデータ
の属性を定義するために使用されます。メタタグの2つの属性属性名=属性值は、
名前の形式で定義されます：名前（ページの説明情報）、http-equiv（ httpヘッダー情報）

1. 名前属性
   （1）キーワード（キーワード）
   （2）説明（ページコンテンツの説明）
   （3）作成者（作成者）
   （4）ビューポート（ビューポート）

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">

2. http-equive属性
（1）content-type（ページ文字セットの設定）
（2）期限切れ（期間、Webページの有効期限）
（3）プラグマ（キャッシュモード）
（4）更新（リフレッシュ）
（5 ）Set-cookie（cookie設定）
（6）window-target（表示ウィンドウ設定）

2. タグのセマンティクスを理解する

（1）明確なページ構造
（2）チームの開発と保守の促進
（3）より多くのデバイスのサポート（例：スクリーンリーダー）
（4）メリットSEO

DIVおよびスパンセマンティックタグを使用せずにできるだけ;時明白意味論的、またはデフォルトで上下ピッチpので、Pが可能で、DIV pを使用することができる、それは互換性の特別な端末のために有利である。
純粋使用しませんb、font、uなどのスタイルタグは、代わりにcss設定を使用します。強調する必要のあるテキストは、strongタグまたはemタグに含めることができます（ブラウザのプリセットスタイル、CSSを使用してそれらを使用せずに指定できます）、強いデフォルトスタイルは太字（bは使用しない）、emは斜体（i以外）、
使用フォームでは、キャプションはキャプション、ヘッダーはヘッド、ボディはtbodyで囲まれ、テールはtfootで囲まれる必要があります。ヘッダーと一般セルを区別する必要があり、ヘッダーはthで、セルはtdです。
フォームフィールドはフィールドセットラベルでラップされ、凡例ラベルはフォームの目的を説明するために使用されます。各入力ラベルに対応する説明テキストはラベルを使用する必要がありますそして、入力のid属性を設定し、ラベルタグで= someldを設定して、説明テキストを対応する入力に関連付けます。
HTML5はいくつかのセマンティックタグを追加しました

3. HTML 5の新機能

ペイントキャンバス要素の
オーディオ、ビデオタグ
localStorage（ローカルデータの永続的なストレージ。ブラウザが閉じている場合でも、データも存在します）
一連のセマンティックタグ：ヘッダー、ナビゲーション、記事、セクション、
サイダー、フッター線形グラデーション（グラデーション）
ボーダーボーダー半径
シャドウ

4. HTMLレンダリング分析の知識（例：CSSが前に置かれ、JSが後ろに置かれる理由、並列ロードと逐次実行を理解する方法）

1. CSSは、headタグであるHTMLのbodyタグの前に配置する必要がある
   ため、ブラウザは最初にCSSスタイルを読み取り、スタイルファイルを準備します。次に、bodyタグの構造コンテンツを読み取ります。このとき、DOM要素のレンダリング中にスタイルが追加されます。
   CSSを後ろに置くと、白い画面の問題（IE、Chrome）が発生するか、スタイルが点滅しない（Firefox）可能性があります。
2. JSはHTMLの後ろ、つまり本文の終了タグの前に配置する必要があります。
   JSをロードすると、他のリソースのダウンロードやページのレンダリングなど、他のすべてのアクティビティがブロックされるためです。ユーザーのネットワーク速度が非常に遅い場合、またはJSファイルが大きすぎる場合、読み込み時間が比較的長くなる可能性があります。現時点では、ページを常にブラッシュアウトできるとは限らず、ユーザーエクスペリエンスが非常に低下する可能性があります。したがって、それを後回しにするには、最初にHTMLとCSSをロードし、静的ページが表示された後、JSを読み取ってロードし、ページを移動させます。
3. CSSブロッキング：CSSがJSの前に配置されると、CSSブロッキングが発生します（CSSとJSの順序をHTMLで維持するために、ブラウザーはCSSのロード後にJSをロードし、JSのロードは他のリソースのダウンロードをブロックしますCSSの特性上、CSSブロッキングが発生します
   。JS がCSSの前に配置されている場合、CSSブロッキングはありません）4.JSブロッキング：JSがどこに配置されていても、他のリソースのダウンロードをブロックします。違いは、HTMLのヘッドタグに配置すると、他のリソースの読み込みとページのレンダリングが妨げられ、HTMLの背後、つまり本文の終了タグに配置すると、後続のリソースの読み込みのみがブロックされることです。

---

2. CSS

1. より良いCSSを書く方法、

（0）リセット（初期化スタイルシート）

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }  

（1）レベルを深くしすぎないようにする場合は、
通常3レベルを超えないようにします。階層が深すぎる場合、クエリ> DOMノードは時間とリソースを消費し、ブラウザのレンダリングページ>のプロセスでは、DOMツリーとCSSOMツリー間の関連付けが高くなり、CSSコードは読みにくくなります。
（2）IDを使用する場合とクラスを使用する場合
idには独立したスタイルの要素のみが適しています。複数の要素が所有する同じスタイルの要素は>クラスに適しています。
（3）組織を分割する方法
CSSの外部スタイルファイルを使用して、inline>スタイルと内部スタイルの使用を減らします。

2. ボックスモデル

ボックスモデルには、IEボックスモデルとW3Cボックスモデル（標準ボックスモデル）があります。
それが何であれ、コンテンツ（コンテンツ）、パディング（マージン）、ボーダー（マージン）、マージン（マージン）の
違い：
W3Cボックスモデルでは、要素の幅はコンテンツ
IEボックスの幅を指します。モデルでは、要素の幅は（コンテンツの幅+両側のパディングの幅+両側のボーダーの幅）を参照します

box-sizingプロパティを設定することで、ボックスモデルの要素サイズの計算方法を決定できます

/* box-sizing 的默认值是content-box。
尺寸计算公式：width = 内容的宽度，height = 内容的高度。*/
。contentBox{
	box-sizing: content-box;
}
/* 推荐使用border-box。
width = border + padding + 内容的  width，
height = border + padding + 内容的 height。*/
.borderBox{
	box-sizing: border-box;
}

3. 
   CSS3アニメーションなど、CSS3 （1）の非常に一般的な知識

（2）柔軟なレイアウト

/* 弹性盒子的一般使用方法 */
.container{
	display: -webkit-flex;
	display: flex;
}
.flex1{
	-webkit-flex: 1;
	flex: 1;
}
.flex2{
	-webkit-flex: 2;
	flex: 2;
}

/* 弹性盒子实现元素居中 */
.center{
	 height: 100px;
	-webkit-align-item: center;
	align-item: center;
	-webkit-justify-content: center;
	justify-content: center;
}

---

3. JavaScript

1. イベントモデル

JSには3つのイベントモデルがあります。DOM0イベントモデル（元のイベントモデル）、DOM2イベントモデル、IEイベントモデル
（1）DOM0イベントモデル
機能：

• インシデントは広がりません。イベントがトリガーされると、イベント処理関数がすぐに実行されます。
• 1つのタイプのイベントに対して1つのイベントハンドラーのみをDOM要素にバインドできます。2つのイベントハンドラーが同じイベントにバインドされている場合、後者のイベントハンドラーが前のイベントハンドラーを上書きします。
• イベントハンドル名：on +イベント名

<div id="myDiv" onClick="alert('hello world')">myDiv</div>

document.getElementById('myDiv').onClick = function(e){
	alert(e);
};

// 移除事件处理程序
document.getElementById('myDiv').onClick = null;

（2）DOM2イベントモデルの
機能：

• 複数のイベントハンドラーをDOM要素の同じイベントにバインドできます。
• イベントが広がります
• メソッド：
  [dom] .addEventListener（[event]、[function]、[true / false]）->バインドイベントリスナー
  [dom] .removeEventListener（[event]、[function]、[true / false]）- ->イベントリスナーを削除します
  event.stopPropagation（）->イベントバブリングイベントをキャンセルします
  。event.preventDefault（）->イベントのデフォルトの動作をキャンセルします
  DOM2事件模型中，事件传播被分为3个阶段。ターゲットステージでステージをキャプチャします（特定でない要素-「特定のターゲット要素」） （ターゲット要素に到達する）、バブリングステージ（特定の要素-「非特定の要素」）
  DOM2のメソッドの3番目のパラメーターは、キャプチャステージでイベントハンドラーを呼び出すかどうかを指定します。デフォルトはfalseです。つまり、イベント処理関数は、バブルフェーズ中に呼び出されます。
  （3）IEイベントモデルの
  機能：
• DOM要素は、イベントの複数のイベントハンドラーをバインドできます。
• イベントハンドラーの呼び出しは、イベントバブリングフェーズです。
  メソッド：
  [dom] .attach（[event]、[function]）->バインディングイベント
  [dom] .detach（[event]、[function]）- >イベントを削除

2. 閉鎖

参照：別の関数のスコープ内の変数にアクセスできる関数。クロージャーを作成する最も簡単な方法は、関数内に別の関数を作成することです。
特徴：

• 内部関数は外部関数の変数にアクセスできますが、その逆はできません。
• 返された内部関数は状態を保存します。
  用途：
  最大2つの用途があります。1つは関数内の変数を読み取ることで、もう1つはこれらの変数の値を常にメモリに保持することです。
• 実行を遅らせる関数を返します。
• マルチパラメーター関数を単一パラメーター関数に単純化します。
• スコープチェーンを突破し、関数の状態を保存します。
• …
  使用闭包的注意点
  1）クロージャは関数内の変数をメモリに保存し、メモリ消費は非常に大きいため、クロージャを悪用することはできません。そうしないと、Webページのパフォーマンスの問題が発生し、IEでメモリリークが発生する可能性があります。解決策は、関数を終了する前にすべての未使用のローカル変数を削除することです。
  2）クロージャーは、親関数の外部の親関数の内部変数の値を変更します。したがって、親関数をオブジェクトとして使用し、クロージャをパブリックメソッドとして使用し、内部変数をプライベート値として使用する場合は、次のことに注意してください。親関数の内部変数の値をランダムに変更します。

3. 試作チェーン

各インスタンスオブジェクト（オブジェクト）には、プロトタイプオブジェクト（プロトタイプ）を指すプライベートプロパティ（プロトと呼ばれる）があります。プロトタイプオブジェクトには、オブジェクトのプロトタイプオブジェクトがnullになるまで、レイヤーごとに独自のプロトタイプオブジェクトもあります。定義上、nullにはプロトタイプがなく、このプロトタイプチェーンの最後のリンクとして機能します。

JavaScriptのほとんどすべてのオブジェクトは、プロトタイプチェーンの最上位にあるObjectのインスタンスです。

4. ブラウザの分析レンダリング原理

簡単に：

• HTMLタグを解析してDOMツリーを生成します。
• CSSルールを分析し、CSSルールツリーを生成します。
• JSファイルを解析し、CSSOM APIおよびDOM APIに従ってCSSルールツリーおよびDOMツリーを操作します。
• DOMツリーをCSSルールツリーに関連付けて、レンダリングツリーを作成します（非表示のノードがレンダリングツリーから削除されます）。
• レンダリングツリーのノードの幾何学的構造（位置、サイズなど）を計算します（レイアウトとリフローのプロセス）。
• オペレーティングシステムのネイティブGUIのAPIを呼び出して、ページをレンダリングします。

ブラウザーの大きなワークフロー：
[外部画像の転送に失敗しました。ソースサイトに盗難防止チェーンメカ​​ニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-fBEYpcSA-1587351247775）（https://coolshell.cn/wp-content/uploads /2013/05/Render-Process-768x250.jpg）]
参照記事：参照記事

5. DOMツリー、レンダリングツリー、再配置再描画、レイヤードレンダリング、DOM操作が多すぎるとパフォーマンスに影響する理由など

（1）DOMツリー：DOMはHTMLおよびXMLドキュメント用のAPIです。DOMは、任意のHTMLドキュメントとXMLドキュメントを階層ノードツリーとして記述できます。
DOMを操作するいくつかの一般的な方法：

document.documentElement();
document.head();
document.body();

[context].querySelector();
[context].querySelectorAll();

document.getElementById();
[context].getElementsByTagName();
[context].getElementsByClassName();
[context].getElementsByName();

（2）レンダリングツリー：
一般的に、ブラウザによるページファイルの解析とレンダリングのプロセスでは、ファイルが解析された後、DOMツリーとCSSルールツリーが関連付けられ、後続のページレンダリングに使用されるツリーが構築されます。ツリーはレンダリングツリーです。

• ヘッダーや表示などの一部のノードのため、レンダリングツリーはDOMツリーと同等ではありません。レンダリングツリーに配置する必要はありません。
• CSSルールツリーは主にマッチングを完了し、レンダリングツリーの各ノード（つまり、DOMノード）にCSSルールをアタッチするために使用されます。DOMノード+ CSSルール=レンダリングツリーのノード、つまりフレーム。

（3）
再描画と再配置：再描画（再描画）：画面の一部を再描画する必要があります。たとえば、要素のCSS背景色は変更されましたが、要素の幾何学的サイズは変更されていません。
リフロー（レイアウト/再配置）：要素の幾何学的サイズが変更され（レンダリングツリーの一部またはすべてが変更され）、再検証および計算する必要があることを意味します。HTML的布局是基于流式布局的，所以，如果某元素的几何尺寸发生了变化的话，就会需要重新布局，这也就是 reflow
ページが再描画または再配置される状況はいくつかあります。

• DOMノードの追加、削除、変更。
• DOMの場所を移動します。
• CSSスタイルを変更します。
• ローリングウィンドウ
• ページのデフォルトのフォントを変更します。
• …

/* 触发重排 reflow */
display: none;

/* 触发重绘 repaint */
visibility: hidden;     

（4）レイヤードレンダリング：

（5）DOM操作が多すぎるとパフォーマンスに影響する理由：
DOM操作はブラウザページの再描画または再配置をトリガーしますこれら2つの操作は、ブラウザのパフォーマンス、特に再配置に非常に悪影響を及ぼします。

---

4. HTTP

1. 一般的なHTTPステータスコード

（1）1xxニュース

• 100クライアントはリクエストを送信し続けることができます

（2）2xx成功

• 200リクエストは正常に処理され、リクエストされたリソースも返されました
• 204コンテンツがありません。リクエストは正常に処理されましたが、コンテンツが返されません

（3）3xxリダイレクト

• 300要求されたリソースは複数のアドレスから取得できます
• 301リダイレクト、リソースは完全に削除され、クライアントはURLを介してリソースにアクセスし続ける必要がなくなります
• 302リダイレクト、リソースは一時的に削除され、URLは将来も使用される可能性があります
• 303他を参照してください。要求されたリソースは別のURIにあります。GETを使用してリソースを取得する必要があります
• 304は定義されていません。ブラウザはローカルキャッシュを使用できます

（4）4xxクライアントエラー

• 400不正な要求、クライアントから送信された要求を理解できません
• 401無許可、送信された要求にHTTP認証情報が必要であるか、認証が失敗したことを示します
• 403禁止、サーバーはサービスの提供を拒否しています
• 404が見つかりません、リソースが見つかりません

（5）5xxサーバーエラー

• 500内部サーバーエラー、サーバー内部エラー
• 503サーバーが利用できません。サービスは一時的に利用できません

2. 異なるリクエストタイプの違い

（1）GETリクエスト
サーバーにリソースをリクエストし、サーバーからデータを取得します。
（2）
データをサーバーに送信するPOST要求。
（3）PULLリクエストは
データをサーバーにプッシュします。送信されるデータの量は通常POSTリクエストよりも多くなります。
（4）
サーバーへのデータを更新するPUT要求。PUTリクエストで既存のリソースのIDと新しいエンティティをサーバーにアップロードして、リソースを更新します。
（5）DELETEリクエスト
サーバー上の指定されたリソースを削除します
（6）HEADリクエスト
HEADリクエストはGETリクエストに似ていますが、対応するヘッダーのみを返し、特定のレスポンスボディはありません。
（7）OPTIONSリクエスト
OPTIONSを使用すると、クライアントはサービスでサポートされているリクエストメソッドをリクエストできます。対応する応答ヘッダーはAllowで、サポートされているメソッドが非常に簡潔にリストされています。以下は、サーバーがOPTIONS要求を正常に処理した後の応答の内容です。
許可：HEAD、GET、PUT、DELETE、OPTIONS
（8）CONNECT要求は、
主にリソースへのネットワーク接続を確立するために使用されます。接続が確立されると、200ステータスコードと「Connectioin Established」メッセージで応答します。