2018 年の最新のフロントエンド面接の質問 10 件

今回は、2018 年の最新のフロントエンド面接の質問をお届けします。フロントエンドの仕事に面接が不可欠な部分であることはわかっています。このフロントエンド面接のよくある質問の分類と要約の目的は、面接での質問を克服できるようにすることです。フロントエンド面接における大きな困難。見てみましょう。

【関連する推奨事項: フロントエンド面接の質問(2020)】

1. Cookie、sessionStorage、localStorage の違いについて説明してください。

ソフトウェア プログラミングでは、何らかの手段を通じて有用なデータを永続的に保存したいと考えています。ネットワーク プログラミングの場合、このタスクは通常、サーバー側のデータベースまたはブラウザ側の Cookie に渡されます。 HTML5 の登場により、Web 開発には Web Storage と Web SQL Database の 2 つのオプションがあります。

WebStorage には、LocalStorage (ローカル ストレージ) と sessionStorage (セッション ストレージ) の 2 つの形式があります。どちらの方法でも、開発者は js によって設定されたキーと値のペアを操作し、別のページをリロードするときにそれらを読み取ることができます。これはクッキーに似ています。

1: Cookie データは常に同じオリジンからの http リクエストに含まれます (必要でない場合でも)。つまり、Cookie はブラウザとサーバーの間でやり取りされます。 SessionStorage と localStorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです。 Cookie データにはパスの概念もあり、Cookie が特定のパスにのみ属するように制限できます。

2: ストレージ サイズの制限も異なります。Cookie データは 4K を超えることはできません。同時に、各 http リクエストには Cookie が含まれるため、Cookie はセッション ID などの非常に小さなデータの保存にのみ適しています。 sessionStorage と localStorage にもストレージ サイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。

3: データの有効期間は異なります。 sessionStorage: は現在のブラウザ ウィンドウが閉じられるまでのみ有効であり、当然永続的に維持することはできません。 localStorage: は常に有効であり、ウィンドウまたはブラウザが閉じられている場合でも保存されます。永続データとして使用されます。Cookie のみ。ウィンドウまたはブラウザが閉じられた場合でも、Cookie は設定された有効期限まで有効です。

4: スコープが異なると、sessionStorage は、同じページであっても、異なるブラウザー ウィンドウで共有されません。localStorage は、すべての相同ウィンドウで共有されます。Cookie もすべての相同ウィンドウで共有されます。

5: Web Storage はイベント通知メカニズムをサポートしており、データ更新通知をリスナーに送信できます。

6: Web Storage の API インターフェイスがさらに使いやすくなりました。

2. <script>、<script async>、<script defer>の違いを説明してください。 </strong></p> <p>javascript<a href="http://www.php.cn/wiki/48.html" target="_blank">コードをHTMLページに挿入する主な方法は、scriptタグを使用することです。 2 つの形式があり、1 つは script タグの間に直接 js コードを挿入する方法、もう 1 つは src 属性を通じて外部の js ファイルを導入する方法です。インタプリタは JS コードの解析と実行中にページの残りの部分のレンダリングをブロックするため、大量の JS コードを含むページではブラウザに長時間の空白と遅延が発生します。この問題を回避するには、すべての js 参照を </body> タグの前に置くことをお勧めします。 </a></p>script タグには defer と async という 2 つの属性があるため、script タグの使用は 3 つの状況に分けられます: <p></p>1.<script src="example.js"></script>

defer なしまたは async 属性を使用すると、ブラウザは対応するスクリプトを即座にロードして実行します。つまり、script タグの後のドキュメントをレンダリングする前に、その後にロードされるドキュメント要素を待機せず、読み取られるとすぐに要素のロードと実行を開始します。これにより、後続のドキュメントのロードがブロックされます

2。 .

async 属性を使用すると、後続のドキュメントの読み込みとレンダリングと、js スクリプトの読み込みと実行が並行して実行されることを意味します。 、非同期実行;

3.

defer 属性を使用すると、後続のドキュメントのロードと JS スクリプトのロード (ロードのみで実行は行われません)現時点では) は並列 (非同期) で実行され、js スクリプトの実行は、要素の解析が完了した後、DOMContentLoaded イベントがトリガーされて実行されるまで待つ必要があります。

3. 通常、 と JS