Webフロントエンド筆記試験問題2（解答付き）

1. 変数の型を判断するためのいくつかの方法と、これらの方法の違いや制限について説明します。

1. 语法：typeof 变量名 / typeof(变量名)
   返回值：返回数据类型的字符串:string、number、boolean、undefined、object(null也返回object)、   function、symbol
   注意：无论引用对象是什么类型 它都返回object

2. 语法：变量名 instanceof 对象类型
   返回值：返回一个布尔值，判断该变量名是否属于该类型
   注意：
      	  typeof null => object
      	  null instanceof object => false
      	  null instance null => 报错

3. 语法：toString.call();
   返回值：返回的类型类似于[object Number]、[object Function]...

4. 语法：变量名.constructor
   返回值：返回该变量名对应的数据类型

5. 语法：Object.getPropertyOf(变量名)
   返回值：返回的是该变量名对应的父类

2. src と href の違いを簡単に説明します

1. 要求されたリソースの種類が異なります

href はハイパーテキスト参照の略語で、現在の要素とドキュメント間の接続を確立するために使用され、一般的に使用されるタグは link と a です。

src は、指定されたリソースをダウンロードして現在のドキュメントに適用します。一般的に使用されるタグには、script、img、および iframe タグが含まれます。

2. 行動の結果は異なります

href は現在のドキュメントと参照リソースの間のリンクを確立し、src は現在の要素を置き換えます。

3. ブラウザーの解析方法が異なる

href によって参照されるリソース。ブラウザはそれを CSS ドキュメントとして認識し、リソースをダウンロードし、現在のドキュメントの処理を停止しません。ブラウザーが src に解決すると、他のリソースのダウンロードと処理を一時停止し、リソースを直接ダウンロード、コンパイル、実行します。これは、参照されたリソースを現在のコンテンツに適用するのと同様に、画像やフレームにも当てはまります。

3. Cookie、sessionStorage、localStorage の違い

Cookie データはクライアントのブラウザに文字列として保存され、サーバーはその情報を知ることができます。sessionStorage (セッションストレージ) と localStorage (ローカルストレージ) は、H5 の新しいストレージオブジェクトであり、オブジェクト (キーと値) の形式でローカルに保存されます。
1 つの Cookie によって保存されるデータは 4K を超えることはできず、多くのブラウザでは、サイトで保存できる Cookie は 20 個までに制限されています。sessionStorage と localStorage にもストレージサイズ制限がありますが、Cookie よりもはるかに大きく、5M 以上に達する可能性があります。
Cookie は、ウィンドウまたはブラウザが閉じられている場合でも、設定された Cookie の有効期限までのみ有効です。sessionStorage データは、現在のブラウザウィンドウが閉じるまでのみ有効であるため、永続化することはできません。localStorage は常に有効であり、ウィンドウまたはブラウザが閉じているため、永続データとして使用されます。削除したい場合は、次のようにすることができます。手動で削除してください。

拡張: Cookie とセッションの違いは何ですか?

Cookie データはクライアントに保存され、サーバーはその中の情報を知ることができますが、セッションデータはサーバーに保存され、クライアントはその中の情報を知りません。

Cookie は文字列を保存し、セッションはオブジェクトを保存します。

Cookie は安全性が高くなく、ローカルに保存されている Cookie を解析したり、Cookie を不正行為したりする可能性があるため、セキュリティを考慮するとセッションを使用する必要があります。

セッションはサーバー上に一定期間保存されます。アクセス数が増加するとサーバーのパフォーマンスが圧迫されるため、サーバーパフォーマンスの低下を考慮してCookieを使用する必要があります。

したがって、ログイン情報などの重要な情報はセッションとして保存することをお勧めします。その他の情報を保持する必要がある場合は、Cookie に配置できます。

4. オブジェクトを配列に変換します。obj = {a:1,b:2,c:3} とします。

let obj = {
    a: 1,
    b: 2,
    c: 3
};
console.log(Object.entries(obj));//[['a', 1], ['b', 2], ['c', 3]]

5. いくつかの古典的な使用シナリオを書き留めます。

1. オブジェクトメソッドとして呼び出す

const obj = {
    a: 10,
    b: 0,
    get() {
        return this.a;
    }
};
console.log(obj.get());//10

2. 関数として呼び出す

function func() {
    console.log(this); //Window
};
func();

3. コンストラクターとして呼び出されます

function Person() {
    this.x = 10;
    console.log(this); //Person {x:10}
};
const per = new Person();
console.log(per.x); //10

4.コールインコールまたは適用、バインド

const obj = {
    x: 10,
};
function func() {
    console.log(this); //{x: 10}
    console.log(this.x); //10
};
func.call(obj);
func.apply(obj);
func.bind(obj)();

6. クロージャをどう理解するか? 閉店のメリットとデメリットは？クロージャーを使用するときに注意すべき点は何ですか?

クロージャーとは何ですか?

クロージャは、別の関数のスコープ内の変数にアクセスできる関数です。クロージャを作成する一般的な方法は、別の関数の中に関数を作成することです。

クロージャーのメリットとデメリット

アドバンテージ：

地球規模の汚染を避けるために変数を隠す。

関数内の変数を読み取ることができます。

欠点:

クロージャにより変数がガベージコレクションメカニズムによってリサイクルされなくなり、メモリが消費されます。

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

クロージャを使用する際に注意すべき点は何ですか?

クロージャはそれを囲む関数のスコープを保持するため、他の関数よりも多くのメモリを消費します。したがって、メモリを解放するために匿名関数を手動で逆参照することが可能です。

function func() {
    let n = 22;
    return function () {
        return {
            n: n,
        };
    };
};
//fn接收了一个匿名函数
const fn = func();
//调用函数
console.log(fn());//{n: 22}
console.log(fn().n);//22
//解除对匿名函数的引用，以便释放内存
fn = null;

7. DOM ノードを追加、挿入、削除、置換、作成、コピー、検索する方法

添加：appendChild
插入：insertBefore
移除：removeChild
替换：replaceChild
复制：cloneNode
创建：createElement
查找：
    document.getElementById();
    document.getELementsByClassName();
    document.getElementsByName();
    document.getElementsByTagName();
    document.querySelector();
    document.querySelectorAll();
    document.documentElement();
    documeny.body;

8. 学んだガベージコレクションのメカニズムについて話します。

ガベージコレクターは定期的に (定期的に) 使用されなくなった変数を見つけてメモリを解放します。各ブラウザのサイクルは異なります。一般的に使用されるガベージコレクションメカニズムは 2 つあります。

マーククリア (一般)

ブラウザはすべての参照変数をマークし、グローバル参照変数とクロージャマークをクリアします。js コードを実行すると、実行環境に入ります。現在の実行環境を離れると、現在の実行環境でマークされている変数がクリアされます。ほとんどのブラウザーはこの方法を使用します。

参照カウント (IE7/8、Netscape Navigator3)

変数が参照されるたびに参照回数が+1されます。この値が他の参照に代入されている場合は+1されます。逆に、この値を参照している変数が他の変数を参照している場合は、参照数が+1されます。 be -1. When 参照カウントが 0 の場合、ガベージコレクターによってクリアされます。

参照カウントの問題 --> (循環参照)

(IE の一部の部分ではネイティブ JS オブジェクトを使用しませんが、C++ でシミュレートされた COM オブジェクトを使用してシミュレートします。そのガベージコレクションメカニズムでは参照カウントが使用されます。参照サイクルが生成されると、大量のメモリが消費されます。)

解決策 --> 手動逆参照サイクル

使用後に手動で null に設定します。変数を null に設定すると、変数と以前に参照した値の間の接続が切断されます。次回ガベージコレクターが実行されると、これらの値は削除され、占有しているメモリが再利用されます。。

9. Ajax の仕組みを簡単に説明する

Ajax の動作原理は、ユーザーとサーバーの間に中間層 (AJAX エンジン) を追加して、ユーザーの操作とサーバーの応答を非同期にすることと同じです。すべてのユーザーリクエストがサーバーに送信されるわけではありません。たとえば、一部のデータ検証とデータ処理は Ajax エンジン自体に渡され、サーバーから新しいデータを読み取る必要があると判断された場合にのみ、Ajax エンジンはリクエストをサーバーに送信します。サーバーに代わって。

10. ブラウザのレンダリングプロセスを簡単に説明します

HTML を解析して Dom ツリー (ドキュメントオブジェクトモデル、ドキュメントオブジェクトモデル) を構築します。DOM は、拡張マークアップ言語を処理するために W3C 組織によって推奨されている標準プログラミングインターフェイスです。
レンダリングツリーを構築します。head标签或 display: noneこのような要素はレンダリングツリーに配置する必要はありませんが、Dom ツリー内にあるため、レンダリングツリーは Dom ツリーと同等ではありません。
レンダリングツリーをレイアウトし、座標とサイズを特定し、ラップするかどうかを決定し、位置、オーバーフロー、Z インデックスなどを決定します。このプロセスはと呼ばれます"layout" 或 "reflow"。
レンダリングツリーを描画し、描画操作のためにオペレーティングシステムの基礎となる API を呼び出します。

今日の共有は以上です~~

間違いがある場合は、いつでも修正してください。