フロントエンド面接の質問の概要 (継続的に更新)_html/css_WEB-ITnose

次に、あらゆる規模のサマーインターンシップの筆記試験と面接に参加する必要があります。このブログでは面接でよくある質問をまとめていきます。そのうちのいくつかは、私が昨年の夏にインターンシップを探していたときにまとめたものです。今では少し素朴に思えます。ゆっくり改善していきましょう！

JavaScript

Q: JS におけるクロージャ

A: 関数型プログラミングにおけるクロージャそのものの概念から、関数を定義する際のことを指します 関数本体と関数の 2 つの部分context: 関数が定義されたときのコンテキストです。スコープ内の変数、関数の定義と割り当てを保存します。

私たちが通常話しているクロージャは、実際にはこのコンテキストへの参照を作成するため、外部スコープ内のこの参照を通じてコン​​テキストにアクセスできます。

概念的には、関数を宣言するときはクロージャを宣言することになります。

実際の使用に関しては、何らかのコード ペアを通じて現在のクロージャへの参照を外部スコープに保存すると、クロージャを「作成」すると言います。実際には、それは「作成」されます。 クロージャーへの参照。通常、この効果を実現するために IIFE を使用するため、IIFE を「クロージャ」と考える人もいますが、これは実際には誤った理解です。

これがクロージャの本質です クロージャの使い方にはいろいろあります。これを使用して、外部スコープによってアクセスされる一時変数を保存したり、関数をカプセル化したり、アクセス許可を制御したりすることもできます (Java のプライベート変数と同様)。

Q: JS のモジュール化

A:

• JS のモジュール化が必要な理由
• JS のモジュール化の開発プロセス (関数、IIFE からCommonjs)
• JS モジュール化のためのいくつかのソリューションの紹介 (Commonjs、AMD、ES6 モジュール)

CSS

Q: CSS 位置の異なる値違い？

A: 値: 静的 (デフォルト)、相対、絶対、固定。差分、相対: 文書の流れから離れることなく、それ自体を基準にして配置されます。絶対: 親要素チェーン上の最初に配置された要素を基準とするか、存在しない場合は本文を基準とします。文書の流れから抜け出します。固定され、ブラウザ ウィンドウに対して相対的に配置され、ドキュメント フローの外に配置されます。 static: 通常のドキュメント フローの配置。

Q: CSS ボックス モデル

A:

• W3C デフォルト コンテンツボックス、ie5-、ie6 Quirks モード ボーダーボックス
• コンテンツ-box: csswidth = コンテンツの幅
• border-box: csswidth = コンテンツの幅 + パディング +border

Q: CSS セレクター

A: 要素、クラス 、 ID、属性、疑似クラス、疑似要素。 ···

Q: CSS ハック

A: セレクター ハック (-webkit-、-moz-)、属性ハック、IE 条件付きコメント

HTML

Q: Web セマンティクス

A:

html5 新しいタグ:

Microformat: 標準化された CSS クラス名検索エンジンがページコンテンツのインデックスを作成しやすくなります。

Q: Doctype

A: doctype を確認して、ドキュメントを表示するために互換モードを使用するか標準モードを使用するかを決定します。 HTML では、

データ構造とアルゴリズム

フロントエンドのパフォーマンス

Q: ページの読み込み速度を最適化しますか?

A: http リクエストに関しては、http リクエストの数を減らします (CSS、JS、スプライト画像のマージ)。ファイル サイズを削減します (CSS、JS、画像を圧縮します)。 CDN高速化などブラウザのレンダリングの観点から、dom がロードされる前に js を配置し、その後に js をロードします。

ネットワーク

Q: HTTP GET POST の違いは何ですか?

A:

GET は URL にパラメーターを追加します。これは URL 内で確認できます。 POST は、フォームのコンテンツを HTTP リクエスト本文に配置します。
RESTful API 設計では、通常、GET はリソース情報の取得/クエリに使用され、POST は通常、リソース情報の更新に使用されます。

Q: HTTP ステータス コード

A: 200 正常、304 変更なし、404 見つかりません、403 禁止、500 内部サーバー エラー、503 サービス利用不可など。

ブラウザ

Q: ブラウザに URL を入力して Web ページの読み込みが完了するまでのプロセスを説明してください

A:

• ブラウザはキャッシュをチェックし、期限切れのリソースがある場合はリソースを直接返します。
• キャッシュに必要なリソースがない場合、ブラウザは URL を解析し、http リクエストを組み立てます。
• ブラウザはホスト IP アドレスを取得し、クエリ チェーンはブラウザ キャッシュ、ローカル キャッシュ、ルーター キャッシュから DNS サーバー キャッシュに進み、DNS クエリ チェーンに入ります
• ホストの IP アドレスを取得した後、ターゲット IP が tcp 接続を確立し、http リクエストを送信します
• tcp/ip 7 層モデル
• サーバー側処理、Web サーバー、Web 側ハンドラー、http レスポンスを返す
• ブラウザ http レスポンスを受信し、ステータスコードに応じて異なる処理を実行
• リソースの種類に応じて処理方法を決定 HTML ドキュメントの場合は、DOM を構築します。ツリーを作成し、リソースをダウンロードし、CSS om ツリーを構築し、js スクリプトを実行します。
• DOM ツリー: トークン化: HTML 仕様に従って文字ストリームをタグに解析する 字句解析: 字句解析でタグをオブジェクトに変換し、プロパティとルールを定義する DOM 構築: HTML タグの関係に従ってオブジェクトを DOM ツリーに合成する
• CSS OM (オブジェクト モデル) ツリー: トークン化: 文字ストリームをトークン ストリームに変換 ノード: トークンに基づいてノードを作成 CSSOM: ノードが CSSOM ツリーを作成
• DOM ツリーと CSS om ツリーに基づいてレンダリング ツリーを構築DOM からのオブジェクトのレンダリング ツリーのルート ノードは、すべての可視ノードを横断します。 1) スクリプトやメタなど、それ自体は非表示のタグ。 2) CSS によって非表示になっているノード (display: none など)。表示されるノードごとに、適切な CSSOM ルールを見つけて、表示されるノードを公開するためのコンテンツと計算スタイルを適用します。
• js 解析ブラウザは Document オブジェクトを作成し、HTML を解析します。 、解析された要素とテキスト ノードをドキュメントに追加します。この時点で、HTML パーサーが同期スクリプトを検出すると、それらをドキュメントに追加し、インライン スクリプトまたは外部スクリプトを実行します。これらのスクリプトは同期的に実行され、スクリプトがダウンロードされて実行されている間、パーサーは一時停止されます。ブラウザは、Document オブジェクトで DOMContentLoaded イベントをトリガーします。この時点で、ブラウザは画像などのコンテンツがロードされ、すべての非同期スクリプトがロードされるのを待機している可能性があります。 document.readState が完了すると、ウィンドウがロード イベント
• をトリガーします (この問題に関するブラウザーのレンダリングについては、Webkit テクノロジーの裏話を読んだ方がよいでしょう。この本も必読だと思います)ハイエンド フロントエンドについてはこちらをお読みください)