実際のフロントエンド面接の質問に関する記事を共有する

困っている学生のために、頻繁に行われる面接の質問をいくつか集めて記録しました。この記事では基本的な面接の質問に焦点を当て、フロントエンド技術の基礎がしっかりしているか、フロントエンドの知識体系を直列に接続できるかを主にテストします。

Q: コンポーネントのカプセル化の設計方法

1. コンポーネントのカプセル化の目的は、再利用、開発効率とコード品質の向上です
2. 低結合、単一責任、再利用性、保守性

Q: js の非同期ロード方法

1. レンダリング エンジンはスクリプト タグに遭遇すると停止し、スクリプトが実行されるまで待機し、下方向にレンダリングを続けます。
2. defer は「レンダリング後に実行」を意味し、async は「ダウンロード後に実行」を意味します。複数のスクリプトは、ページに表示される順序でロードされます。 3. es6 モジュールをロードするときに type=module を設定しても、ページはブロックされません。ページがレンダリングされるまでロードされる必要があります。実行するには、同時に async 属性を追加してスクリプトを非同期に実行できます (最上位の this が未定義の構文ポイントに等しいことを使用して、現在のコードが ES6 にあるかどうかを検出できます)。 module)

Q: CSSアニメーションとJSアニメーションの違い

1. コードの複雑さ、JSアニメーションのコードは比較的複雑です
2. アニメーションの実行中、JSはアニメーションを作成したり、一時停止したりすることができます。 、キャンセル、終了、CSS アニメーションはイベントを追加できません
3. アニメーションのパフォーマンスを見ると、より多くの JS アニメーションがあります。JS 解析プロセスのパフォーマンスは CSS アニメーションほど良くありません

Q: 2 つのクロスサイト攻撃、XSS とCSRF

1. Web サイトの Cookie を盗む、防止方法: すべてのユーザー操作を信頼しない、ユーザー入力を回避する、JS による Cookie の読み書きを許可しない
2. csrf クロスサイト リクエスト フォージェリ、あなたの名前で悪意のあるリクエストを送信する、Cookie とパラメータによるフィルタリング
3. 攻撃を完全に排除することはできず、攻撃の閾値を上げることしかできません

Q: イベントの委任、目的、機能、記述方法

1. 1 つまたは複数の要素のイベントを委任します。親レイヤーまたは外部要素上で
2. 利点: メモリ消費量を削減し、イベントを動的にバインドします
3. target はイベントをトリガーする最も具体的な要素であり、currenttarget はイベントがバインドされる要素です (通常、これと同じです)。関数)

Q: スレッド、プロセス

1. スレッドは最小の実行単位であり、プロセスは最小のリソース管理単位です

2. スレッドは 1 つのプロセスにのみ所属でき、プロセスは複数のスレッドを持つことができますが、少なくとも 1 つのスレッドがあります

Q: 負荷分散

システムが多数のユーザーのアクセスに直面して負荷が高すぎる場合、通常は水平方向の拡張のためにサーバーの数を増やし、クラスタリングと負荷を使用する必要があります。システム全体の処理能力を向上させるためのバランス調整

Q: CDN キャッシュとは何ですか

1. CDN は、nginx のようなサービスがさまざまなリージョンに応じてデプロイされ、静的リソースがキャッシュされます。フロントエンドがプロジェクトを最適化する場合、プラットフォームのリソースにハッシュ値を追加し、ハッシュ値が変更されるたびにハッシュを変更するのが通例です

2. (CDN) は経済戦略です。分散ストレージ、負荷分散、ネットワーク リクエスト リダイレクト、コンテンツ管理の 4 つの要素を含む、柔軟な展開のための全体的なシステムです

Q: クロージャの書き方、クロージャの役割、クロージャの欠点

1. クロージャの使用の目的 - 変数を非表示にし、変数に間接的にアクセスし、定義された関数の字句範囲外の関数を呼び出すこと

2. クロージャの使用後のメモリリークは IE のバグです。 、クロージャへの参照を回復できません。メモリ リークが発生します

Q: クロスドメインの問題、クロスドメインを制限する人、およびその解決方法

1. ブラウザの同一オリジン ポリシーによりクロスドメインが発生します

2。潜在的に悪意のあるファイルを隔離するための重要なセキュリティ メカニズム
3. スクリプトによるサードパーティ リソースの読み込みを許可します
4. nginx リバース プロキシ (nginx サービスの内部設定 Access-Control-Allow-Origin *)
5.リクエスト ヘッダー、Access-Control-Allow-Origin およびその他のヘッダーを設定するためのバックエンドのコラボレーション 情報

Q: JavaScript の一般的なメモリ リーク トラップ

1。メモリ リークは、次のような一連の問題を引き起こす可能性があります。クラッシュ、高遅延

2. メモリ リークとは、使用できない (アクセスできない) 変数を指します。 3. 予期しないグローバル変数は、再利用されません。 null に設定されているか再割り当てされていない限り)、特に大量の情報を一時的に保存するために使用される変数は常に実行されており、jq はノードを削除する前にイベント リスナーを削除しません。 5. js コードに DOM ノードへの参照があり、その dom ノードが削除されても、参照は維持されます

Q: Babel が ES6 を ES5 または ES3 に変換する原理は何ですか? 1. コンパイラーです。 、入力言語は ES6+、コンパイル対象言語は ES5 です
2. 分析: コード文字列が抽象構文ツリーに解析されます
3. 変換: 抽象構文ツリーを変換します

4. に基づいてコード文字列を再生成します。変換された抽象構文ツリー

Q: Promise シミュレーションが終了します

1. 新しいとき オブジェクトが「保留中」状態のままである場合、元の Promise チェーンは実行を終了します。
2. return new Promise(()=>{}); // Promise オブジェクトを「保留中」状態で返します

Q: Try catch に Promise を入れると、どのような結果になりますか? 1. Promise オブジェクトのエラーにはバブリングの性質があり、キャッチされるまで逆方向に渡されます。つまり、エラーは常に次の catch ステートメントによってキャッチされます。 Promise チェーンでエラーがスローされると、エラー情報はキャプチャされるまでリンクに沿って逆方向に渡されます

Q: ウェブサイトのパフォーマンスの最適化

1. http リクエストの数とリクエスト量を減らします。 、および対応する実践方法 はい、プロジェクト リソースを圧縮し、2 ～ 4 つのドメイン名でプロジェクト リソースの DNS 解像度を制御し、アナウンス スタイル、パブリック コンポーネント、スプライト イメージ、キャッシュ リソースを抽出します。

2. リソースを圧縮し、パブリック リソースを抽出します。圧縮、CSS 抽出、JS パブリックメソッド

3. 画像を拡大縮小しない、スプライト画像を使用する、フォントチャートを使用する
4. CDN を使用する、無駄な Cookie を捨てる
5. 再描画とリフローを減らす、CSS 属性の読み取りスタイルを変更するために js を使用しないでください。オフラインで dom を更新し、レンダリングする前に画像のサイズを指定します。
6. js コードレベルを最適化し、文字列の計算を減らし、クロージャを合理的に使用し、js リソースをロードします。一番下の最初の画面で

Q: js カスタム イベントの実装

1. ネイティブには、カスタム イベントを実装するための 3 つのメソッドが用意されています

2. createEvent で、イベント タイプを HTML イベントかマウス イベントかを設定します

3. initEvent初期化イベント、イベント名、バブリングを許可するかどうか、カスタムイベントをブロックするかどうか
4.dispatchEventトリガーイベント

Q:angular双方向データバインディングとvueデータ双方向データバインディング

どちらも代表的なものです。 MVVM パターン開発

2. ngular はダーティ検出の実装を通過します。angular は、UI イベント、リクエスト イベント、settimeout およびその他の遅延オブジェクトをイベント監視のダーティ キューに入れます。データが変更されると、$diget メソッドがトリガーされてデータが更新されます。 3. Vue パス データ ハイジャックとデータ属性のパブリッシュ/サブスクライブ モデルの実装は、大まかに 3 つのモジュールで構成されると理解できます。オブザーバーはデータのハイジャックを完了し、コンパイルはテンプレート フラグメントのレンダリングを完了します。 2 つを接続するブリッジとして機能し、データ変更をサブスクライブし、ビューを更新します。

Q: get 通信と post 通信の違いは、Get リクエストはキャッシュできますが、Post は Get よりも少し安全です。 URLにGetリクエストが含まれており、ブラウザに履歴が保存されるためPostはできませんが、パケットキャプチャの場合も同様です。
3. Post はリクエスト本文を通じて Get よりも多くのデータを送信できます。Get にはこのテクノロジーがありません。

4. URL には長さの制限があり、これは Get リクエストに影響しますが、この長さの制限は RFC ではなくブラウザによって規定されます

5 、Post はより多くのエンコーディング タイプをサポートし、データ タイプを制限しません

Q: Webpack の原理とメカニズム、およびその実装方法を学習しましたか
1. Webpack 構成パラメーターを解析し、シェルから渡されたパラメーターを Webpack にマージします。 config.js ファイル内で構成されたパラメーターによって、最終的な構成結果が生成されます。
2. プラグインが Webpack ビルド ライフ サイクルのイベント ノードを監視し、それに応じて応答できるように、構成されたすべてのプラグインを登録します。
3. 構成されたエントリ ファイルからファイルの解析を開始して AST 構文ツリーを構築し、各ファイルが依存するファイルを見つけて再帰的に続行します。

4. ファイルを解析する再帰的なプロセス中に、ファイルの種類とローダー構成に基づいてファイルを変換する適切なローダーを見つけます。

5. 再帰が完了すると、各ファイルの最終結果が取得され、エントリの構成に従ってコード ブロック チャンクが生成されます。
6. すべてのチャンクをファイル システムに出力します。

Q: ES6 モジュールと CommonJS モジュールの違い

1. CommonJs モジュールは値のコピーを出力しますが、ES6 モジュールは値への参照を出力します。2. CommonJS モジュールは実行時にロードされますが、ES6 モジュールは実行時に出力されます。インターフェイス
3. ES6 によって入力されたモジュール変数は単なるシンボリックリンクであるため、再割り当てするとエラーが報告されます

Q: AMD、CMD、CommonJS Modules をロードするモジュール2.0 仕様

1. この仕様の目的は、特にブラウザ側での JavaScript のモジュール開発です

2. 依存するモジュールについては、AMD が事前に実行し、CMD は近くの依存関係を促進します。 AMDは事前に依存関係を促進します

Q: NodeイベントループとJSイベントループの違い

1. Node.jsのイベントループは6段階に分かれています
2. ブラウザとNodeでマイクロタスクのタスクキューの実行タイミングが異なります。環境
Node.jsでは、イベントループのさまざまなステージ間でマイクロタスクが実行されます
ブラウザ側では、イベントループのマクロタスクが実行された後にマイクロタスクが実行されます

3. 再帰呼び出し process.nextTick() が発生します。 /O starving. 公式推奨は setImmediate() の使用です

Q : 浅いコピーと深いコピーの問題

1. 深いコピーと浅いコピーは、Object や Array などの複合型のみです
2。 a と b は同じメモリを指しているため、それらの値を変更すると、他の A の値もそれに応じて変更されます。これは浅いコピーです
3. 値のコピーには Object.assign() メソッドが使用されます。 1 つ以上のソース オブジェクトからターゲット オブジェクトにすべての列挙可能なプロパティを返します。 4. ディープ コピー、JSON.parse() および JSON.stringify() が基本的な解決策を提供します。正しく処理できません
。

以上が実際のフロントエンド面接の質問に関する記事を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。