[フロントエンド面接の質問] 2023 年のフロントエンド面接の質問 - HTML

人の人生には必ず浮き沈みがあります。常に日の出のように昇るわけではありませんし、常に惨めな状態になるわけでもありません。アップダウンの繰り返しが人間の修行となる。したがって、上に浮いている人は誇る必要はありませんし、下に沈んでいる人は悲観する必要はありません。私たちは率直かつ謙虚、楽観的かつ進取的であり、前進しなければなりません。——松下幸之助

こんにちは、私の名前はジャン・チェンです。今日のインターネット環境では、誰もが多かれ少なかれ感じているはずです。この衝動的な社会において、常に自分の人格を維持することによってのみ、人はさまざまな利益を認識し、お互いを励まし合うことができます。

2023 年の最新の面接質問を集めたので、常に準備してください。

この記事は、WeChat パブリックアカウントで最初に公開されました: Wild Programmer Jiang Chen

誰でも「いいね！」「収集」「フォロー」大歓迎です

画像の説明を追加してください

記事一覧

メタビューポートは何に使用されますか?またその記述方法は何ですか?

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />

その目的は、ユーザーがモバイル端末でページをズームできないようにすることです。

それぞれの言葉の意味を説明する

with=device-width は、レイアウトビューポートの幅をデバイスの画面解像度の幅に設定します。
Initial-scale=1 ページの初期拡大率は画面解像度の幅です。
minimum-scale=1 は、ユーザーがズームインできる最大スケールを指定します。
minimum-scale=1 は、ユーザーがズームアウトできる最大スケールを指定します

ブラウザの文字化けの原因と解決方法は？

エンコード形式の不一致

ブラウザが Web ページを開くときは、Web ページのソースコードのエンコード形式に従って Web ページをデコードする必要があります。Webページのエンコード形式とブラウザのエンコード形式が一致していないと文字化けが発生します。例えば、Webページのエンコード形式がUTF-8、ブラウザのエンコード形式がGB2312の場合、文字化けが発生します。

Webページのエンコードエラー

Webページを作成する際にコーディングミスがあると、ブラウザでWebページを開いたときに文字化けが発生します。例えば、HTMLコードを記述する際に、漢字のエンコード形式の指定を忘れると文字化けが発生します。

フォントがありません

Webページによっては特殊なフォントが使用されている場合があり、そのフォントがブラウザにない場合、対応する文字が見つからず文字化けが発生します。

iframeの長所と短所は何ですか?

アドバンテージ

ページの他の要素と競合することなく、ページまたはコンテンツをページ上に独立して表示できます。
同じページまたはコンテンツを複数のページで再利用できるため、コードの冗長性を減らすことができます。
読み込みは非同期で行われるため、iframe の読み込みを待たずにページを表示できます。
クロスドメインアクセスを簡単に実現

欠点がある

検索エンジンが iframe 内のコンテンツを正しく解析できない可能性があります
メインページのonloadイベントをブロックします
接続プールをメインページと共有すると、ページの並列読み込みに影響します

HTML5の新機能

セマンティックタグ
強化されたフォーム (たとえば、input の type 属性を通じて、タイプが色、日付、URL などであるかどうかを指定できます)
メディア要素タグ (ビデオ、オーディオ)
キャンバス、SVG
SVG描画
地理位置情報 (navigator.geolocation.getCurrentPosition(callback))
ドラッグアンドドロップ API (ターゲット要素のドラッグを有効にするには、label 要素の draggable 属性の値を true に設定します)
Web ワーカー (スクリプトを実行するサブスレッドを開始できます)
Web ストレージ (つまり sessionStorage と localStorage)
Websocket (双方向通信プロトコル。ブラウザがサーバーからリクエストを受信できるようにします)
dom クエリ (document.querySelector() および document.querySelectorAll())

HTML5でCanvas要素を使用してグラフィックを描画するにはどうすればよいですか?

Canvas 要素を使用すると、JavaScript を使用して Web ページ上にグラフィックスやアニメーションを描画できます。以下は、長方形を描画する簡単な例です。

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
</script>

この例では、要素document.getElementById()はメソッドを使用して取得されCanvas、getContext(“2d”)2D 描画コンテキストはを介して取得されます。
次に、fillStyleプロパティメソッドを使用して塗りつぶしの色を設定しfillRect()、長方形を描画します。

データ属性とは何ですか?

JavaScript フレームワークが普及する前は、フロントエンド開発者はdata-プロパティを使用して DOM 自体に追加データを保存することがよくありました。当時は他のハッキング (DOM 上の非標準プロパティや追加プロパティの使用など) はありませんでした。これは、他に適切な属性や要素が存在しないページまたはアプリにカスタムデータを保存するために行われます。

現在、属性の使用はdata-推奨されていません。理由の 1 つは、ユーザーがブラウザーの検査要素を活用して属性値を簡単に変更することでデータを変更できるためです。データモデルは、フレームワークによって提供されるデータバインディングを使用して、DOM で更新し続ける JavaScript 自体に保存するのが最適です。

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

	クッキー	ローカルストレージ	セッションストレージ
誰によって初期化されたのか	クライアントまたはサーバー、サーバーは`Set-Cookie`リクエストヘッダーを使用できます。	クライアント	クライアント
有効期限	手動設定	有効期限が切れることはありません	現在のページを閉じたとき
現在のブラウザセッション (ブラウザセッション) 内で変更されないままであるかどうか	有効期限が設定されているかどうかにより異なります	はい	いいえ
すべての HTTP リクエストでサーバーに送信するかどうか	はい、Cookie は`Cookie`リクエストヘッダーを通じてサーバーに自動的に送信されます。	いいえ	いいえ
容量 (ドメインあたり)	4kb	5MB	5MB
アクセス許可	どの窓でも	どの窓でも	現在のページウィンドウ

スクリプト、スクリプト非同期、スクリプト遅延の違いについて説明してください。

<script>- HTML 解析は中断され、スクリプトが抽出されてすぐに実行されます。実行終了後、HTML の解析が続行されます。
<script async>- スクリプトの抽出および実行プロセスは HTML 解析プロセスと並行して行われるため、HTML 解析が完了する前にスクリプトの実行が完了する場合があります。asyncこれは、ページの統計分析など、スクリプトがページ上の他のスクリプトから独立している場合に使用できます。
<script defer>・スクリプトはHTML解析処理と並行して処理を抽出するだけであり、スクリプトの実行はHTML解析完了後に行われます。を含むスクリプトが複数ある場合defer、スクリプトの実行順序は、ドキュメント内でのスクリプトの出現位置に基づいて上から下に決まります。

注:src属性のないスクリプトの場合、asyncおよびdefer属性は無視されます。

CSS リンクタグを head の間に配置する方が良いのはなぜですか? JS script タグを本文の直前に配置するのが最適なのはなぜですか? 例外はありますか?

<link>間にタグを入れることは<head></head>仕様により必須です。さらに、このアプローチにより、ページを段階的にレンダリングできるため、ユーザーエクスペリエンスが向上します。スタイルシートをドキュメントの下部近くに配置すると、Internet Explorer を含む多くのブラウザでページが段階的にレンダリングされなくなります。一部のブラウザーは、ページスタイルが変更されたときにページ上の要素の再描画を避けるためにレンダリングをブロックします。これにより、ユーザーに空白のページやスタイルのないコンテンツが表示されるのを防ぎます。

<script>タグを</body>直前に配置します

このスクリプトは、ダウンロードおよび実行中の HTML 解析をブロックします。このタグを最後に配置する<script>と、HTML が最初に解析され、ページができるだけ早くユーザーに表示されるようになります。

例外は、スクリプトにが含まれる場合ですdocument.write()。しかし現在、document.write()その使用は推奨されていません。また、タグを下部に配置すると、ドキュメント全体が解析される<script>までブラウザはスクリプトのダウンロードを開始できなくなります。おそらく、これに対するより良いアプローチは、属性を使用してそれをに置く（document）ことです。<script>defer<head>

プログレッシブレンダリングとは何ですか?

プログレッシブレンダリングは、Web ページのパフォーマンスを向上させ (特にユーザーが認識する読み込み速度を向上させ)、ページをできるだけ早くレンダリングするために使用される手法です。

このテクノロジーは、インターネットの帯域幅が小さかった以前の時代によく使われていました。今日、モバイル端末が普及し、モバイルネットワークが不安定になることが多いため、最新のフロントエンド開発ではプログレッシブレンダリングが依然として重要な役割を果たしています。

いくつかの例：

画像の遅延読み込み – ページ上の画像は一度にすべて読み込まれるわけではありません。ユーザーがページを画像セクションまでスクロールすると、JavaScript が読み込まれて画像が表示されます。
表示するコンテンツの優先順位付け (段階的レンダリング) - ページをできるだけ早くユーザーにレンダリングするために、ページには基本的な最小限の CSS、スクリプト、コンテンツのみが含まれており、その後、遅延読み込みを使用して他のリソースやコンテンツを読み込むことができます。スクリプトまたはリスナー/DOMContentLoadedイベントload
HTML フラグメントの非同期読み込み - ページがバックグラウンドでレンダリングされるとき、HTML は分割され、非同期リクエストを通じてチャンクとしてブラウザに送信されます。