ジュニアフロントエンド面接の質問 (1) html/css/js

1.HTML

1. .如何理解HTML语义化的？

セマンティックタグは、HTML を記述するための方法論です。たとえば、段落には P、タイトルには h1 ～ h6、コンテンツには main などを使用します。 HTMLの記述仕様が明確になり、検索エンジンが取得するのに適し、私たちが読むのに適し、チームのメンテナンスに役立ちます。

2. HTMLタグとは何ですか?

ヘッダー、フッター、メイン、ビデオなど。

3. CanvasとSVGの違い

Canvas は主にブラシを使用して 2D グラフィックを描画し、SVG はラベルを使用して不規則なベクトルグラフィックを描画します。

同じことです。どちらも 2D グラフィックを描画するために使用されます。

違い：

Canvas はビットマップを描画し、SVG はベクトル画像を描画します。

ノードが多すぎると SVG のレンダリングが遅くなります。Canvas の方がパフォーマンスは優れていますが、記述はより複雑です。

SVG はレイヤー化とイベントをサポートしていますが、Canvas はサポートしていませんが、ライブラリを使用して実装できます。

2.CSS

1.BFCとは何ですか?

BFC、ブロックレベルの書式設定コンテキスト。

1. BFCの発動条件[5]

フローティング要素

絶対的に配置された要素

インラインブロック要素

オーバーフロー値は表示されません block element/overflow:hedden

フレキシブル要素、表示:flex

2. どのような問題が解決されましたか?

クリアフロート

垂直マージンの結合を防止する

2. 垂直方向のセンタリングを実現するにはどうすればよいですか?

フレックスレイアウト [優先度が最も高く、最も使用される]

マージントップ:50%

翻訳:50%

絶対マージン自動

テーブルには独自の属性があります。

div は table としてインストールされます; (表示: table)

3. CSS セレクターの優先順位を決定するにはどうすればよいですか?

優先順位がより具体的になる。

優先順位が同じ場合、後のものは前のものをオーバーライドします。

持っている！重要なものは最優先です

4. フロートをクリアするにはどうすればよいですか?

4.1 親要素に .clearfix を追加する
.clearfix:after{
  content:'';
  display:block;
  clear:both;
}
4.2 親要素にoverflow:hiddenを追加

5. ボックスモデルの違いは何ですか?

標準のボックスモデルはコンテンツボックス、合計幅 = width+margin+padding+border; です。

2 番目は IE ボックスモデルのボーダーボックスで、合計の幅は width です。

同じ点:

幅を指定するために使用されます

違い：

ボーダーボックスを使用する方が良いです

6. 表示におけるブロック、インライン、およびインラインブロックの違いは何ですか?

(1) ブロック: 1 行を独占的に占有し、複数の要素は新しい行で開始されます。幅、高さ、マージン、パディング属性を設定できます。

(2) inline: 要素は単独で行を占有せず、width 属性と height 属性の設定は無効です。ただし、水平方向のマージンとパディングのプロパティは設定できますが、垂直方向のパディングとマージンは設定できません。

(3) inline-block: オブジェクトをインラインオブジェクトとして設定しますが、オブジェクトの内容はブロックオブジェクトとして表現され、後続のインラインオブジェクトは同じ行に配置されます。

7. CSS エンジニアリングについて理解していますか?

CSS エンジニアリングは次の問題を解決することです。

1. マクロ設計: CSS コードをどのように整理し、分割し、モジュール構造を設計するか?

2. コーディングの最適化: より良い CSS を記述するには?

3. ビルド: パッケージ化の結果が最適になるように CSS をどのように処理すればよいですか?

4. 保守性: コードを作成したら、その後の変更コストを最小限に抑えるにはどうすればよいですか?同僚が簡単に引き継ぎできるようにするにはどうすればよいでしょうか?私は通常、Less、Scss などのプリプロセッサを使用します。

3. 拡張

3.1 アダプティブ、rem、em、vw の違い

すべては相対的な単位です。

違い：

HTML と比較すると、rem は複雑な階層関係を回避します。

親戚の親に問題がある

vw ビジュアルウィンドウ 1%

3.2 HTML5 ドラッグ API について話しましょう

ragstart: イベントの本体はドラッグアンドドロップされる要素であり、ドラッグされた要素のドラッグアンドドロップが開始されるとトリガーされます。

darg: イベントの主題はドラッグされた要素であり、ドラッグされた要素がドラッグされているときにトリガーされます。

dragenter: イベントの件名はターゲット要素であり、ドラッグされた要素が要素に入るとトリガーされます。

ドラッグオーバー: イベントの主題はターゲット要素であり、要素内でドラッグして移動するとトリガーされます。

dragleave: イベントの主題はターゲット要素であり、ドラッグされた要素がターゲット要素の外に移動するとトリガーされます。 ;

Drop: イベントのサブジェクトはターゲット要素であり、ターゲット要素がドラッグアンドドロップされた要素を完全に受け入れるとトリガーされます。

ragend: イベント本体はドラッグアンドドロップされる要素であり、ドラッグアンドドロップ操作全体が終了するとトリガーされます。

3.3 プリプロセッサには一般的にどのような機能がありますか?

コードをネストして、ネストを通じてさまざまな CSS 属性間の階層関係を反映する機能。

CSS 変数の定義をサポートします。

計算機能を提供します。

コードスニペットの拡張とミックスインを可能にします。

ループステートメントの使用をサポートします。

再利用のための CSS ファイルのモジュール化をサポートします。

4. JavaScript

1. 基本的な種類

数値、ブール値、文字列、null、未定義、オブジェクト、シンボル、bigint

ps: オブジェクトが空の場合は unll を使用し、非オブジェクトが空の場合は unfineed を使用します。

2. データ型の判別方法

の種類
其中 数组、对象、null 都会被判断为object
インスタンスの

constructor

Object.prototype.toString.call()

3. null和undefined的区别

unknown は未定義を意味し、null は空のオブジェクトを意味します。

4. 如何判断某对象是空对象？

JSON 独自の stringify を使用する
if(JSON.stringify(aObj)=='{}'){
  console.log(aObj,'是一个空对象');
}
ES6 メソッド Object.keys() を使用します。
if(Object.keys(bObj).length<0){
  console.log(bOnb,'是空对象');
}

5. 原型链是什么

プロトタイプは、オブジェクトインスタンスのいくつかのパブリックプロパティとパブリックメソッドを定義するオブジェクトテンプレートです。

プロトタイプチェーン: 複数のプロトタイプのコレクション、またはプロトタイプチェーンはプロトタイプオブジェクトの作成プロセスの履歴記録です。

どのような問題が解決されましたか?

クラスなしで[継承]を実装する

欠点がある

プライベートプロパティはサポートされていません。カルスのサポート。

6.this的指向

簡単に言えば、これは call の最初のパラメータです。アロー関数にはこれがありません。

グローバルスコープ指向window

メソッド内それが属するオブジェクトをポイントします

コンストラクターの呼び出し
インスタンス化されたオブジェクトへのポインタ

func(p1,p2) ==func.call(未定義,p1,p2)

obj.child.method(p1,p2) ==obj.child.method.call(obj.child,p1,p2)
var obj = {
  foo: function(){
    console.log(this) //obj
  }
}

obj.foo()  

obj.foo() 等价于obj.foo.call(obj),所以，这里的this 指向obj

7. new 做了什么

これは、このメソッドが最後に呼び出されたオブジェクトを指す実行コンテキスト内のプロパティです。

一時オブジェクト/新しいオブジェクトの作成

バインディングのプロトタイプ

this=一時オブジェクトを指定します

コンストラクターの実行

一時オブジェクトを返す

8.立即执行函数

無名関数を宣言し、すぐに実行します。このアプローチでは、関数をすぐに実行します。

関数を実行すると、すぐにローカル変数が作成されます。

メリット：互換性が良い。

9.闭包

クロージャは文法的なプロパティです。 js のすべての関数はクロージャをサポートしており、「関数」と「関数内でアクセスできる変数」の合計がクロージャです。

どのような問題が解決されましたか?

地球環境の汚染を避けます。

ローカル変数への間接的なアクセスを提供します。

ガベージコレクションされないように変数を管理します。

不適切に使用すると、メモリリークが発生する可能性があります。

10. js如何实现类

プロトタイプを使用する方法とカルスを使用する方法の 2 つがあります。

class Dog {
  static kind = '狗' // 等价于在 constructor 里写 this.kind = '狗'
  constructor(name) {
    this.name = name
    this.legsNumber = 4
    // 思考：kind 放在哪，放在哪都无法实现上面的一样的效果
  }
  say(){
    console.log(`汪汪汪~ 我是${this.name}，我有${this.legsNumber}条腿。`)
  }
  run(){
    console.log(`${this.legsNumber}条腿跑起来。`)
  }
}
const d1 = new Dog('啸天')
d1.say()

11. v-if 和v-show 的区别

1. 類似点: どちらも表示と非表示を制御します。

2. 相違点:

(1) 制御方法が異なる。

v-show は、display:none を通じて非表示を制御しますが、dom 要素はまだ存在します; v-if は、追加または削除される dom 要素全体を表示および非表示にします。

(2) コンパイルプロセスが異なります。

v-if スイッチングには部分的なコンパイル/アンインストールプロセスがあり、内部イベントリスナーとサブコンポーネントはスイッチングプロセス中に適切に破棄および再構築されます。v-show は単なる CSS ベースのスイッチングです。

(3) コンパイル条件が異なります。

v-if は遅延で、初期条件が false の場合は何も行わず、条件が初めて true になったときにのみ部分コンパイルを開始します (コンパイルはキャッシュされていますか? コンパイルがキャッシュされた後、部分アンインストールに切り替えます)。

v-show は、任意の条件 (最初の条件が true であるかどうかに関係なく) の下でコンパイルされ、キャッシュされ、DOM 要素が保持されます。

(4) パフォーマンスの消費。

v-if はスイッチングコストが高く、v-show は初期レンダリングコストが高くなります。

(5) 適用可能なシナリオ:

v-if は変化する可能性が低い動作条件に適しており、v-show は頻繁な切り替えに適しています。

ジュニアフロントエンド面接の質問 (1) html/css/js

目次

1.HTML

1. .如何理解HTML语义化的？

2. HTMLタグとは何ですか?

3. CanvasとSVGの違い

2.CSS

1.BFCとは何ですか?

2. 垂直方向のセンタリングを実現するにはどうすればよいですか?

3. CSS セレクターの優先順位を決定するにはどうすればよいですか?

4. フロートをクリアするにはどうすればよいですか?

5. ボックスモデルの違いは何ですか?

6. 表示におけるブロック、インライン、およびインラインブロックの違いは何ですか?

7. CSS エンジニアリングについて理解していますか?

3. 拡張

3.1 アダプティブ、rem、em、vw の違い

3.2 HTML5 ドラッグ API について話しましょう

3.3 プリプロセッサには一般的にどのような機能がありますか?

4. JavaScript

1. 基本的な種類

2. データ型の判別方法

3. null和undefined的区别

4. 如何判断某对象是空对象？

5. 原型链是什么

6.this的指向

7. new 做了什么

8.立即执行函数

9.闭包

10. js如何实现类

11. v-if 和v-show 的区别

おすすめ

グローバルスコープ	指向window
メソッド内	それが属するオブジェクトをポイントします
コンストラクターの呼び出し	インスタンス化されたオブジェクトへのポインタ