|
HTML+CSS 1. WEB 標準と W3C の理解と知識<br /> タグを閉じ、小文字のタグを使用し、ランダムなネストを行わず、検索ロボットの検索確率を高め、外部の CSS および JS スクリプトを使用し、構造と動作を分離し、ファイルのダウンロードとページ速度を高速化し、より多くのユーザーがコンテンツにアクセスできるようにし、より幅広いデバイスからコンテンツにアクセスできるようにし、コードとコンポーネントを減らし、メンテナンスが容易で、改訂が便利で、ページ コンテンツを変更する必要がなく、コンテンツをコピーせずに印刷バージョンを提供し、Web サイトの使いやすさを向上させます。 2. xhtmlとhtmlの違いは何ですか？
HTML は基本的な Web デザイン言語であり、XHTML は XML ベースのマークアップ言語です。主な違いは次のとおりです。
XHTML 要素は正しくネストされている必要があります。
XHTML 要素は閉じられている必要があります。
タグ名は小文字でなければなりません。
XHTML ドキュメントにはルート要素が必要です。 3.Doctype? 厳密モードと混合モード - これら 2 つのモードをトリガーする方法と、それらを区別する意義は何ですか?
ドキュメントがどの仕様 (html/Xhtml) を使用するかを宣言するために使用されます。通常、これは厳しすぎます。フレームベースの HTML ドキュメントに XML 宣言を追加すると、解析方法が IE5.5 に変更される可能性があります。IE5.5 のバグがあります。 4. インライン要素とは何ですか? ブロックレベル要素とは何ですか? CSS ボックス モデルとは何ですか? ブロックレベル要素: div p h1 h2 h3 h4 form ul
インライン要素: ab br i span input select
CSS ボックス モデル: コンテンツ、境界、余白、パディング 5. CSS をインポートする方法は何ですか? link と @import の違いは何ですか?
インライン、埋め込み、外部リンクのインポートの違い: 前者を同時に読み込むことは互換性がなく、後者は CSS2.1 未満のブラウザではサポートされていません。
リンクはJavaScriptを使用してスタイルを変更することをサポートしていますが、 6. CSS セレクターとは何ですか? どのプロパティを継承できますか? 優先度アルゴリズムはどのように計算されますか?
インラインと重要のどちらが優先度が高いでしょうか? タグ セレクター、クラス セレクター、ID セレクターの継承は、ID > クラス > タグ セレクターを指定するのほど適切ではありません。後者の方が優先されます。 7. フロントエンド ページの 3 つのレイヤーとは何ですか? これらは何であり、どのような機能がありますか?
構造層 HTML プレゼンテーション層 CSS 動作層 js 8.CSS の基本構造は何ですか?
セレクター {属性1:値1;属性2:値2;...} 9. どのブラウザでページをテストしましたか? これらのブラウザのカーネルは何ですか?
Ie (Ie カーネル) Firefox (Gecko) Google (webkit) opear (Presto) 10. IE6のバグに対する解決策をいくつか書き留める
1. ディスプレイの使用により二重マージンバグが発生する
2.3 float の使用によりピクセルの問題が発生する。dislpay:inline -3px を使用する。
3. ハイパーリンクはクリック後に無効になります。正しい記述順序を使用してください: リンクを訪問しました ホバー アクティブ
4.つまり、z-indexの問題は、親に対して位置:相対的を追加する
5. jsコードを使用してPNGを透明にする
6.Min-height 最小の高さ!重要な解決策
7.SelectはIE6でiframeネストをカバーして使用します
8. 幅約 1 ピクセルのコンテナを定義する方法がないのはなぜですか (IE6 のデフォルトの行の高さが原因。over:hidden、zoom:0.08 line-height:1px を使用してください) 11. タグ内の title 属性と alt 属性の違いは何ですか?
Alt 画像が表示されていない場合はテキストで表されます。
タイトルはこの物件に関する情報を提供します 12.CSS リセットの機能と使用方法について説明します。
リセットはブラウザの CSS デフォルト プロパティをリセットします。ブラウザは異なります。
異なるスタイルをリセットして統一する 13. CSS スプライトとその使用方法について説明します。
CSS スプライトは、多数の小さな画像を 1 つの大きな画像に結合します。
サーバーへの画像リクエスト数を減らす 14.ブラウザ標準モードとQuirksモードの違いは何ですか?
異なるボックスモデルのレンダリングモードではwindow.top.document.compatModeが使用されます。
理由モードを表示できる 15. ウェブサイトのファイルとリソースをどのように最適化しますか? 期待される解決策は次のとおりです。
ファイルの統合 ファイルの最小化/圧縮 CDNホスティングの使用 キャッシュの使用 16. セマンティック HTML とは何ですか?
タグの直感的な理解は検索エンジンのクロールに有益です 17. 浮遊物をクリアするいくつかの方法、それぞれの長所と短所
1. フロートをクリアするには空のタグを使用します clear:both (理論的には、任意のタグをクリアできますが、意味のないタグが追加されます)
2. overflow:auto を使用します (空のラベル要素はフロートをクリアし、意図しないコードを追加する必要があります。IE との互換性のために zoom:1 を使用します)
3. afert疑似要素を使用してフロートをクリアする（IE以外のブラウザの場合） ジャバスクリプト 1. JavaScript の typeof はどのようなデータ型を返しますか?
オブジェクト番号関数ブール値underfind 2. 必須の型変換の例を 3 つと暗黙の型変換の例を 2 つ挙げてください。
必須 (parseInt、parseFloat、数値)
暗黙的 (== – ===) 3. split() と join() の違いは、前者は配列に分割するのに対し、後者は配列を文字列に変換することです。 4. 配列メソッド pop() push() unshift() shift()
Push()は末尾に追加し、Pop()は末尾から削除します
Unshift() ヘッダー追加 shift() ヘッダー削除 5. イベント バインディングと通常のイベントの違いは何ですか? 6. IEとDOMのイベントストリームの違い
1. 実行順序が異なります。
2. パラメータが異なる
3. イベントを追加するかどうか
4.これが問題を指摘している 7. IE と標準で互換性のある書き込み方法は何ですか?
変数 ev = ev || window.event
document.documentElement.クライアント幅 || document.body.クライアント幅
変数ターゲット = ev.srcElement||ev.target 8. Ajax リクエストを行う際の get と post の違い。1 つは URL の背後にあり、もう 1 つは仮想キャリアにあります。サイズ制限とセキュリティの問題があります。アプリケーションは異なります。1 つはフォーラムなど、リクエストのみを必要とする場所用で、もう 1 つはパスワードの変更に似ています。 9. callとapplyの違い
オブジェクトを呼び出します(これ、obj1、obj2、obj3)
Object.apply(これ、引数) 10. Ajax リクエストを行う際、eval parse を使用して JSON データをどのように解釈すればよいですか? セキュリティを考慮すると、parse を使用する方が信頼性が高くなります。
11.bはaのメソッドを継承する 12. 非線スタイルを取得する関数を書く
関数 getStyle(obj, attr, value) {
if (!値) {
（obj.currentStyle）の場合{
obj.currentStyle(attr) を返します。
} それ以外 {
obj.getComputedStyle(属性、false)
}
} それ以外 {
obj.style[attr] = 値
}
} 13. イベント委任とは何ですか? イベント委任は、イベント バブリングの原理を利用して、自分自身でトリガーされたイベントを、代わりにその親要素によって実行できるようにします。
https://www.jb51.net/article/116997.htm 例については、このリンクを参照してください。 14. クロージャとは何ですか? クロージャの特徴は何ですか? クロージャはページにどのような影響を与えますか? クロージャは他の関数の内部変数を読み取ることができる関数です。 1. 変数iを各段落オブジェクト（p）に保存します。 1. 関数init1() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].i = i;
5. pAry[i].onclick = 関数() {
6.アラート(this.i);
7. }
8. }
9. } 2. 変数iを無名関数自体に保存する 1. 関数 init2() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (pAry[i].onclick = function() {
5.アラート(arguments.callee.i);
6. }).i = i;
7. }
8. } 3. クロージャのレイヤーを追加し、iは関数パラメータとして内部関数に渡されます。 1. 関数 init3() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (関数(引数){
5. pAry[i].onclick = 関数() {
6.アラート(引数);
7. };
8. })(i);//呼び出しパラメータ
9. }
10.} 4. クロージャのレイヤーを追加し、iをローカル変数として内部関数に渡す 1. 関数 init4() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. (関数() {
5. var temp = i; // 呼び出し時のローカル変数
6. pAry[i].onclick = 関数() {
7.アラート(temp);
8. }
9. })();
10. }
11.} 5. クロージャのレイヤーを追加し、応答イベントとして関数を返します（3との微妙な違いに注意してください）
1. 関数 init5() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i < pAry.length; i++ ) {
4. pAry[i].onclick = function(arg) {
5. return function() { //関数を返す
6.アラート(引数);
7. }
8. }(i);
9. }
10.} 6. Functionで実装すると、各関数インスタンスはクロージャを生成する。 1. 関数 init6() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].onclick = new Function("alert(" + i + ");"); //newは一度に関数インスタンスを生成します
5. }
6. } 7. Functionで実装し、6との違いに注意する 1. 関数 init7() {
2. var pAry = document.getElementsByTagName("p");
3. for( var i=0; i<pAry.length; i++ ) {
4. pAry[i].onclick = Function('alert('+i+')');
5. }
6. }
15. イベントのバブルとデフォルトイベントを防ぐ方法
cancelBubbleはfalseを返す
16. 特定のポイントにメソッドを追加、削除、置換、挿入する
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild 17. jsonpの原理とそれが本当のajaxではない理由を説明してください
スクリプトタグとコールバック関数を動的に作成する
Ajaxはページを更新せずにデータ操作を要求するものである 18. JavaScript のローカル オブジェクト、組み込みオブジェクト、ホスト オブジェクト。ローカル オブジェクトは、配列、obj、regexp などであり、new によってインスタンス化できます。組み込みオブジェクトは、gload、Math などであり、インスタンス化できません。ホストは、ブラウザーに付属するドキュメント、ウィンドウなどです。 19. ドキュメントの読み込みとドキュメントの準備の違い
Document.onloadは構造とスタイルが読み込まれた後にjsを実行します。
Document.readyにはネイティブバージョンではこのメソッドはありませんが、jQueryにはあります。
$().ready(関数) 20. 「==」と「===」の違いは、前者は型を自動的に変換しますが、後者は変換しないことです。 21. JavaScript の同一生成元ポリシー: スクリプトは、同じ生成元からのウィンドウとドキュメントのプロパティのみを読み取ることができます。
ここでの同じソースは、ホスト名、プロトコル、ポート番号の組み合わせを指します。 22. 配列から重複を削除するメソッドを書く
関数 oSort(arr)
{
var 結果 ={};
var newArr = [];
for(var i=0;i < arr.length;i++)
{
if(!結果[arr])
{
新しいArr.push(arr)
結果[arr]=1
}
}
newArrを返す
} 23. メディアピッカー
@media (最小幅: 992px) および (最大幅: 1199px)
@media スクリーンと (最小幅: 768px)
HTMLとCSS 1. テストによく使用されるブラウザは何ですか?カーネル (レイアウト エンジン) とは何ですか?
(Q1) ブラウザ: IE、Chrome、FireFox、Safari、Opera。
(Q2) カーネル: Trident、Gecko、Presto、Webkit。
2. インライン要素とブロックレベル要素の違いは何ですか?インラインブロック要素の互換性使用? (IE8以下)
(Q1) インライン要素: 水平方向に配置され、ブロックレベル要素を含めることはできません。幅を設定しても効果はありません。
高さが無効です (line-height は設定できます)、マージンの上部と下部が無効です、パディングの上部と下部が無効です。
ブロックレベル要素: それぞれが 1 行を占め、垂直に配置されます。改行で始まり、改行で終わります。
(Q2) 互換性: display:inline-block;*display:inline;*zoom:1;
3. フロートをクリアする方法は何ですか?どちらの方が良い方法でしょうか?
（質問１）
（1）親divは高さを定義します。
（2）最後に空のdivタグclear:bothを追加します。
（3）親divは疑似クラスafterとzoomを定義します。
（4）親divはoverflow:hiddenを定義します。
（5）親divはoverflow:autoを定義します。
（6）親divもフロートするため、幅を定義する必要があります。
（7）親divはdisplay: tableを定義します。
（8）最後にbrタグclear:bothを追加します。
(Q2) 3 番目の方法の方が優れており、多くの Web サイトで使用されています。
4.ボックス サイズ設定でよく使用されるプロパティは何ですか?それぞれの機能は何ですか?
(Q1)ボックスのサイズ設定: コンテンツボックス|ボーダーボックス|継承;
(Q2) content-box: 幅と高さはそれぞれ要素のコンテンツ ボックスに適用されます。
幅と高さに加えて、要素のパディングと境界線を描画します (要素のデフォルト)。
border-box: 要素に指定されたパディングと境界線は、設定された幅と高さの範囲内で描画されます。コンテンツの幅と高さは、設定された幅と高さからそれぞれ境界線とパディングを減算することによって取得されます。
5.Doctypeの機能は何ですか?標準モードと互換モードの違いは何ですか?
(Q1)>!DOCTYPE< は、ブラウザのパーサーに、このドキュメントを解析するために使用するドキュメント標準を指示します。 DOCTYPE が存在しないか不正な場合、ドキュメントは互換モードでレンダリングされます。
(Q2) 標準モードレイアウトとJS操作モードはどちらもブラウザでサポートされている最高水準で実行されます。互換モードでは、ページは緩やかな下位互換性のある方法で表示され、サイトが壊れないように古いブラウザの動作をエミュレートします。
6. HTML5 ではなぜ >!DOCTYPE HTML< と書くだけでよいのですか?
HTML5 は SGML に基づいていないため、DTD を参照する必要はありませんが、ブラウザーの動作を規制するには (ブラウザーが適切に動作するようにするには) doctype が必要です。
HTML4.01 は SGML に基づいているため、文書で使用される文書タイプをブラウザに伝えるために DTD を参照する必要があります。
7. ページにスタイルをインポートする場合、link と @import を使用する場合の違いは何ですか?
(1) linkはXHTMLタグです。CSSの読み込みだけでなく、RSSの定義やrelリンク属性の定義などにも使用できます。一方、@importはCSSによって提供されており、CSSの読み込みにのみ使用できます。
（２）ページが読み込まれると、リンクも同時に読み込まれ、@importは参照します。
CSS はページが読み込まれるまで待機してから読み込みます。
（３）インポートはCSS2.1で提案されており、IE5以上でのみ認識されます。
リンクは XHTML タグであり、互換性の問題はありません。
8.ブラウザカーネルについての理解を教えてください。
主に2つの部分に分かれています：レンダリングエンジン（レイアウトエンジニアまたは
レンダリング エンジンと JS エンジン。
レンダリングエンジン: Webページのコンテンツ（HTML、XML、画像など）を取得する役割を担います。
情報を整理し（CSSの追加など）、Webページがどのように表示されるかを計算します。
その後、モニターまたはプリンターに出力されます。ブラウザカーネルによって Web ページの構文の解釈が異なるため、レンダリング効果も異なります。
すべてのウェブブラウザ、メールクライアント、その他の
ネットワーク コンテンツを表示するアプリケーションにはカーネルが必要です。
JS エンジンは JavaScript を解析して実行し、Web ページに動的な効果をもたらします。
当初は、レンダリング エンジンと JS エンジンの間に明確な区別はありませんでした。その後、JS エンジンが独立性を高めるにつれて、カーネルはレンダリング エンジンのみを参照する傾向がありました。
9.HTML5 の新機能は何ですか? HTML5 の新しいタグのブラウザ互換性の問題にどのように対処しますか? HTML と HTML5 を区別するにはどうすればよいでしょうか?
（質問１）
HTML5 はもはや SGML のサブセットではありません。主に、画像、場所、ストレージ、マルチタスクなどの機能が追加されています。
（１）描画キャンバス
（２）メディア再生のためのビデオ及びオーディオ要素
（３）ローカルオフラインストレージlocalStorageはデータを長期間保存し、ブラウザを閉じてもデータは失われません。
（4）セッションストレージ内のデータはブラウザを閉じると自動的に削除されます。
（５）記事、フッター、ヘッダー、ナビゲーション、セクションなどのより優れたセマンティックコンテンツ要素。
（6）フォームコントロール：カレンダー、日付、時刻、電子メール、URL、検索。
（7）新技術：WebWorker、WebSocket、Geolocation
（質問２）
IE8/IE7/IE6 は、document.createElement メソッドによって生成されたタグをサポートします。
この機能を使用すると、これらのブラウザで新しい HTML5 タグをサポートできるようになります。
ブラウザが新しいタグをサポートしたら、タグのデフォルト スタイルも追加する必要があります。
もちろん、html5shim などの成熟したフレームワークを直接使用することもできます。
>!--[IE 9の場合]<
>スクリプト< src="http://html5shim.googlecode.com/svn/trunk/html5.js">/スクリプト<
>![endif]--<
10. HTML セマンティクスについての理解を簡単に説明してください。
適切なものに適切なラベルを使用してください。
セマンティック HTML はページのコンテンツを構造化して明確にし、ブラウザや検索エンジンによる解析を容易にします。
CSS スタイルがなくても読みやすいドキュメント形式で表示します。
検索エンジンのクローラーも HTML タグを使用して個々のキーワードのコンテキストと重みを判断します。これは SEO に役立ちます。
ソースコードを読む人にとって、Web サイトをブロックに分割しやすくなり、読みやすく、保守しやすく、理解しやすくなります。
JavaScript 1. jsの基本的なデータ型を紹介する
未定義、Null、ブール値、数値、文字列
2. js の組み込みオブジェクトとは何ですか?
データカプセル化クラスオブジェクト: オブジェクト、配列、ブール値、数値、文字列
その他のオブジェクト: 関数、引数、数学、日付、正規表現、エラー
3. このオブジェクトの理解
これは常に関数の直接呼び出し元（間接呼び出し元ではない）を指します。
新しいキーワードがある場合、これは新しいオブジェクトを指します。
イベントでは、 this はイベントをトリガーしたオブジェクトを参照します。特に、IE の attachmentEvent の this は常にグローバル オブジェクト Window を参照します。
4.eval は何をしますか?
その機能は、対応する文字列を JS コードに解析して実行することです。
eval は安全ではなく、パフォーマンスに非常に負荷がかかるため (1 回は js ステートメントに解析され、もう 1 回は実行されるため)、使用を避ける必要があります。
JSON 文字列を JSON オブジェクトに変換する場合は、eval、var obj =eval('('+ str +')'); を使用できます。
5. DOM でノードを追加、削除、移動、コピー、作成、検索する方法
// 新しいノードを作成する
createDocumentFragment() //DOMフラグメントを作成する
createElement() //特定の要素を作成する
createTextNode() //テキストノードを作成する
// 追加、削除、置換、挿入
子要素を追加します。
子を削除します。
子を置き換える()
insertBefore() //既存の子ノードの前に新しい子ノードを挿入する
// 検索
getElementsByTagName() //タグ名で
getElementsByName() //要素のName属性の値を通じて
(IE はフォールト トレランスが強く、名前の値に等しい ID を含む配列を取得します)
getElementById() //要素ID、一意性による
6. null と undefined の違いは何ですか?
null は「何もない」ことを表すオブジェクトであり、数値に変換すると 0 になります。undefined は「何もない」ことを表すプリミティブ値であり、数値に変換すると NaN になります。
未定義：
（１）変数が宣言されているが値が割り当てられていない場合、その変数は未定義とみなされます。
（２）関数が呼び出されたとき、提供されるべきパラメータが提供されず、そのパラメータは未定義となる。
（３）オブジェクトにプロパティが割り当てられていない場合、そのプロパティの値は未定義になります。
（4）関数に戻り値がない場合、デフォルトではundefinedを返します。
ヌル:
（１）関数パラメータとして、関数パラメータがオブジェクトではないことを示します。
（２）オブジェクトのプロトタイプチェーンの終点として機能します。
7. 新しいオペレーターは具体的に何をするのでしょうか?
（1）空のオブジェクトを作成し、this変数がそのオブジェクトを参照します。
この関数のプロトタイプも継承します。
（２）thisによって参照されるオブジェクトにプロパティとメソッドが追加されます。
（３）新しく作成されたオブジェクトはthisによって参照され、暗黙的に返されます。
8. JSON について何を知っていますか?
JSON (JavaScript Object Notation) は軽量のデータ交換形式です。これは JavaScript のサブセットに基づいています。
データ形式はシンプルで、読み書きが簡単で、帯域幅をほとんど占有しません。
形式: キーと値のペア、例: {'age':'12', 'name':'back'}
9.call() と apply() の違いと機能は何ですか?
apply() 関数は 2 つのパラメータを取ります。1 つ目はコンテキストで、2 つ目はパラメータの配列です。コンテキストが null の場合、代わりにグローバル オブジェクトが使用されます。
例: function.apply(this,[1,2,3]);
call() の最初の引数はコンテキストであり、その後にインスタンスに渡される引数のシーケンスが続きます。
例: function.call(this,1,2,3);
10.UA を取得するにはどうすればいいですか?
関数whatBrowser() {
document.Browser.Name.value=navigator.appName;
document.Browser.Version.value=navigator.appVersion;
document.Browser.Code.value=navigator.appCodeName;
document.Browser.Agent.value=navigator.userAgent;
} 他の
1. HTTP ステータス コードについて何を知っていますか?
100 続行 続行、通常は投稿リクエストを送信するとき、
httpヘッダーの後、サーバーはこの情報を確認してから、特定のパラメータ情報を送信します。
200 OK 正常応答情報
201 作成 リクエストは成功し、サーバーは新しいリソースを作成しました
202 承認 サーバーはリクエストを受け入れましたが、まだ処理していません
301 恒久的に移動されました 要求された Web ページは新しい場所に恒久的に移動されました。
302 一時的なリダイレクトが見つかりました。
303 その他の一時的なリダイレクトを参照し、常に新しい URI への GET リクエストを使用します。
304 変更されていません 要求された Web ページは、前回の要求以降変更されていません。
400 不正なリクエスト サーバーはリクエストの形式を理解できないため、クライアントは同じ内容で再度リクエストを試みるべきではありません。
401 許可されていません。リクエストは許可されていません。
403 禁止 アクセスは禁止されています。
404 見つかりません URI に一致するリソースが見つかりませんでした。
500 内部サーバー エラー 最も一般的なサーバー側エラーです。
503 サービスは利用できません。サーバーは一時的にリクエストを処理できません (過負荷またはメンテナンスのため)。
2. どのようなパフォーマンス最適化方法がありますか?
（１）HTTPリクエスト数を減らす：CSSスプライト、JS、CSSソースコード圧縮、大きな画像
小規模な制御に適しています。Web ページの Gzip、CDN ホスティング、データ キャッシュ、イメージ サーバーなどです。
（２）フロントエンドテンプレートJS +データにより、HTMLタグによる帯域幅の浪費を削減します。
フロントエンドは変数を使用してAJAXリクエストの結果を保存し、リクエストを行わずにその都度ローカル変数を操作することでリクエスト数を削減します。（3）DOM操作の代わりにinnerHTMLを使用することでDOM操作の回数を減らし、JavaScriptのパフォーマンスを最適化します。
（４）設定するスタイルが多数ある場合は、styleを直接操作するのではなく、classNameを設定します。
（５）グローバル変数の使用頻度を減らし、DOMノード検索の結果をキャッシュします。 IO 読み取り操作を減らします。
（6）CSS式（動的プロパティとも呼ばれる）の使用は避けてください。
（7）画像をプリロードし、スタイルシートを上部に配置し、スクリプトを下部に配置して、タイムスタンプを追加します。
3. グレースフル デグラデーションとプログレッシブ エンハンスメントとは何ですか?
グレースフル デグラデーション: この Web サイトはすべての最新ブラウザで正常に動作します。
古いブラウザを使用している場合は、コードによってブラウザが正しく動作するかどうかがチェックされます。
IEのユニークなボックスモデルレイアウト問題のため、IEの異なるバージョンに対するハックプラクティス
グレースフルデグラデーション、機能をサポートできないブラウザに代替ソリューションを追加する、
これにより、完全に無効になることなく、古いブラウザでエクスペリエンスが何らかの形で低下する可能性があります。
プログレッシブ エンハンスメント: すべてのブラウザーでサポートされている基本機能から始めて、新しいブラウザーでのみサポートされている機能を徐々に追加し、基本的なブラウザーに害のない追加のスタイルと機能をページに追加します。ブラウザでサポートされている場合は、自動的にレンダリングされ、機能します。
4. メモリ リークを引き起こす可能性のある一般的な操作は何ですか?
メモリ リークとは、所有しなくなったり、必要がなくなったりした後も存続するオブジェクトのことです。
ガベージ コレクターは定期的にオブジェクトをスキャンし、各オブジェクトを参照する他のオブジェクトの数をカウントします。
オブジェクトへの参照数が0の場合（他のオブジェクトがそのオブジェクトを参照していない）、
または、オブジェクトへの唯一の参照が循環的である場合、オブジェクトのメモリを再利用できます。
setTimeout の最初の引数として関数ではなく文字列を使用すると、メモリ リークが発生する可能性があります。
クロージャ、コンソール ログ、ループ (2 つのオブジェクトが相互に参照し、保持し合うとサイクルが発生します)
5. スレッドとプロセスの違い プログラムには少なくとも 1 つのプロセスがあり、プロセスには少なくとも 1 つのスレッドがあります。
スレッド分割の規模はプロセスよりも小さいため、マルチスレッド プログラムは高い並行性を実現します。
さらに、プロセスは実行中に独立したメモリ ユニットを持ちますが、複数のスレッドはメモリを共有します。
これにより、プログラムの実行効率が大幅に向上します。
スレッドは実行中のプロセスとは異なります。それぞれの独立したスレッドには、プログラム実行のエントリ ポイント、順次実行シーケンス、およびプログラムの終了ポイントがあります。ただし、スレッドは独立して実行することはできず、複数のスレッド実行制御を提供するアプリケーション プログラム内に存在する必要があります。
論理的な観点から見ると、マルチスレッドの意味は、アプリケーション内で複数の実行部分を同時に実行できることです。ただし、オペレーティング システムは、プロセスのスケジュール、管理、およびリソースの割り当てを実装するために、複数のスレッドを複数の独立したアプリケーションとして扱いません。これがプロセスとスレッドの重要な違いです。
フロントエンド開発エンジニアの面接の質問 Javascript
1. レイヤー内のコンテンツを動的に変更するには、次の方法を使用できます（AB）
a)内部HTML
b)内部テキスト
c) レイヤーの非表示と表示を設定することで実現します
d) レイヤーのスタイルプロパティの表示プロパティを設定する 2. キーボードでAを押すと、onKeyDownイベントを使用してevent.keyCodeを印刷した結果は(A)になります。
a)65
b)13
97年
37 37 3. JavaScript では、次のオプションは配列メソッドではありません (B)。
a)ソート()
b)長さ()
c)連結()
d)逆()
4. 選択したオプションのインデックス番号を取得するために使用できるオプションは次のどれですか? (B)
a) 障害者
b)選択されたインデックス
c)オプション
d) 複数 5. 画像に「送信」ボタンと同じ機能を持たせたいのですが、フォーム送信はどのように記述すればよいですか? (A)
a) 画像のonClickイベントで手動で送信する
b) 画像にonSubmitイベントを追加する
c) 画像のonSubmitイベントで手動で送信する
d) フォームに自動的に送信する 6. div レイヤーとテキスト ボックスを同じ行に配置する正しいコードは (D) です。
a)
b)
c)
d)
7. 次の選択肢のうち、正しい説明は (2 つ選択) です。 ( A D )
a) options.add(new Option('a','A')) はドロップダウンリストオプションを動的に追加できます。
b) option.add(new Option('a','A')) はドロップダウンリストオプションを動的に追加できます。
c) new Option('a','A') では、'a' はリスト オプションの値を表し、'A' はそれをページに表示するために使用されます。
d) new Option('a','A') では、'A' はリスト オプションの値を表し、'a' はそれをページに表示するために使用されます。 8. var emp = 新しい配列(3);
for(変数 i が emp 内にある)
次の回答は、for ループ コードと置き換えることができます (いずれか 1 つを選択)。 （デ）
for(var i =0; i
B for(var i =0; i
C for(var i =0; i
D for(var i =0; i 9. カスケードメニュー機能を作成すると、ドロップダウンリストボックスの(A)イベントが呼び出されます。
a) 変更時
b) オンフォーカス
c)選択された
d) クリック時 10. 配列を宣言するための次の文のうち、誤った選択肢は (C) です。
a)Var arry = 新しい配列()
b)Var arry = 新しい配列(3)
c)Var arry[] = 新しい配列(3)(4)
d)Var arry = 新しい配列('3','4') 11. 次のプロパティのうち、レイヤーの非表示を実現できるのはどれですか? (C)
a)表示:false
b)表示:非表示
c)表示:なし
d)表示:”” 12. 次のオプションのうち、ドキュメント オブジェクトのメソッドに属さないものはどれですか。(D)
a)フォーカス()
b)要素IDを取得する()
c)名前で要素を取得する()
d)背景色() 13. 次のどれがキーボード押下イベントですか (AB)
a) onKeyDown
b)キー押下時
c)キーコード
d) マウスオーバー時
14. JavaScriptフォーム検証の目的は（B）
a) ユーザーの正しい情報をサーバーに送信する
b) 提出されたデータが実際のものと一致していることを確認する
c) ページを美しく、豊かにする
d) サーバーへの負荷を軽減する
15. 表示属性の共通値には（C）は含まれません
a) インライン
b)ブロック
c)隠された
d)なし 16.pixelTop 属性と top 属性に関する次の記述のうち、正しいものはどれですか。 （デ）
a) はすべてLocationオブジェクトのプロパティです
b) 使用した場合、戻り値は文字列です
c) どちらもピクセル単位で値を返します。
d) 上記のいずれでもない 17. open メソッドを使用して、ブラウザ ツールバー、アドレス バー、メニュー バーを含むウィンドウを開きます。正しいオプションは __D__ です。
a)open("x.html","HI","toolbas=1,scrollbars=1,status=1");
b)open("HI","スクロールバー=1,場所=1,ステータス=1");
c)open("x.html","status=yes,menubar=1,location=1");
d)open("x.html","HI","toolbas=yes,menubar=1,location=1"); 18. mydivという名前のレイヤーを閉じる正しいコードは(C)です。
a)document.getElementByIdx_x_x_x(mydiv).style.display="none";
b)document.getElementByIdx_x_x_x("mydiv").style.display=none;
c)document.getElementByIdx_x_x_x("mydiv").style.display="none";
d)document.getElementByIdx_x_x_x("mydiv").style.display=="none";
19. Div+CSSレイアウトを使用する理由フォームとコンテンツを分離すると、ページコードが大幅に削減され、ページの閲覧速度が向上し、構造が明確になり、SEOにも役立ちます。
修正時間を短縮し、レイアウトをより便利にし、一度設計すれば何度も使用できます 20. ブロック要素の特徴は何ですか? デフォルトでブロック要素となる要素はどれですか? ブロック要素は常に新しい行で始まります。
高さ、行の高さ、上下の余白はすべて制御可能です。
ブロック要素に幅が設定されていない限り、デフォルトの幅はコンテナーの 100% になります。
、
、そして 21. インライン要素の特徴は何ですか? どの要素がインライン要素ですか?
他の要素は 1 行にあります。
高さ、行の高さ、上下の余白は変更できません。
幅はテキストまたは画像の幅であり、変更することはできません。 インライン要素は次のとおりです: 、、、
、、
そして。 22. JavaScript で式 parseInt("X8X8")+paseFloat('8') を実行するとどのような結果になりますか? (C)
a)8+8
b)88
16 （ハ）
d) 「8」+「8」 23. Stringオブジェクトのメソッドには(C)は含まれません。
charAt() は、
b) 部分文字列()
c)長さ
d) 大文字に変換() 24. setTimeout("check",10) に関する次の記述のうち正しいものはどれですか? (D)
a) プログラムループは10回実行される
b) チェック機能は10秒ごとに実行されます
c) 10がチェック関数にパラメータとして渡される
d) チェック関数は10ミリ秒ごとに実行されます。 25. 次の単語のうち、JavaScript のキーワードではないものはどれですか。(C)
a)と
b)親
c)クラス
d) 無効
序文
この記事では、フロントエンドの面接に関する高品質な質問（ほとんどがインターネットからのもの）をまとめています。初心者は、この記事を読んだ後、そこに含まれる原則を注意深く研究する必要があります。重要な知識は、体系的かつ徹底的に研究して、独自の知識チェーンを形成する必要があります。決して手を抜かないでください。面接に合格することだけを目指すのは間違っています。
インタビュー中に注目すべき点がいくつかあります: (出典: Cheng Shaofei の github: @wintercn) 面接の質問: レベルと役職に応じて、エントリーレベルからエキスパートレベルまで、範囲↑、深さ↑、方向↑が異なります。 質問の種類: 技術的なビジョン、プロジェクトの詳細、理論的知識に関する質問、アルゴリズムに関する質問、オープン質問、ケースに関する質問。 フォローアップの質問: 自分または面接官が理解できなくなるまで質問を続けるようにしてください。これにより、質問の差別化と深みが大幅に広がり、実際の能力を知ることができます。なぜなら、このような連想的な知識は長い時間をかけて習得されるものであり、決して一時的に記憶できるものではないからです。 質問にどれだけうまく答えたとしても、面接官（あなたの直属の上司の場合もあります）は、この人を同僚として望むかどうかを検討します。だから態度が重要なのです。 （ブラインドデートのような感じです） 経験豊富なエンジニアは絶対と相対を混同することがあります。チームには信頼できる才能（信頼性）が必要なので、そのような人はいないほうがよいでしょう。 フロントエンド開発面接の知識ポイントの概要:
HTML＆CSS：
Web標準、ブラウザのカーネルの違い、互換性、ハッキング、CSSの基本の理解：レイアウト、ボックスモデル、セレクターの優先順位と使用、HTML5、CSS3、モバイル適応
JavaScript：
データ型、オブジェクト指向、継承、閉鎖、プラグイン、スコープ、クロスドメイン、プロトタイプチェーン、モジュール化、カスタムイベント、メモリリーク、イベントメカニズム、非同期ロードコールバック、テンプレートエンジン、Nodejs、JSON、Ajaxなど。 他の：
HTTP、セキュリティ、正規表現、最適化、リファクタリング、応答性、モバイル、チームワーク、保守性、SEO、UED、アーキテクチャ、キャリア フロントエンドエンジニアとして、何年働いても、次の知識ポイントを習得する必要があります。 この記事は、フロントエンドのエッセイでWang Zimoによって発行されました
1。DOM構造 - 2つのノード間にどのような関係が存在する可能性があり、ノード間で任意に移動する方法。
2。DOM操作 - ノードを追加、削除、移動、コピー、作成、および検索する方法など。 3。イベント - イベントの使用方法と、IEと標準DOMイベントモデルの違い。 4。XMLHTTPREQUEST-それは何ですか、完全なGETリクエストの実行方法、およびエラーを検出する方法。 5.厳密なモードと無差別モード - これらの2つのモードをトリガーする方法と、それらを区別することの重要性は何ですか。 6。ボックスモデル - マージン、パディング、境界線の関係、およびIE8以下のブラウザのボックスモデル 7.ブロックレベルの要素とインライン要素 - CSSでそれらを制御する方法と合理的に使用する方法 8。フローティング要素 - それらの使用方法、それらが抱えている問題、およびそれらを解決する方法。 9。HTMLとXHTML- 2つの違いは何ですか？ 10。JSON-機能、使用、および設計構造。
| 
