1. 学習記事
2.JS
3. 手書き
- 1.instanceof の基本的な実装原則、instanceof を手動で実装する
- 2.手書きバインド機能
四.Vue
5. CSS
6. フロントエンドエンジニアリング
- 1. ViteとWebpackの違い
7. ブラウザ
8. パフォーマンスの最適化
9. アルゴリズム
10. 言語ゲーム

1. 学習記事

興味のある学生はこの記事をチェックしてください、優れた記事は随時更新されます
フロントエンドの優れた記事集では
主に開発時に定義される基本仕様を紹介します
フロントエンド開発の命名規則は
主に新機能を紹介しますVue3
. x の比較

2.JS

1. クロージング

意味: クロージャは関数であり、2 つの関数が互いにネストされており、内部関数はクロージャ条件を形成するためのクロージャです。短所: ローカル変数が
メモリ内に常駐するため、メモリリークが発生しやすくなります。長期間リリースされない場合、それは容易ではありませんガベージコレクションメカニズムによるリサイクル使用
シナリオ:
1. setTimeout
2. コールバック
3. 関数アンチシェイク
4. タイマー

function test(){
    
    
  let name='123';
	function aa(){
    
    
	console.log(name);
}
}

2. ディープコピーシャローコピー | ディープクローンシャロークローン

浅いコピーは同じメモリアドレスのままで、深いコピーは新しいブロックを開きます。
浅いコピー

つまり、ある変数が別の変数に代入され、一方の変数の値が変化し、ソースオブジェクトの変更に応じて両方の変数の値も変化することをシャローコピーと呼びます。

浅いコピーメソッド Object.assign(target,sources)

ディープコピー

新しくコピーされたオブジェクト内のすべてのデータは独立して存在し、ソースオブジェクトが変更されても変更されません。

JSON関数JSON.parse(JSON.stringify(a))を使用した再帰コピーとディープコピー

浅いクローン

参照変数にはメモリアドレスが格納されているため、コピーしています。実際には、同じメモリ部分が後で操作され、同じ配列内容になります。

ディープクローン

クローン作成時に属性の型が参照変数であるかどうかを判断し、参照変数である場合は再帰的手法を使用してレイヤーごとに自身をコピーさせます。

3. ES5とES6の違いと特徴

ES5
1. Strict モード、一部の使用を制限、「use strict」
2. Array は、every、some、forEach、filter、indexOf、map、isArray およびその他のメソッドを追加します。
3. Object は、Object.defineProperties、Object.freeze、Object.create およびその他のメソッド 4.
パッケージ
ES6
をインポートする必要があります1. ブロックレベルのスコープ let const
2. 文字列テンプレート `test ${name}'
3. モジュールモジュールはロードおよびエクスポートするように設定できます
4. プロキシはプロキシを使用してオブジェクトの操作を監視します
5. import インポートパッケージ
6. アロー関数
7. 分解
8. スプレッド演算子

4. JSのデータ型と違い

基本データ（値）の型文字
列、数値、ブール型、Null、未定義、シンボル
参照データ型
オブジェクト、配列、
関数値型と参照型の違い
(1) 格納場所が異なります。
① 値型変数と参照型変数は、スタックメモリに格納される
② ただし、参照型の変数値はヒープメモリに格納される

(2) コピー方法が異なる
① 値型の変数の直接代入は、var a = のようなディープコピーとなる10; var b = a; then a の値 b にコピーされ、変更された b の値は a に影響を与えません ② 参照
型の変数の直接代入は、実際には参照を渡しているだけであり、浅いコピーである

5. Jsの精度の問題

解決策: 小数を整数 (乗数) に変換し、それを元の倍数 (除算の倍数) に戻します。例:
(0.1 * 10 + 0.2 * 10) / 10 == 0.3 // true

この記事を参照することをお勧めします https://www.cnblogs.com/goloving/p/7712742.html

6. プロトタイプとプロトタイプチェーン

プロトタイプ:
すべての関数には特別な属性プロトタイプ (プロトタイプ) があります。プロトタイプ属性は、オブジェクト (プロトタイプオブジェクト) へのポインタです。プロトタイプオブジェクト内のメソッドとプロパティは、関数のインスタンスによって共有できます。いわゆる関数インスタンスとは、関数をコンストラクタとして作成されたオブジェクトを指し、これらのオブジェクトインスタンスはコンストラクタのプロトタイプのメソッドを共有することができます。
プロトタイプチェーン:
プロトタイプチェーンは、参照型 (オブジェクト) の属性を見つけるために使用されます。属性の検索はプロトタイプチェーンに沿って順番に実行されます。プロパティが見つかった場合、検索は停止され、対応する操作が実行されます。それ以外の場合は、プロトタイプチェーンに沿って最後まで順番に検索されます。一般的なアプリケーションはオブジェクトの作成と継承です。

プロトタイプとプロトタイプチェーンの 4 つのルール
1. 自由に拡張可能な属性
2. どちらも通常のオブジェクトである暗黙的なプロトタイプ _proto_ を持っています
3. 暗黙的な _proto_ はその明示的なプロトタイププロトタイプを指します
4. 現在のオブジェクトの特定の属性が存在しない場合このような値を指定すると、_proto_ のプロトタイプに自動的にドロップダウンされ、最終的な null が検索されます。

7. プロトタイプチェーンの継承

参考記事：jsで継承を実装する4つの方法

プロトタイプチェーンの継承(不具合):
不具合1: Zi.prototype.constructorとZiの関係が切れる
不具合2: プロトタイプチェーン上の参照型データが全インスタンスで共有されてしまう

コンストラクターの継承 (欠陥):
欠陥 1: Fu.prototype のメソッドを継承できない

結合継承 (推奨):
利点: プロトタイプチェーン継承とコンストラクター継承の欠点を解決します。欠点
: Fu のコンストラクターが 2 回呼び出されます。つまり new Fu() が 2 回使用され、プロトタイプチェーンは Fu のコンストラクターを 1 回継承します。インスタンスは一度溶けます

寄生結合継承（推奨）：
特徴：プロトタイプチェーンの浅いコピーを実現するためにObject.create(Fu.prototype)を使用する
メリット：プロトタイプチェーン継承とコンストラクター継承の欠点を解決
デメリット：なし

8. JavaScript の非同期性について話す

以下の4つによく使われます

setTimeout() タイマー

aynsc/待機

約束

コールバックコールバック

9. JavaScriptの動作仕組み

基本概念
JavaScript はシングルスレッドであり、タスクは実行のためにキューに入れられる必要があります。同期タスクはメインスレッドキューに入り、非同期タスクはイベントキューに入り、マクロタスクとマイクロタスクを
実行するためにメインスレッドに入るのを待ちます。コードの実行を理解します。はマクロタスクとして開始されます。マイクロタスクに到達すると、現在のタスクキュー内のタスクが実行されるまでマイクロタスクが順番に実行されます。マクロタスク内のすべてのマイクロタスクが実行されると、次のマクロタスクが実行されます。

10. イベントバブリングとイベントキャプチャ

イベントバブリングの
簡単な概要: 内部から外部へ、
現在のイベントから親、ルート要素 (HTML) まで、要素の特定のタイプのイベントがトリガーされると、その親の同じタイプの時間がトリガーされます。ルート要素でトリガーされるまで、要素もトリガーされます例: Vue の共通 div 内の Button に @click.stop イベントを追加して、バブリングイベントキャプチャ
を防止します簡単な要約:要素が外側から内側にトリガーされると、同じタイプのイベントがトリガーされますルート要素が最初にトリガーされ、イベントソースがトリガーされるまで、子レベルのトリガーに向かって 1 つずつ移動します。

11. null と unfineed の類似点と相違点は何ですか?

同じ点
は、空の変数はすべて false 値、
ブール値はすべて false
null == 未定義は true
違いは、
typeof が null をオブジェクトとして判断し、unknown を未定義
null と判断して数値を 0 に変換することです。 null はオブジェクトです。
未初期化、未定義は初期化されていますが、未定義の代入
null === 未定義は false

12. 基本的なタイプはどこにありますか?

文字列:ヒープに格納され、スタック内の参照アドレス。同じ文字列が存在する場合、参照アドレスは同じです。
数値:小さな整数はスタックに格納され、その他の型はヒープに格納されます。
その他のタイプ:エンジンの初期化時に一意のアドレスが割り当てられ、スタック内の変数には参照のみが格納されます。

一般的な説明:値型はスタック上にあり、参照型、参照はスタック上にあり、変数データはヒープ上にあります。

13. バーチャルドムとは

仮想 dom は JavaScript の抽象データ構造です。仮想 dom が必要な理由は、ブラウザ上で dom を操作するコストが比較的高いためです。頻繁に dom を操作すると、パフォーマンスに問題が発生します。Vue は、事前に仮想 dom を比較することでそれを見つけます。更新する必要がある実際の dom により、dom の操作が軽減されます。

14. クロスドメインの問題を解決する方法

jsonp
websocket
nginx リバースプロキシ

15. tsとjsの違い、長所と短所は何ですか

ts は js のスーパーセットです。つまり、ts でネイティブの js 構文を使用できます。
ts には静的コンパイルが必要です。これにより、強力な型指定とよりオブジェクト指向のコンテンツが提供されます。
ts は、最終的には弱い型指定のオブジェクトベースのネイティブ js にコンパイルしてから実行する必要があります。

3. 手書き

1.instanceof の基本的な実装原則、instanceof を手動で実装する

現在参照されているプロトから、プロトタイプチェーンを層ごとにたどって、対応するプロトタイプを見つけます。見つかった場合は true を返します

function instance_of(L, R) {
    
    //L 表示左表达式，R 表示右表达式 
    var O = R.prototype;   // 取 R 的显示原型 
    L = L.__proto__;  // 取 L 的隐式原型
    while (true) {
    
        
    	if (L === null)      
    	    return false;   
    	if (O === L)  // 当 O 显式原型 严格等于  L隐式原型 时，返回true
    	    return true;   
    	L = L.__proto__;  
    }
}

2.手書きバインド機能

call()、apply()、bind() メソッドの存在は、関数本体内の this のポインティングを変更するためのものです。

call() メソッドと binding() メソッドはそれぞれパラメータを受け取り、apply() メソッドは配列の形式でパラメータを受け取ります。それらの最初のパラメータは this のポインタであり、省略または null にすることができます。

call() メソッドと apply() メソッドはすぐに実行されます。bind() メソッドはすぐには実行されず、関数を返します。関数は変数に格納でき、関数の戻り値は変数を通じて取得できます。

Function.prototype.bind1 = function () {
    
     // 这块不可以使用箭头函数，因为 this 的指向不同
  // arguments 可以获取一个函数的所有参数，arguments 是一个伪数组
  // 使用 Array.from() 方法将 arguments 伪数组转化成数组
  const args = Array.from(arguments)
  // 获取 this 指向取出数组第一项，数组剩余的就是传递的参数
  const _this = args.shift()
  const self = this // 当前函数 fn1.bind(...) 中的 fn1
  return () => {
    
    
    return self.apply(_this, args)
  }
}
 
function fn1(a, b, c) {
    
    
  console.log('this', this)
  console.log(a, b, c)
}
 
const fn2 = fn1.bind1({
    
    x: 100}, 10, 20, 30)
const res = fn2()

参考記事：https://www.cnblogs.com/datiangou/p/10192664.html

四.Vue

1.ビルドプロセスに準拠する

主に解析、最適化、生成を行います。
コンパイルの機能は、テンプレートを解析し、レンダリングされたテンプレートのレンダリング AST を生成することであり、
これは、物の特徴項目をデータの形で記述します。
最初のステップは、解析して、テンプレートの元のテンプレートを受け取り、テンプレートのノードとデータに従ってそれを生成します。対応する AST
最適化の 2 番目のステップでは、各 AST ノードを再帰的に走査し、静的ノードをマークして、どの部分が不要かを比較できるようにします。変更する必要があり、ページが更新されると、DOM のこの部分の比較が削減されます。3 番目のステップの生成では、最初の 2 つのステップが変換されます。完全な
AST を生成し、それをレンダリング文字列関数にアセンブルします。次に、生成は AST ステップを受け取りますステップごとに再帰的に処理し、少しずつ縫い合わせて完成させます。

2.diffアルゴリズム処理

vue2 アルゴリズムと vue3diff アルゴリズムの比較

Vue2.0 では、データが変更されると、新しい DOM ツリーが生成され、以前の DOM ツリーと比較され、異なるノードが検索されて更新されます。ただし、比較プロセスは完全な比較です。つまり、各ノードが相互に比較されます。ただし、一部のノードのコンテンツが変更されないことは明らかなので、それらを比較するには間違いなく時間がかかります。そのため、Vue3.0 では、コンテンツのこの部分が最適化されています。仮想 DOM ツリーを作成するときに、DOM 内のコンテンツが変更されるかどうかに応じて静的タグが追加されます。その後、最後の仮想ノードと比較するときに、静的マークが付いたノードのみが比較されます。

1. コンポーネントが作成および更新されると、Vue は内部更新関数を実行します。この関数は、render 関数によって生成された仮想 dom ツリーを使用して、古いツリーと新しいツリーを比較し、相違点を見つけ、最終的に実際の dom 2 に更新します。差分を比較する処理
を diff といいますが、Vue 内部では patch という関数を使って処理を行っており、比較する際には深さ優先、同レベル比較で比較を行っています。同レベル比較とは、構造をまたいだ比較をしないことを意味します
3. Vue は 2 つのノードが同じかどうかを仮想ノードのキーとタグで判断します
具体的には、まずルートノードを比較し、同じかどうかを判断します次に、古いノードに関連付けられた実 dom の参照を新しいノードにハングし、必要に応じて実 dom のプロパティを更新し、その子ノード配列を比較します。それらが同じでない場合は、すべての dom を再帰的に作成します。新しいノードの情報に従って実際の dom を削除し、同時にハングします。対応する仮想ノードに移動して、古い dom を削除します。
4. 子ノード配列を比較するとき、vue は各子ノード配列に対して 2 つのポインターを使用し、それぞれ先頭と末尾を指し、比較のために中央に近づき続けます。この目的は、実際の dom をできるだけ再利用することです。可能な限り、最小限で、本物の dom を破壊して作成します。同一であればルートノードと同様の比較処理を行い、異なる場合には実ドームを適切な位置に移動する。
5. この再帰的走査は、ツリー全体が比較されるまで続きます。

3. vue の応答性の原則

Vue2.x

ステップ 1: オブザーバーの Object.defineProperty を通じてデータをハイジャックし、ゲッターとセッターをバインドします。
Getter はデータを返し、サブスクライバーを収集するように Dep に通知するために使用されます。
セッターは、新しい値を設定し、データ変更を Dep に通知するために使用されます。
ステップ 2: コンパイルは命令 (v-text、v-html、{ { }} など) を解析し、ページの初期化の準備をします。
ステップ 3: ページを初期化する前に 3 を実行し、ウォッチャーをインスタンス化し、ページにレンダリングされるデータに対応するウォッチャーをバインドします (ウォッチャーのビューを更新するためのコールバック関数があります)。
ステップ 4: データがフェッチされるとゲッターがトリガーされ、ゲッターはページをレンダリングするためにデータを返し、4-1 を実行してデータにバインドされたウォッチャーを収集するように Dep に指示します。その後、Dep は 4 を実行します。ウォッチャーを回収するには-2。
ステップ 5: データが変更されると、セッターがトリガーされ、セッターはデータに新しい値を設定し、5 を実行してデータが変更されたことを Dep に伝え、Dep はデータが変更されたことを Watcher に通知します。、ウォッチャーはコールバックを実行してページを更新します。

Vue3.x では
属性の追加と削除を監視できます。
配列のインデックス値の変化や配列の長さの変化を監視できます。

プロキシオブジェクトを通じてすべてのリクエストがインターセプトされ、モジュールは目的の方法で更新されます。

    let datas = {
    
    
        num: 0
    }
    let proxy = new Proxy(datas, {
    
    
        get(target, property) {
    
    
            return target[property]
        },
        set(target, property, value) {
    
    
            target[property] += value
        }
    })

2 つの違い
vue2 と vue3 の違い
a.defineProperty API の最大の制限は、シングルトンプロパティのみを監視できることです。

Vue2.x の応答性の高い実装は、defineProperty の記述子に基づいており、データ内の属性をトラバース + 再帰し、各属性のゲッターとセッターを設定します。

これが、Vue がデータ内の事前定義された属性にのみ応答できる理由です。Vue で添字を使用して属性の値を直接変更したり、既存のオブジェクト属性を追加したりすることは、セッターでは監視できません。これは、defineProperty の制限です。

b. プロキシ API の監視はオブジェクトに対して行われます

その後、このオブジェクトに対するすべての操作が監視操作に入り、すべての属性を完全にプロキシできるため、パフォーマンスが大幅に向上し、コードが改善されます。
プロキシは、ターゲットオブジェクトの前に「インターセプト」層を設定するものとして理解できます。オブジェクトへの外部アクセスは、まずこのインターセプト層を通過する必要があります。そのため、外部アクセスをフィルタリングして書き換えるメカニズムが提供されます。

c. リアクティブは怠惰です

Vue.js 2.x では、深いプロパティのネストを持つオブジェクトの場合、その内部の深い変更をハイジャックしたい場合は、オブジェクトを再帰的に走査し、 Object.defineProperty を実行して、オブジェクトデータの各レイヤーを応答性にする必要があります。これにより、間違いなく多くのパフォーマンスを消費する

Vue.js 3.x で Proxy API を使用すると、オブジェクト内部の深いレベルのプロパティの変更を監視できないため、その処理方法は getter で再帰的に応答することになります。この利点は、実際にアクセスされる内部プロパティが変更されることです。、単にオンデマンドに応答し、パフォーマンスの消費を削減すると言えます。

4. vue3.x コンパイラの最適化とは何ですか?

ブロックツリーの生成

Vue2.x
データの更新と再レンダリングのトリガーの粒度は、コンポーネントレベルです。単一のコンポーネントは、コンポーネントの vnode ツリー全体をトラバースする必要があります。レンダリング効率の速度は、コンポーネントのサイズに正の相関があります。
コンポーネントが大きくなるほど、 , レンダリング効率が遅くなり
、変更を加えない場合にはノードもトラバースされるため、パフォーマンスが無駄になります。Vue3.x は
コンパイル
フェーズを通じて静的テンプレートの分析を実現し、生成されたブロックツリーをコンパイルします。
各ブロックのみ自身に含まれる動的ノードを追跡する必要があります。
レンダリング効率はテンプレートのサイズに比例しなくなりました。相関関係はありますが、テンプレート内の動的ノードの数と正の相関関係があります。

スロットコンパイルの最適化

Vue2.x は
、親コンポーネントが更新されるたびに子コンポーネントを再レンダリングします。Vue3.x は、動的に生成された子コンポーネントのみを更新します。たとえば、v-if、v-for などを使用すると、スロットが変更され
ます
動的に

差分アルゴリズムの最適化
詳細については、上記の「4.2 差分アルゴリズムの最適化」を参照してください。

5. vuex 変数とグローバル変数の違い

1. ページを更新すると Vuex はデータを失いますが、グローバル変数は失われません
2. 複数の vuex コンポーネントが状態を共有する場合、リアルタイムで更新できますが、グローバル変数は更新できません

6. Vueの通信方法

Provide/Inject 依存性注入props
で発行vuex ref を発行

5. CSS

1.BFCとは

BFC はブロックフォーマットコンテキスト (ブロックフォーマットコンテキスト) です。

特定の条件下でトリガーされる

浮動要素フロート

画面

位置決め要素

オーバーフロー

特性

垂直方向には、要素が上から下に一度に 1 つずつ配置されます

同じ BFC の 2 つの隣接する兄弟ボックスのマージンは重ね合わされます。

BFC は、内部および外部要素の干渉を受けない独立したレイアウトコンテナーです

解決可能な問題

証拠金崩壊問題
この時の証拠金はどのように計算されるのでしょうか？
1. どちらも正の数で、大きい方の値をとります。
2. どちらも負の数で、大きい方の絶対値をとります。
3. 1 つは正で、もう 1 つは負で、2 つの値の合計をとります。

明確な浮遊質問

参考記事：https://blog.csdn.net/qq_44815747/article/details/114164636? spm=1001.2014.3001.5506

2. ボックスモデルとボックスモデルの高さ計算とは何ですか

w3c ボックスモデルの
幅高さ = コンテンツ
IE 奇妙なボックスモデルの
幅高さ = コンテンツ + ボーダー + パディング

要素の実際の高さ= ボーダー+パディング+高さ

3.CSSの縦方向の中央

第一种: flex方式
 body {
    
    
    display: flex;
    align-items: center; /*定义body的元素垂直居中*/
}

body{
    
    
		display:flex;
		flex-direction:column;
	    justify-content: center; /*定义body的里的元素水平居中*/
}

第二种: 绝对定位+transform   //无需知道被居中元素的大小
child{
    
    
	position:absolute;
	top:50%
	transform:translateY(-50%);
}

第三种: padding方式 //给父元素设置相等的上下内边距
#box{
    
    
	width: 300px;
	background:#ddd;
	padding: 100px O;
}
#child{
    
    
	width: 150px;
	height:100px;
	background: orange;
}

4.CSSは0.5pxを実現

通过缩放实现
  .a2{
    
    
      height: 1px;
      background-color: #f00;
      -webkit-transform: scaleY(.5);
      transform:scaleY(.5);
}
通过伪元素实现
  .border {
    
    
        position: relative;
    }
    .border::after {
    
    
        content: " ";
        position: absolute;
        width: 100%;
        height: 1px;
        background: red;
        transform: scaleY(0.5);
    }

5.CSSで横断歩道を実現

CSS プロパティの背景を使用します: liner-gradient

6. フロントエンドエンジニアリング

1. ViteとWebpackの違い

vite は最初にサーバーを起動し、モジュールを遅延ロードします。webpack は最初にファイルをパックしてからサーバーを起動します。

vite は遅延読み込みであるため、最初からページに入るときは遅くなります (ただし無視できる程度)。webpack は最初にパッケージ化されるため、応答が速くなります。

vite ホットアップデートは編集されたモジュールのみを更新し、ネゴシエーションキャッシュに HTTP を使用します。webpack はパッケージ全体を再構築します。

Viteの梱包原理

スクリプトタグがモジュールタイプの場合、ブラウザは get リクエストをサービスに送信し、まず main.js ファイルを見つけ、インポートによって導入されたパッケージを検出し、ブラウザのリクエストをハイジャックすることで、分析のためにリクエストされたファイルをブラウザに返します。

Webpack のパッケージ化原則

1. 徐々に再帰的に依存関係を特定し、依存関係グラフを構築する
2. コードを AST 抽象構文ツリーに変換する
3. 処理コードを AST ステージで取得する
4. AST 抽象構文ツリーをブラウザで認識可能なコードに変換して出力する

7. ブラウザ

ブラウザのアドレスバーに URL が入力され、リクエストが返されるとどうなるか

まず、URL が解析され、DNS システムに従って IP が検索されます。両者は 3 回のハンドシェイクを実行してリンクを確立し、HTML ファイルを要求します。ローカルに HTML キャッシュがある場合は、HTML ファイルがリクエストされます。直接取得しました。

URL を解析する必要がある理由

ネットワーク標準では、URL には文字、数字、一部の特殊記号のみを使用できると規定されているため、エスケープしないとあいまいさが生じ、ブラウザの認識エラーが発生します。

フロントエンドでDNS最適化を実行する方法

前端的dns优化，可以在html页面头部写入dns缓存地址
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

DNS解決プロセス

1. ブラウザに www.baidu.com などのドメイン名を入力すると、オペレーティングシステムはまずローカルホストファイルにレコードがあるかどうかを確認し、レコードがある場合は対応する IP を返します。 2. ローカルホストファイルにレコードがない場合は
、、ローカル DNS をチェックします。リゾルバーにキャッシュがあるかどうかを確認します
。 3. キャッシュがある場合は、コンピュータに設定されている DNS サーバーにアクセスしてキャッシュをクエリします。
4. キャッシュがない場合は、ルート DNS ルートサーバーにアクセスします。次に、どのサーバーが .com を管理しているかを決定します。解決できない場合は、baidu を探します。www.baidu.com の IP アドレスが見つかるまで、com サーバーは解決できるでしょうか。

encodeURIComponent と encodeURI の違いは何ですか

encodeURIComponent はエンコード範囲が広く、パラメータのエンコードに適しており、encodeURI は URL 自体 (locaion.origin) のエンコードに適しています。

http プロトコルの 3 ウェイハンドシェイク

最初のハンドシェイク: ホスト A は、ビットコード SYN=1 の TCP パケットをサーバーに送信し、確認番号 (これは TCP パケットの一部) をランダムに生成します。ホスト B は、A が接続の確立を要求するまで SYN コードを受信します
。 2 回目のハンドシェイク: リクエストを受信した後、ホスト B は確認番号 (ホスト A の seq+1) を A に送信します、syn=1、seq = 乱数 TCP パケット; 3 回目のハンドシェイク: ホスト A は確認番号を受信した後、確認番号を確認します
。正しい場合、つまり、A が最初に送信した確認番号が +1 であるかどうか、およびビットコード ack が 1 であるかどうか。正しい場合、ホスト A は確認番号を再度送信します (ホスト B の seq+1)。 ack=1、ホストB 受信後、seq値を確認し、ack=1であれば接続成功です。

なぜ2回握手をしないのか

2 回目のハンドシェイクでは、ホスト B はホスト A が確認リクエストを受信したかどうかを確認できないため、つまり、B はデータを送信する準備ができているが、A はそれを受信していないため、B を攻撃するのは非常に簡単です。受信、サーバーは掛けやすい

ブラウザキャッシュ

3 レベルキャッシュの原則
1. まずメモリ内を検索し、存在する場合は直接ロードします。
2. メモリに存在しない場合はハードディスク内を検索し、存在する場合は直接ロードします。
3. ハードディスクがない場合は、ネットワーク要求を行います。
4. 要求されたリソースはハードディスクとメモリにキャッシュされます。
キャッシュの分類
1. 強力なキャッシュ
キーワード: Expires: 失敗の絶対時間キャッシュ制御: np-cache または set max-age time
ブラウザがリソースをロードすると、まずヘッダー内の情報に基づいてヒットかどうかを判断します。ローカルキャッシュリソースの強力な、ネットワーク要求操作を実行せずにキャッシュ内のリソースを直接使用します
キャッシュ時刻がキャッシュにヒットしたかどうかを判断する If-Modify-Since フィールドが含まれています。
変更は短時間で行われますが、Last-modify は
ETag 識別子を変更しません。ブラウザーがリクエストを行って ETag が矛盾していることが判明した場合、キャッシュが強力なときに更新されます
。ヒットがない場合、ブラウザーはリクエストを送信します。サーバーはヘッダー内の情報の一部に基づいてキャッシュにヒットするかどうかを判断します。ヒットすると 304 が返され、リソースが更新されていないことがブラウザに通知され、ローカル
キャッシュが使用できるようになりますキャッシュのメリット
1. 冗長なデータ送信が削減されます
2. サーバーの負荷が軽減され、パフォーマンスが大幅に向上します3. クライアントページの
読み込み速度を高速化

参考記事：ブラウザキャッシュを徹底理解する

CSRF攻撃とXSS攻撃

CSRF (クロスサイトリクエストフォージェリ) クロスサイトリクエストフォージェリは、
見覚えのないリンクが Cookie 情報を盗むなど、Web サイト詐欺で一般的です。
解決策:
1. トークン検証
2. リファラー検証。このサイトからのリクエストの受け入れのみが許可され、すべて外部XSS (クロスサイトスクリプティング)を受け入れない
: クロスドメインスクリプティング攻撃
Web サイトに JS および HTML コードを挿入して Web サイトを改ざんする
Vue と React は両方とも Dom に基づいているため、大量の xss を避け
、注意を払うv-htmlの埋め込みjsコードの動作を軽減

8. パフォーマンスの最適化

長いので別記事にしました
vue 最適化 - 1. フロントエンドのパフォーマンス最適化と注意点

9. アルゴリズム

バブルソート

隣接する要素を比較します。最初のものが 2 番目のものより大きい場合は、両方を交換します。
隣接する要素の各ペアに対して、最初の最初のペアから最後の最後のペアまで同じことを実行します。

var arr=[1,35,21,2,565,888,96554,1222];   //先把他们放到一个数组
for(var i=1;i<arr.length;i++){
    
        // 比较的轮数，这里就代表总共比较7轮
     for(var j=0;j<arr.length-1;j++){
    
         //每一轮比较的次数
             //交换2个元素的值
            if(arr[j]>arr[j+1]){
    
    
                var tmp=arr[j];    //这里var 了个tmp，作用就是作为一个arr[j]和arr[j+1]交换的载体（空间），在此处不可以直接交换
                arr[j]=arr[j+1];
                arr[j+1]=tmp
              }
    }
}
console.log(arr);

クイックソート

配列を2つに分けて基準点を見つけ、現在の基準点より小さい方を左側に、大きい方を右側に置き、両側が揃っていればソートが実現します。

function quickSort(arr) {
    
    
    let len = arr.length;
    if (len === 0) return arr;
    let first = arr[0];
    let lesser = [], greater = [];
    for (let i = 1; i < len; i++) {
    
    
      if (arr[i] < first) {
    
    
        lesser.push(arr[i]);
      } else {
    
    
        greater.push(arr[i]);
      }
    }
    return quickSort(lesser).concat(first, quickSort(greater))
}
var temp = quickSort([8, 12, 50, 2, 6, 7]);
console.log('最终值:'+temp);

選択範囲の並べ替え

まず、ソートされていないシーケンス内で最小 (最大) の要素を見つけ、それをソートされたシーケンスの先頭に格納します。
次に、ソートされていない残りの要素から最小 (最大) の要素を検索し、それをソートされたシーケンスの最後に置きます。
すべての要素が並べ替えられるまで 2 番目の手順を繰り返します。

function swap(arr, index1, index2) {
    
    
  let temp = arr[index1];
  arr[index1] = arr[index2];
  arr[index2] = temp;
}

function selectSort(arr) {
    
    
  let len = arr.length;
  let max;
  for (let i = len - 1; i >= 1; i--) {
    
    
    max = i;
    for (let j = 0; j < i; j++) {
    
    
      if (arr[j] > arr[max]) {
    
    
        max = j;
      }
    }
    swap(arr, i, max);
  }
  return arr;
}

console.log(selectSort([15, 8, 14, 2]));

マージソート

リスト内の要素を基準値として選択し、この基準値を中心に並べ替えて、リスト内の基準値より小さい要素を配列の先頭ではなく下部に配置します。

function mergeSort(arr) {
    
    
  let len = arr.length;
  if (len < 2) return arr;
  let middle = Math.floor(len / 2),
    left = arr.slice(0, middle),
    right = arr.slice(middle);
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
    
    
  let result = [];
  while (left.length > 0 && right.length > 0) {
    
    
    if (left[0] <= right[0]) {
    
    
      result.push(left.shift());
    } else {
    
    
      result.push(right.shift());
    }
  }

  while(left.length) result.push(left.shift());
  while(right.length) result.push(right.shift());

  return result;
}

二分探索

順序付けされたシーケンスに基づいて
要素インデックスを検索します。それ以外の場合は -1 を返します。

function binarySearch(arr, target) {
    
    
  let len = arr.length;
  let low = 0,
    high = len - 1;
  while (low <= high) {
    
    
    let middle = Math.floor((low + high) / 2);
    if (arr[middle] < target) {
    
    
      low = middle + 1;
    } else if (arr[middle] > target) {
    
    
      high = middle - 1;
    } else {
    
    
      return middle;
    }
  }
  return -1;
}
console.log(binarySearch([2, 4, 5, 6, 7], 7));

二分木

前順トラバーサル: ルートノード - 左ノード - 右ノード
順トラバーサル: 左ノード - ルート
ノード - 右ノード事後トラバーサル: 左ノード - 右ノード - ルートノード

を事前順序に従って走査結果は BADCE です。
順序トラバーサルの結果は ABCDE です。
後続の走査の結果は ACEDB です。
レベルに応じてトラバースした結果はBADCE。

10. 言語ゲーム

前の会社はどうだと思いますか?
まずは前の会社をざっくり褒めてから、残りたくない理由を話して、あれこれ文句を言わないでください。例えば、前の会社は社内環境や経営体制、チームの雰囲気など、いろいろな面でよく頑張っていたと思いますが、技術スタックの更新が比較的遅く、給与調整制度も理想的ではありませんでした。

なぜフロントエンドをやりたいのですか
? フロントエンドの方が面白いと思います、インターフェイスが見えて、面白いものを作って、親や子供、彼女に自慢できると思います。

普段どのように勉強していますか?
紙の本、電子書籍、ビデオ、ブログフォーラムを読みます。

どのような本を
読んだとしても、でっちあげではなく、ただ読んだことを話してください。面接官の中には、ある本の表紙の色は何色ですか、目次は何ですか、その他素晴らしい質問をする人もいると聞きました。

自分の長所/短所は何だと思いますか?
長所はアクティブラーニングと共有意欲にあります。データベースなど興味のない内容は学習できないのがデメリットです。

あなたがxx コミュニティの中で学習意欲のある優れた著者であることを証明する例を挙げてください。
会社の年次進歩賞
オープンソースプロジェクト

あなたのキャリアプランに関する 4 つの単語は
、1 つの専門分野とさらに多くの専門知識を備えたものです。

他に聞きたいことはありますか?
いつも技術チームの規模について聞きますが、技術チームは
何名ですか?

現在どのようなテクノロジースタックを使用していますか?
将来的にはどのようなテクノロジースタックを使用する予定ですか
? 将来のテクノロジースタックの方向性を決定できますか?

次に、チーム内での私の役割、
担当する仕事
、プロジェクトの意思決定の程度です。

【ポイント】2023年フロントエンド総合知識のポイント

目次