ホームページ > 記事 > ウェブフロントエンド > 実際のフロントエンド面接の質問に関する記事を共有する
困っている学生のために、頻繁に行われる面接の質問をいくつか集めて記録しました。この記事では基本的な面接の質問に焦点を当て、フロントエンド技術の基礎がしっかりしているか、フロントエンドの知識体系を直列に接続できるかを主にテストします。
Q: コンポーネントのカプセル化の設計方法
1. コンポーネントのカプセル化の目的は、再利用、開発効率とコード品質の向上です
2. 低結合、単一責任、再利用性、保守性
Q: js の非同期ロード方法
1. レンダリング エンジンはスクリプト タグに遭遇すると停止し、スクリプトが実行されるまで待機し、下方向にレンダリングを続けます。
2. defer は「レンダリング後に実行」を意味し、async は「ダウンロード後に実行」を意味します。複数のスクリプトは、ページに表示される順序でロードされます。 3. es6 モジュールをロードするときに type=module を設定しても、ページはブロックされません。ページがレンダリングされるまでロードされる必要があります。実行するには、同時に async 属性を追加してスクリプトを非同期に実行できます (最上位の this が未定義の構文ポイントに等しいことを使用して、現在のコードが ES6 にあるかどうかを検出できます)。 module)
1. コードの複雑さ、JSアニメーションのコードは比較的複雑です
2. アニメーションの実行中、JSはアニメーションを作成したり、一時停止したりすることができます。 、キャンセル、終了、CSS アニメーションはイベントを追加できません
3. アニメーションのパフォーマンスを見ると、より多くの JS アニメーションがあります。JS 解析プロセスのパフォーマンスは CSS アニメーションほど良くありません
1. Web サイトの Cookie を盗む、防止方法: すべてのユーザー操作を信頼しない、ユーザー入力を回避する、JS による Cookie の読み書きを許可しない
2. csrf クロスサイト リクエスト フォージェリ、あなたの名前で悪意のあるリクエストを送信する、Cookie とパラメータによるフィルタリング
3. 攻撃を完全に排除することはできず、攻撃の閾値を上げることしかできません
1. 1 つまたは複数の要素のイベントを委任します。親レイヤーまたは外部要素上で
2. 利点: メモリ消費量を削減し、イベントを動的にバインドします
3. target はイベントをトリガーする最も具体的な要素であり、currenttarget はイベントがバインドされる要素です (通常、これと同じです)。関数)
2. スレッドは 1 つのプロセスにのみ所属でき、プロセスは複数のスレッドを持つことができますが、少なくとも 1 つのスレッドがあります
2. (CDN) は経済戦略です。分散ストレージ、負荷分散、ネットワーク リクエスト リダイレクト、コンテンツ管理の 4 つの要素を含む、柔軟な展開のための全体的なシステムです
1. クロージャの使用の目的 - 変数を非表示にし、変数に間接的にアクセスし、定義された関数の字句範囲外の関数を呼び出すこと
2. クロージャの使用後のメモリリークは IE のバグです。 、クロージャへの参照を回復できません。メモリ リークが発生します
2。潜在的に悪意のあるファイルを隔離するための重要なセキュリティ メカニズム
3. スクリプトによるサードパーティ リソースの読み込みを許可します
4. nginx リバース プロキシ (nginx サービスの内部設定 Access-Control-Allow-Origin *)
5.リクエスト ヘッダー、Access-Control-Allow-Origin およびその他のヘッダーを設定するためのバックエンドのコラボレーション 情報
2. メモリ リークとは、使用できない (アクセスできない) 変数を指します。 3. 予期しないグローバル変数は、再利用されません。 null に設定されているか再割り当てされていない限り)、特に大量の情報を一時的に保存するために使用される変数は常に実行されており、jq はノードを削除する前にイベント リスナーを削除しません。 5. js コードに DOM ノードへの参照があり、その dom ノードが削除されても、参照は維持されます
Q: Babel が ES6 を ES5 または ES3 に変換する原理は何ですか? 1. コンパイラーです。 、入力言語は ES6+、コンパイル対象言語は ES5 です
2. 分析: コード文字列が抽象構文ツリーに解析されます
3. 変換: 抽象構文ツリーを変換します
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 にはこのテクノロジーがありません。
5 、Post はより多くのエンコーディング タイプをサポートし、データ タイプを制限しません
Q: Webpack の原理とメカニズム、およびその実装方法を学習しましたか
1. Webpack 構成パラメーターを解析し、シェルから渡されたパラメーターを Webpack にマージします。 config.js ファイル内で構成されたパラメーターによって、最終的な構成結果が生成されます。
2. プラグインが Webpack ビルド ライフ サイクルのイベント ノードを監視し、それに応じて応答できるように、構成されたすべてのプラグインを登録します。
3. 構成されたエントリ ファイルからファイルの解析を開始して AST 構文ツリーを構築し、各ファイルが依存するファイルを見つけて再帰的に続行します。
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では、イベントループのさまざまなステージ間でマイクロタスクが実行されます
ブラウザ側では、イベントループのマクロタスクが実行された後にマイクロタスクが実行されます
1. 深いコピーと浅いコピーは、Object や Array などの複合型のみです
2。 a と b は同じメモリを指しているため、それらの値を変更すると、他の A の値もそれに応じて変更されます。これは浅いコピーです
3. 値のコピーには Object.assign() メソッドが使用されます。 1 つ以上のソース オブジェクトからターゲット オブジェクトにすべての列挙可能なプロパティを返します。 4. ディープ コピー、JSON.parse() および JSON.stringify() が基本的な解決策を提供します。正しく処理できません
。
以上が実際のフロントエンド面接の質問に関する記事を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。