フロントエンドの面接の質問の例をいくつか共有する

HTML

* Doctype の役割は何ですか?厳密モードと混合モードを区別するにはどうすればよいですか?どういう意味ですか?

1. 宣言はドキュメント内の タグの前に配置されます。このタグは、ドキュメントが HTML または XHTML のどちらの仕様を使用しているかをブラウザに伝えることができます

2. いわゆる標準モードは、ブラウザが W3C 標準に従ってコードを解析および実行することを意味します。ブラウザの解析方法と実行方法が異なるため、コードを実行します。そのため、これを奇妙なモードと呼びます。

3. ブラウザーが解析時に標準モードを使用するか、変なモードを使用するかは、Web ページの DTD 宣言に直接関係しており、DTD 宣言は標準ドキュメント (標準モード解析) ドキュメント タイプを定義します。対応するメソッドを使用して、DTD 宣言を無視して Web ページをロードして表示すると、Web ページが奇妙なモードになります。

* なぜ HTML5 では のみを記述する必要があるのですか?

doctypeはドキュメントタイプの略称で、ページ内でそのページが使用するxhtml（またはhtml）のバージョンを指定するために使用されます。標準に準拠したページを作成するには、Doctype 宣言が不可欠かつ重要なコンポーネントです。正しい doctype が決定された場合にのみ、xhtml 内のロゴと CSS が正常に有効になります。 html は、このファイルが html 形式の Web ページ ファイルであることをブラウザに伝えます。元の文字列は HTML5 標準の Web ページ宣言ですが、現在はこの簡潔な形式になっており、主流のブラウザで認識されます。このステートメントは html5 標準をサポートします。

* インライン要素とは何ですか?ブロックレベル要素とは何ですか? 無効な要素とは何ですか?

インライン要素には次のものが含まれます: a b span img input select Strong (強調トーン)

ブロックレベルの要素には次のものが含まれます: div ul ol li dl dt dd h1-h6 p

よく知られた空の要素:
; hr>

アドレス - ブロック参照中心 - block dir - ディレクトリリスト div - 共通ブロックレベル コンテナは CSS レイアウトのメインラベルでもあります dl - 定義リスト フィールドセット - フォームコントロールグループ フォーム - インタラクティブフォーム h1 - タイトル h2 - サブタイトル h3 - レベル 3 タイトル h4 - レベル 4 タイトル h5 -レベル 5 タイトル h6 - レベル 6 タイトル hr - 水平分割線 isindex - 入力プロンプト メニュー - メニュー リスト noframes - フレームのオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザに表示されます) noscript - オプションのスクリプト コンテンツ (このコンテンツはスクリプトをサポートしていないブラウザに表示されます) ol - ソートフォーム p - 段落事前 - フォーマットされたテキスト table - テーブル ul - 未ソートリスト (順序なしリスト)

共通インライン要素

(インライン要素) a - アンカーポイント abbr - 略語の頭字語- 最初の文字 b - 太字フォント (非推奨) bdo - Bidi オーバーライド big - 大きなフォント br - 改行引用 - 引用コード - コンピューターコード (ソースコードを引用する場合に必要) dfn - 定義フィールド em - 強調フォント - フォント設定 (非推奨)推奨) i - イタリック体 img - 画像入力 - 入力ボックス kbd - キーボード テキスト ラベルの定義 - テーブル ラベル q - 短い引用符 s - アンダースコア (非推奨) samp - サンプル コンピュータ コードの定義 select - プロジェクトの選択 small - 小さいフォント テキスト スパン - 共通インラインコンテナ、テキスト内のブロックを定義します。 ストライク - 強い下線 - 太字の強調 sub - 下付き文字 sup - 上付き文字のテキストエリア - 複数行のテキスト入力ボックス tt - テレックステキスト u - 下線 var - 変数の定義

可変要素 可変要素は次のとおりです。ブロック要素であるかインライン要素であるかはコンテキストによって決まります [1]。アプレット - Java アプレット ボタン - ボタン del - テキストの削除 iframe - インライン フレーム ins - 挿入されたテキスト マップ - 画像ブロック (マップ) オブジェクト - オブジェクト オブジェクト スクリプト - クライアント スクリプト

空要素 HTML要素の内容は開始タグと終了タグの間の内容となるためです。また、一部の HTML 要素には空のコンテンツがあります。 (空のコンテンツ)、空のコンテンツを含む HTML 要素は空の要素です。空の要素 [2] は開始タグで閉じられています。例
は終了タグのない空の要素です。

* ページにスタイルをインポートするときにリンクと @import を使用することの違いは何ですか?

(1) リンクは CSS のロードに加えて、RSS の定義、rel 接続属性の定義などにも使用できます。一方、@import は CSS によって提供され、ロードするためにのみ使用できます。 CSS;

(2) ページがロードされると、リンクも同時にロードされ、@import によって参照される CSS は、ページがロードされるまで待機してからロードされます。

(3) インポートは CSS2 によって提案されます。 .1 であり、IE5 以降でのみ認識され、リンクは XHTML タグであるため、互換性の問題はありません

（4）: dom を使用してスタイルを制御する場合の違い。 JavaScript を使用して dom を制御してスタイルを変更する場合、@import は dom によって制御できないため、link タグのみを使用できます。

(5): @import は、CSS に他のスタイル シートを導入できます。たとえば、メイン スタイル シートを作成し、そのメイン スタイル シートに他のスタイル シートを導入することができます

* ブラウザのコアの理解を紹介します。 ?

主に、レンダリング エンジン (レイアウト エンジニアまたはレンダリング エンジン) と JS エンジンの 2 つの部分に分かれています。

レンダリングエンジン：Webページの内容（HTML、XML、画像など）の取得、情報の整理（CSSの追加など）、Webページの表示方法の計算を担当し、モニターやプリンターに出力します。ブラウザ カーネルが異なれば、Web ページの文法解釈も異なるため、レンダリング効果も異なります。 Web コンテンツを編集および表示するすべての Web ブラウザ、電子メール クライアント、およびその他のアプリケーションにはカーネルが必要です。

JS エンジン: JavaScript を解析して実行し、Web ページ上で動的な効果を実現します。

当初、レンダリング エンジンと JS エンジンには明確な区別はありませんでしたが、その後、JS エンジンはますます独立し、カーネルはレンダリング エンジンのみを指す傾向になりました。

* 一般的なブラウザ カーネルとは何ですか?

4 つの一般的なカーネルがあります:

Trident: IE ブラウザーで使用されるカーネル プログラムは、1997 年に IE4 で最初に使用され、Mosaic コードに基づいて Microsoft によって修正され、現在でも使用されています。現在のIE9では。 Trident は実際にはオープン カーネルであり、そのインターフェイス カーネル設計は非常に成熟しているため、IE の代わりに IE カーネルを使用する多くのブラウザー (Maxthon、The World、TT、GreenBrowser、AvantBrowser など) が登場しています。

Gecko: このカーネルは Netscape 6 から使用され始め、その後 Mozilla FireFox もこのカーネルを使用しました。Gecko の特徴は、コードが完全にオープンであるため、開発性が高く、開発が可能であることです。メンバーは世界中のプログラムで使用されており、コードを作成して機能を追加できます。 Gecko エンジンの起源は IE と関係があります。IE は W3C 標準を使用していなかったため、Microsoft 内の一部の開発者の間で不満が生じ、Netscape の一部の従業員とともに Mozilla を設立しました。 Mosaic カーネルをベースにカーネルが書き換えられ、Geckos が開発されました。しかし実際には、Gecko コアを搭載したブラウザは依然として Firefox (Firefox) が最も多くのユーザーを抱えているため、Firefox コアと呼ばれることもあります。さらに、Gecko はクロスプラットフォーム カーネルでもあり、Windows、BSD、Linux、Mac OS X で使用できます。

Presto: 現在 Opera で使用されているカーネルは、2003 年に Opera7 で初めて使用されました。このエンジンの特徴は、レンダリング速度が極限まで最適化されていることです。ただし、サーバー コアには Web ページの互換性が犠牲になります。実際、これは動的カーネルです。これまでのカーネルとの最大の違いは、スクリプト イベントに応じてページのすべてまたは一部を再解析できるという点です。さらに、同じ条件でのテストによると、このカーネルは Javascript の実行速度が最も速く、同じ Javascript を実行するのに必要な時間は、Presto カーネルが Trident および Gecko カーネルの約 1/3 にすぎません (Trident カーネルは最も遅いですが、2 つの違いはあまりありません）。残念ながら、Presto は商用エンジンであるため、Presto の開発は大幅に制限されます。

Webkit: Apple 独自のカーネル。Apple の Safari ブラウザで使用されるカーネルでもあります。 Webkit エンジンには、WebCore 植字エンジンと JavaScriptCore 解析エンジンが含まれています。これらはどちらも KDE の KHTML エンジンと KJS エンジンから派生したもので、GPL 条約に基づいてライセンスされており、BSD システムの開発をサポートします。したがって、Webkit もフリー ソフトウェアであり、オープン ソースです。セキュリティの面では、IE や Firefox による制限がないため、中国では Safari ブラウザは依然として非常に安全です。 Google の Chrome もカーネルとして Webkit を使用します。 WebKit カーネルは携帯電話でも広く使用されています。たとえば、Google の Gphone や Apple の iPhone で使用されているブラウザ カーネル エンジンはすべて WebKit に基づいています。 win10のIE Edgeも同様です…

* html5の新機能と削除された要素は何ですか？ HTML5 の新しいタグによるブラウザーの互換性の問題にどう対処するか? HTML と HTML5 を区別するにはどうすればよいですか?

HTML5 はもはや SGML のサブセットではなく、主に画像、場所、ストレージ、マルチタスクなどの機能の追加に関するものです。

ペイント キャンバス;

メディア再生用のビデオおよびオーディオ要素;

データの長期保存場所、ブラウザを閉じてもデータは失われません。ブラウザが閉じられた後、

記事、フッター、ヘッダー、ナビゲーション、セクションなどのより良いセマンティクスを持つコンテンツ要素。

新しいテクノロジーの Webworker、WebSocket。 、地理位置情報;

削除された要素:

純粋に表現力豊かな要素: Basefont、big、center、font、s、strike、tt、u; ユーザビリティに悪影響を与える要素: Frame、frameset、noframes --互換性:1.IE8/IE7/IE6 は、document.createElement メソッドによって生成されたタグをサポートします。この機能を使用して、これらのブラウザが HTML5 の新しいタグをサポートできるようにします。 2. HTML5SHIM フレームワークを使用します

- 差異: DOCTYPE は、HTML ロゴと HTML5 ロゴを区別するための重要な要素として宣言されています。また、新しい構造と機能要素に従って区別することもできます。

* HTML セマンティクスについての理解を簡単に説明してください。

セマンティック HTML は、コンテンツの構造 (コンテンツ セマンティクス) に準拠し、適切なタグ (コード セマンティクス) を選択する HTML コードであり、開発者がよりエレガントなコードを読み書きできるようにします。機械はそれをうまく解析します。

1. 意味論化はSEOに有益であり、検索エンジンのクローラーがWebページをよりよく理解できるようになり、それによってより効果的な情報を取得し、Webページの重みが増加します。 2. CSSを使わなくてもWebページの構造が明確になり、可読性が向上します。 3. チームの開発とメンテナンスに便利 セマンティックHTMLを使用すると、開発者が理解しやすくなり、チームの効率と調整能力が向上します。

4. 複数の端末デバイスのブラウザレンダリングをサポートします。

* HTML5 オフライン ストレージの使用方法を説明していただけますか?

HTML5 の重要な機能は、オフライン ストレージです。いわゆるオフライン ストレージは、一部のリソース ファイルをローカルに保存することで、後続のページのリロードでローカル リソース ファイルを使用し、オフラインで Web アプリケーションにアクセスし続けることができます。同時に、特定の方法 (関連ファイルの更新または関連 API の使用) を使用して、オフライン ストレージやその他の操作を更新および削除できます。

使用方法

: 上記の HTML5 オフライン ストレージは、新しく作成された .appcache ファイルに基づいています。 、このファイルを通じて、サーバー上の解析されたリストにはリソースがオフラインで保存され、これらのリソースは Cookie のように保存されます。その後、ネットワークがオフラインになると、ブラウザーはオフラインで保存されたデータを介してページを表示します。

(1) 以下に示すように、ページ ヘッダーにマニフェスト属性を追加します。

(2) オフライン ストレージ リソースを、cache.manifest ファイルに書き込みます。 app.js use window.applicationCache using window.applicationCache ‐ ‐ ‐ NETWORK:

 要件の実現。

* ブラウザは HTML5 オフライン ストレージ リソースをどのように管理し、ロードしますか?

オンラインの場合、ブラウザーは HTML ヘッダーにマニフェスト属性があることを検出し、アプリに初めてアクセスする場合、ブラウザーはマニフェスト ファイルを要求します。マニフェスト ファイルの内容をオフラインで保存します。アプリがアクセスされ、リソースがオフラインで保存されている場合、ブラウザーはオフライン リソースを使用してページを読み込み、新しいマニフェスト ファイルと古いマニフェスト ファイルを比較します。ファイルが変更されていない場合は、「いいえ」を実行します。操作が実行され、ファイルが変更されると、ファイル内のリソースが再ダウンロードされ、オフラインで保存されます。

オフラインの場合、ブラウザはオフラインに保存されているリソースを直接使用します。

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

共通点: はすべてブラウザ側に保存されており、起源は同じです。

の違い: Cookie データは常に同じオリジンからの http リクエストに含まれます (必要でない場合でも)。つまり、Cookie はブラウザとサーバーの間でやり取りされます。 SessionStorage と localStorage はデータをサーバーに自動的に送信せず、ローカルに保存するだけです。 Cookie データにはパスの概念もあり、Cookie が特定のパスにのみ属するように制限できます。ストレージ サイズの制限も異なります。また、Cookie データは 4K を超えることはできません。同時に、各 http リクエストには Cookie が含まれるため、Cookie はセッション ID などの非常に小さなデータの保存にのみ適しています。 sessionStorage と localStorage にもストレージ サイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。データの有効期間が異なります。 sessionStorage: は現在のブラウザ ウィンドウが閉じられるまでのみ有効で、当然永続化できません。 localStorage: は常に有効で、ウィンドウまたはブラウザが閉じられていても保存されるため、永続化として使用されます。データは Cookie 内にのみ設定され、ウィンドウまたはブラウザが閉じられても有効期限が切れるまで有効です。スコープが異なると、同じページであっても、sessionStorage は異なるブラウザ ウィンドウで共有されません。localStorage は、同じオリジンのすべてのウィンドウで共有されます。 Web Storage は、データ更新の通知をリスナーに送信できるイベント通知メカニズムをサポートしています。 Web Storage の API インターフェイスはさらに使いやすくなりました。

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

iframe の利点:
1. iframe は埋め込まれた Web ページをそのまま表示できます。
2. iframe を参照している Web ページが複数ある場合、iframe のコンテンツを変更するだけで呼び出される各ページのコンテンツが変更できるため、便利で高速です。
3. スタイルを統一するために Web ページのヘッダーとバージョンが同じ場合は、1 つのページとして記述し、iframe でネストすることで、コードの再利用性を高めることができます。
4. アイコンや広告などのサードパーティコンテンツの読み込みが遅い場合、これらの問題は iframe で解決できます。
iframe の欠点:
1. 大量のページが生成され、管理が容易ではありません。
2. iframe フレーム構造は、フレームが多い場合、上下左右のスクロール バーが表示され、訪問者の注意をそらし、ユーザー エクスペリエンスを低下させる可能性があります。
3. コードが複雑なので、一部の検索エンジンではインデックスを作成できません。これは非常に重要です。現在の検索エンジン クローラーは iframe 内のコンテンツを適切に処理できないため、iframe の使用は検索エンジンの最適化に悪影響を及ぼします。
4. 多くのモバイル デバイス (PDA 携帯電話) はフレームを完全に表示できず、デバイスの互換性が不十分です。
5.iframe ページではサーバーの http リクエストが増加するため、大規模な Web サイトには推奨できません。

ここまで分析した結果、基本的に iframe の代わりに Ajax が使用されるため、iframe はフロントエンド開発から徐々に撤退していきました。

* ラベルの機能は何ですか?どのように使用されますか? (for または で囲みます)

label label は、入力要素のラベル (マーカー) を定義します。
label 要素はユーザーに特別な効果を与えません。ただし、マウス ユーザーにとっては使いやすさが向上します。このコントロールは、ラベル要素内のテキストをクリックするとトリガーされます。つまり、ユーザーがラベルを選択すると、ブラウザは自動的にラベルに関連するフォーム コントロールにフォーカスを向けます。
Label には非常に便利な 2 つの属性があります。1 つは FOR で、もう 1 つは ACCESSKEY です。
FOR 属性 :
機能: Label タグにバインドされる HTML 要素を示します。このタグをクリックすると、バインドされた要素がフォーカスされます。
ACCESSKEY 属性:

機能: Label タグにバインドされた要素にアクセスするためのホットキーを表します。ホットキーを押すと、バインドされた要素がフォーカスされます。

* HTML5フォームのオートコンプリート機能をオフにするにはどうすればよいですか?

autocomplete 属性は、フォームでオートコンプリートを有効にするかどうかを指定します。
オートコンプリートを使用すると、ブラウザーはフィールドへの入力を予測できます。ユーザーがフィールドに入力を開始すると、ブラウザには、以前に入力した値に基づいてフィールドに入力するためのオプションが表示されます。 <form autocomplete="on/off">
デフォルト。オートコンプリート機能が有効であることを指定します。

off は、オートコンプリートの無効化を指定します。

* ブラウザーの複数のタブ間で通信を実現するにはどうすればよいですか? (Alibaba)

今後の SharedWorker API は、iframe 内、さらにはブラウザーのタブやウィンドウ内でデータを送信できます。数年前に Chrome に、少し前に Firefox に実装されましたが、IE と Safari ではまだ実現できません。
(次のアプリケーション シナリオに対する洗練された解決策を見つける必要があります: ある人があなたの Web サイトにアクセスしたとします。彼はログインし、2 番目のタブを開いて、そのタブでログアウトすることを選択します。この時点で、彼が開いた 3 番目のタブは、まだログインしているように見えますが、そのすべてのアクションはログイン ページにリダイレクトされるか、あるいはそれを狂わせることになります。たとえば、ユーザーがログインしているかどうかを判断し、ページに対応する変更を加えます。 、ユーザーに再認証を求めるダイアログ ボックスを表示したり、元のログイン ビューを表示したりできます)
この機能は WebSocket API を通じて実装できますが、これは少しやりすぎです。結局のところ、大きなナイフでニワトリを殺す方法はないので、クロス集計コミュニケーションの他の方法を探し始めました。私が最初に考えたのは、Cookie を使用して、setInterval を通じてユーザーがログインしているかどうかを定期的に確認することでした。この解決策には満足していません。決して満たされない可能性のある条件をチェックするために多くの CPU サイクルが無駄になるからです。現時点では、「comet」（ポーリングとも呼ばれます）、サーバーサイド イベント、または WebSocket を使用する方がよいと考えました。
ロバに乗ってロバを探していると知ったときは、まだ驚きました。答えはずっと localStorage だったからです。

localStorage がイベントをトリガーすることをご存知ですか?具体的には、別の閲覧コンテキストで項目が追加、変更、または削除されるたびに、イベントがトリガーされます。実際、これは、どのブラウザ タブが localStorage にアクセスしても、他のすべてのタブが window オブジェクトを通じてこのイベントをリッスンできることを意味し、タブが localStorage を変更すると、残りのタブのトリガー イベントに影響を与えます。これは、localStorage に値を割り当てている限り、ブラウザーのタブ間で通信できることを意味します。

* webSocket はローエンドのブラウザとどのように互換性がありますか? (Alibaba)

(WebSocketプロトコルはHTML5の新しいプロトコルです。ブラウザとサーバー間の全二重通信を実現します。ブラウザではhttp、cometによる双方向通信しか実現できません。ある程度はシミュレートできますが、効率は低く、適切なサーバーのサポートが必要です。フラッシュのソケットと xmlsocket は真の双方向通信を実現でき、Flex Ajax ブリッジを介してこれら 2 つの関数を JavaScript で使用できることが予測されます。 WebSocket がブラウザーに実装されると、上記の 2 つのテクノロジーに取って代わり、広く使用されるようになります。)
WebSocket は現在、ブラウザーでの「唯一の」ソケット標準であり、下位バージョンのアクセスを実現するために提供されるブラウザー API 内で渡されます。ブラウザには WebSocket 標準がありません。つまり、これらのブラウザでは、ユーザーがそれらを介してソケット通信を実装することはできません。互換性を解決するには、Ajax + サーバーサイド スクリプトのバックアップ ソリューション (Ajax + PHP ソケットなど) を用意する必要があります。
その他のソリューション: Adob​​e Flash Socket、ActiveX HTMLFile (IE)、マルチパート エンコーディングに基づく XHR の送信、ロング ポーリングに基づく XHR

* ページ可視性 API どのような用途に使用できますか?

visibilityState の値を通じてページが現在表示されているかどうか、および Web ページが開かれた時刻などを検出します。

ページが他のバックグラウンド プロセスに切り替わると、音楽またはビデオの再生を自動的に一時停止します。 ;

* ページにログインする方法 画面上に円形のクリック可能領域を実装しますか?

(1) マップ + エリアまたは svg

(2) border-radius

(3) 純粋な JS 実装には、点が円上にあるかどうかを確認したり、マウス座標を取得したりするための単純なアルゴリズムが必要です。

* 実装 境界線を使用せずに 1px の高さの線を描画します。異なるブラウザーの Quirksmode モードと CSSCompat モードでも同じ効果を維持できます。

* Web ページの確認コードは何のために使用されますか? どのようなセキュリティ上の問題がありますか?解決するには？

悪意のある登録とブルートフォースクラッキングを防止します。いわゆる悪意のある登録とブルートフォースクラッキングはすべてソフトウェアを使用して実行されます。 手動登録がどれほど高速であっても、情報を 1 つずつ入力する必要があるため、非常に時間がかかり、基本的にサーバーに影響はありません。ソフトウェアを使用して登録するための認証コードがない場合、数千のスレッドが同時に実行され、一度に数千のユーザーが登録される可能性があるため、サーバーのデータベースはすぐに肥大化し、運用効率が低下します。 退屈な人や競合他社がサイトに対して敵意を持っている場合、この方法では簡単にその人を麻痺させることができます。

* titeとh1の違い、bとstrongの違い、iとemの違いは何ですか？

tilte と h1 の違い

検索エンジンの観点から見ると、title タグはこのページのテーマを説明するために使用され、Web ページの重みの最高点となります。ただし、タイトルタグは記事本文には表示されません。 h1 タグは通常、記事の本文に表示され、訪問者に表示される記事のタイトルになります。したがって、これら 2 つのラベルは対立しないだけでなく、協力関係にあります。記事にはタイトルと h1 タグの両方が必要です。これにより、記事のトピックを強調するだけでなく、タイトルとキーワードも強調表示され、Web サイトの二重最適化の効果が得られます。一般的に、title タグと h1 タグの内容は同じになります。h1 タグが多すぎると、検索エンジンが混乱し、記事の主題を認識しにくくなります。

b と Strong の違い、および i と em の違い

実際、これら 2 つのタグのペアの最大の違いは、1 つは検索エンジン用で、もう 1 つはユーザー用であるということです。例として b タグとstrongタグを使用してみましょう。

bタグとstrongタグは主観的には大胆な印象を与えますが、検索エンジンにとってはbタグと通常のテキストに違いはなく、strongタグは強調の役割を果たします。言い換えれば、検索エンジンにあなたの特定の文が重要であると思わせたい場合は、強力なタグを使用します。ユーザーに太字の効果だけを見てもらいたい場合は、b タグを使用します。同様に、em タグは検索エンジンでも機能し、i タグでは斜体のみが表示されます。