フロントエンドのインタビュー-js バインディング-非同期の待機と約束

js はどのようにバインディングを実装するのでしょうか?
ブラウザのキャッシュメカニズム?
セッションとクッキーの違いは何ですか?
約束わかりますか？
前の質問の続きですが、async await と Promise の違いは何ですか?
マクロタスクとミクロタスクを理解していますか？Promise のタスクは何ですか、settimeout はどうですか?
一般的な http ステータスコード。グループで話し合いましょう。どのようなステータスコードを使用したことがありますか?
CSSの重み？
ボックスモデル、フレックスボックス
手書きコードの質問: CSS 中心
http と https の違いは何ですか?

01js はどのようにバインディングを実装しますか?

appplay、call、bind メソッドを使用して、このバインディングを実装できます。

apply() の最初のパラメータは null です。非厳密モードでは、最初のパラメータが null または未定義の場合、グローバルオブジェクトへのポインタに自動的に置き換えられます。apply() の 2 番目のパラメータは配列またはクラス配列。

このメソッドは関数が借用されるとすぐに実行されます。

var max = Math.max.apply(null, [1, 2, 3, 4, 5]);
console.log(max); // 输出5

call() は apply の文法上の糖分です。apply() と同じ機能があり、継承も実装できます。唯一の違いは、call() がパラメータリストを受け取るのに対し、apply() はパラメータ配列を受け取ることです。

var max = Math.max.call(null, 1, 2, 3, 4, 5);
console.log(max); // 输出5

bind() の関数は call() および apply() の関数と同じです。関数の実行時コンテキストを変更できます。違いは、call() と apply() は関数呼び出しの直後に実行されることです。実行時コンテキストの後で、必要なときに呼び出すための新しい関数を返します。

var person = {
    
    
  name: 'person',
  getName: function() {
    
    
    return this.name;
  }
}
var boy = {
    
    
   name: 'oldCode'
}
// bind()返回一个新函数，供以后调
var getName = person.getName.bind(boy);

// 现在调用
console.log(getName());    // 输出oldCode

02 ブラウザキャッシュの仕組み

ブラウザのキャッシュは主に、強力なキャッシュとネゴシエーションキャッシュの2 つのカテゴリに分類されます。

強力なキャッシュ
ブラウザが http リクエストを開始するとき、最初に確認するのは強力なキャッシュです。このキャッシュメカニズムでは、リクエストを送信する必要はなく、主にフィールド確認を行うことによって実現されます。

チェック中に強力なキャッシュが失敗した場合、ネゴシエーションキャッシュに入るリクエストが開始されます。

ネゴシエーションキャッシュ
強力なキャッシュが失敗すると、ブラウザはリクエストヘッダーにキャッシュタグを含めてサーバーへのリクエストを開始します。サーバーはタグの値に従ってキャッシュを使用するかどうかを判断し、タグフィールドは次のように分割されます。最終更新日と Etag

キャッシュの場所
ブラウザーのキャッシュの場所は 4 つあり、優先順位の点では次のとおりです。

サービスマン
メモリキャッシュ
ディスクキャッシュ
プッシュキャッシュ

サービスワーカー

Jsをメインスレッドの外で実行させるもので、ブラウザからは切り離され、dom要素にはアクセスできませんが、オフラインキャッシュやメッセージプッシュなどが実現できます。 PWA 実装メカニズムの一部。

メモリキャッシュは
メモリキャッシュを指し、その効率は最も速いですが、そのライフサイクルは非常に短く、レンダリングプロセスが終了すると存在しなくなります。

ディスクキャッシュと
はハードディスクのキャッシュのことで、アクセス効率は遅くなりますが、記憶容量や記憶時間に比較的有利です。

03セッションとクッキーの違いは何ですか?

cookie:
Web サイトでは、http リクエストはステートレスです。つまり、初めてサーバーに接続してログインに成功した後でも、2 番目のリクエストサーバーは現在のリクエストがどのユーザーであるかをまだ認識できません。この問題を解決するのが Cookie の登場です。最初のログイン後、サーバーはブラウザにデータ (Cookie) を返し、ブラウザはそれをローカルに保存します。ユーザーが 2 回目のリクエストを送信すると、自動的にデータが保存されます。リクエストに保存された Cookie データは自動的にサーバーに送信され、サーバーはブラウザによって送信されたデータを通じてどのユーザーが現在のユーザーであるかを判断できます。Cookie に保存されるデータの量には制限があり、ブラウザごとに保存サイズは異なりますが、通常は 4KB を超えません。したがって、Cookie を使用して保存できるデータは少量のみです。

セッション：

セッションと Cookie の役割は似ており、両方ともユーザー関連の情報を保存します。違いは、Cookie がローカルブラウザーに保存されるのに対し、セッションはサーバーに保存されることです。サーバーに保存されるデータはより安全になり、簡単には盗まれなくなります。ただし、サーバーに保存するとサーバーのリソースが占有されてしまうという欠点もありますが、サーバーが開発された現在では、セッション情報はある程度あれば十分です。

違い

Cookie データはクライアントのブラウザに保存され、セッションデータはサーバーに保存されます。
Cookie はあまり安全ではありません。ローカルに保存されている Cookie を他人が分析して不正行為を行う可能性があります。セキュリティを主に考慮する場合は、セッションを使用する必要があります。
セッションはサーバー上に一定期間保存されます。アクセス数が増加すると、サーバーのパフォーマンスが圧迫されます。サーバーのパフォーマンスを低下させることが主な考慮事項である場合は、COOKIE を使用する必要があります。
1 つの Cookie によって保存されるデータは 4KB 以下で、サイトは最大 20 個の Cookie を保存できます。セッションに上限はありませんが、サーバー側のパフォーマンスを考慮して、セッションにあまり多くのものを保存せず、セッション削除メカニズムを設定してください。
ログイン情報などの重要な情報はSESSIONとして保存し、その他の情報が必要な場合はCOOKIEに保存できます。

04約束はわかりますか？

Promise は非同期プログラミングのソリューションです。Promise は、非同期操作の最終状態と戻り値を表します。

本質的には、一定期間後に結果が得られるという約束です。

Promise には、保留中 (待機状態)、履行済み (成功状態)、拒否済み (失敗状態) の 3 つの状態があり、一度状態が変化すると、再度変化することはありません。Promise インスタンスが作成されると、すぐに実行されます。

プロミスの使用法:

Promise は、その現在値、将来の値、および理由にアクセスするための then メソッドを提供する必要があります。

Promise.then(onFulfilled, onRejected) コールバック関数は 1 回のみ実行でき、Promise オブジェクトを返します。

Promise の各操作は、チェーン呼び出しをサポートする Promise オブジェクトを返します。

コールバック関数は then メソッドを通じて実行され、Promise のコールバック関数はイベントループ内に配置されるマイクロキューです。

function fn(){
    
    
     return new Promise((resolve, reject)=>{
    
    
         成功时调用 resolve(数据)
         失败时调用 reject(错误)
     })
 }
 fn().then(success, fail).then(success2, fail2)
Promise.all 用法

**Promise.all()** メソッドは、複数の Promise インスタンスを新しい Promise インスタンスにラップするために使用されます。

Promise1 と Promise2 の両方が Success1 の呼び出しに成功します。

Promise.all([promise1, promise2]).then(success1, fail1)

Promise.race 用法

Promise.race() メソッドは、複数の Promise インスタンスを新しい Promise インスタンスにラップします。

Promise1 と Promise2 は、どちらかが成功する限り Succ ess1 を呼び出します。

Promise1 と Promise2 は、どちらかが失敗する限り、fail1 を呼び出します。

つまり、最初に成功するか失敗するかが、レースの成功または失敗とみなされます。

 Promise.race([promise1, promise2]).then(success1, fail1)

プロミスのデメリット：キャンセルできない、

05 async awaitとpromiseの違いは何ですか?

Promise は非同期プログラミングのソリューションであり、従来のソリューション (コールバック関数やイベント) よりも合理的かつ強力です。簡単に言うと、Promise はコンテナのようなもので、将来の実行 (非同期) イベントの結果、およびこれらの結果が格納されます。生成され、変更することはできません
。Async と await も非同期プログラミングのソリューションです。これは、Generator 関数の糖衣構文に従います。組み込みの実行プログラムがあり、追加の呼び出しなしで自動的に実行され、結果を出力します。 Promise オブジェクトを返します。

async 関数を使用すると、コードをより簡潔にできます。Promise のような関数は必要ありません。Promise の解決値を処理するための匿名関数を作成する必要もありません。冗長なデータ変数を定義する必要もありません。コードをネストする必要はありません。
2 つの違い。Promise
の登場により、従来のコールバック関数によって引き起こされた「地域コールバック」問題は解決されましたが、その構文は垂直方向に発展し、コールバックチェーンを形成します。複雑なビジネスシナリオに遭遇した場合、このような構文は明らかに適していません。 .美しい。async await コードはより簡潔に見え、非同期コードが同期コードのように見えます。await の本質は、非同期戻り機能を待機する「同期効果」と同等の構文糖衣を提供することです。コードのこの行が実行された後でのみ、次の文を実行します。

async await は、Promise と同様に非ブロッキングです。

Async awaitは、通常のコールバック関数では利用できないPromiseの改良版ともいえるPromiseをベースに実装されています。

インタビューのすべての質問と回答はこの公式アカウントにまとめられています。一緒にコミュニケーションすることを歓迎します
ここに画像の説明を挿入