インタビューの質問の要約（1）-HTTP /ブラウザ

http和https
一般的なステータスコード
一般的なリクエストヘッダー
httpリクエストメソッド
GETとPOSTの違い
HTTP事前リクエスト
強力なネゴシエートされたキャッシュ
キャッシュ制御値
TCPスリーウェイハンドシェイク
TCPとUDP
WebSocket
入力urlとページレンダリングの完了の間に何が起こったのか
ファイルの読み込みルール
スクリプトタグの延期と非同期の違い
ファイルのダウンロード
Cookie、sessionStorage、localStorage
クッキーとセッションの違い
CSRFとXSS
Webワーカー
Doctype、厳密モード、および無差別モードの役割
HTMLセマンティックタグの理解
iframeとは何ですか？欠点は何ですか？
iframe通信
onload和onready
ビューポートとモバイルレイアウトについて話す
RESTFULを1つの文に要約する
クリックはiOSで300msの遅延がありますが、それを解決する理由と方法は？
Webパフォーマンスの最適化

http和https

基本概念
- http：ハイパーテキスト転送プロトコル、wwwサーバーからローカルブラウザにハイパーテキストを転送するために使用される転送プロトコル
- https：http+ SSL、サーバーの信頼性とデータ送信のセキュリティを確保するための情報セキュリティチャネルを確立するために使用されます
https動作原理
- クライアントがサーバーへの接続要求を開始します
- サーバーは証明書と非対称暗号化公開鍵を返します
- クライアントは証明書を検証し、公開鍵暗号化を使用してデータ検証サーバーを検証します
- サーバーは秘密鍵を使用して、同じデータを復号化し、再暗号化し、戻って検証を完了します
- クライアントは対称暗号化キーを生成し、公開キーで暗号化してサーバーに送信します
- サーバーは復号化して鍵を取得し、対称暗号化を使用して通信します
https欠点
- 低効率：ハンドシェイクフェーズは時間がかかり、ページの読み込み時間が長くなります。暗号化は、平文ほど速くはなく、パフォーマンスを消費します
- 高コスト：証明書にはお金が必要です
バージョンの違い
- http1.0：リクエストごとにTCP接続が確立され、リクエストが完了すると接続が切断されます
- http1.1：長いTCP接続を確立し、複数の要求を同期的に行います。前の要求は次の要求を混雑させます
- http2.0：TCP接続を確立し、同時に複数の要求を行います。バイナリコード

一般的なステータスコード

ステータスコード	意味
200	リクエストは成功しました（完全なデータが返されます）
301	永続的なリダイレクト
302	一時的なリダイレクト
307	一時的なリダイレクト（http1.1）は、リダイレクトするかどうかをユーザーに尋ねるPostリクエストを送信します
304	ネゴシエーションキャッシュ（全量のデータを返す必要はありません）
400	リクエストが無効です（パラメータがバックグラウンドと一致していません）
401	リクエストでは、ユーザーの身元を確認する必要があります
403	サーバーはリクエストを受信しますが、実行を拒否します

一般的なリクエストヘッダー

リクエストヘッダー	意味	例えば
通用首部	いくつかの一般的な情報を示します	日付は作成時間を表します
リクエストヘッダー	ユニークなリクエストメッセージ	cookie、if-Modified-Since
応答ヘッダー	固有の応答メッセージ	セットクッキー、場所
エンティティヘッダー	物理的な部分を説明する	allowはリクエスト方法を説明し、content-typeはサブジェクトタイプを説明し、content-Encodingはエンコード方法を説明します

httpリクエストメソッド

GET、POST、HEAD、OPTIONS、PUT、DELETE、TRACE、CONNECT

GETとPOSTの違い

本質的な違い：GETパラメータはURL渡され、にPOST配置さRequest bodyれます
本質的な違いにより、長さの制限が異なり、セキュリティが異なり、エンコード方法が異なります

HTTP事前リクエスト

複雑なクロスドメインリクエストを処理する場合、ブラウザはこのOPTIONSメソッドを使用して、リクエストを送信する前に事前リクエストリクエストをサーバーに送信します。サーバーの応答結果が拒否された場合、実際のリクエストは送信されません。
事前リクエストの条件：

単純なリクエスト:(リクエストを送信しないでくださいOPTIONS）

カスタムリクエストヘッダーを使用しないでください
GET、POSTまたはHEADメソッドを使用する
使用content-type：text/plain、multipart/form-dataまたはapplication/x-www-form-urlencoded

単純でないリクエスト:(OPTIONSリクエストの送信）

強力なネゴシエートされたキャッシュ

サーバーリソースは固定されていません。サーバーリソースが更新された後にユーザーがローカルキャッシュにアクセスする場合、それは更新されないことと同じです。サーバーリソースが更新されていないときにユーザーがサーバーからリソースを取得すると、リソースが無駄になります。したがって、2つのキャッシュメカニズムがあります。強力なキャッシュ（常にキャッシュから読み取る）、ネゴシエートされたキャッシュ（サーバーにキャッシュから読み取るかどうかを決定するように要求した後）です。

強力なキャッシュ：HTTPリクエストは送信されず、ステータスコードは200で、ブラウザはキャッシュから直接データを読み取ります。関連するフィールドにはexpires、がありcache-controlます。もしcache-controlおよびexpiresそれが存在している間、cache-controlより優先されますexpires。

ネゴシエーションキャッシュ：HTTPリクエストを送信します。ステータスコードは304で、ブラウザはサーバーにリクエストを送信します。キャッシュにヒットすると、キャッシュからフェッチされます。関連するフィールドにはLast-Modified/If-Modified-Since、がありEtag/If-None-Matchます。

参照

キャッシュ制御値

max-age：キャッシュ有効期間
no-cache：ネゴシエートされたキャッシュ、サーバーがキャッシュキャッシュの使用を確認したときに読み取る
no-store：キャッシュを無効にする、各リクエストは完全なリソースを再ダウンロードする必要がある
public：エンドユーザーとCDNおよびその他の中間プロキシサーバーを含むすべてのユーザーがキャッシュ
privateできます：できます端末でのみ使用されますユーザーのブラウザキャッシュは、CDNなどのリレーキャッシュサーバーによるキャッシュは許可されていません

デフォルト：private

TCPスリーウェイハンドシェイク

クライアントは
サーバーへの接続要求を開始しますサーバーは要求に
応答し、クライアントへの接続要求を開始しますクライアントは接続要求に応答します

TCPとUDP

TCP：対面接続（接続を確立する必要がある）、1対1の信頼できる情報送信
UDP：対面絶縁（接続を確立する必要がない）、1対多の信頼性の低い情報送信

WebSocket

基本概念：
HTML5に基づくプロトコルは、http持続的接続をサポートします

機能：
クライアントがサーバーをアクティブに要求することに限定されなくなり、接続が確立された後、クライアントはサーバーにメッセージを送信でき、サーバーはクライアントにメッセージをアクティブにプッシュすることもできます

入力`url`とページレンダリングの完了の間に何が起こったのか

ブラウザは独自のDNSキャッシュを検索します
ブラウザはオペレーティングシステムのDNSキャッシュを検索します
ローカルHOSTファイルを読み取ります
ブラウザがDNSシステムコールを開始します
- ブロードバンド事業者はローカルDNSキャッシュをチェックします
- オペレーターサーバーは、ルートドメイン名へのDNS要求を開始します
- ルートドメイン名は、DNS解決の結果をオペレーターに返します
- オペレーターはDNS解決結果をオペレーティングシステムカーネルに返し、結果をキャッシュします
- オペレーティングシステムカーネルは、返された結果をブラウザに返します
ブラウザは対応するIPアドレスを取得した後、HTTPリクエストを作成し、サーバーへのHTTPリクエストを開始します
サーバーはリクエストを受信すると、パスパラメータに従ってリクエスト結果をブラウザに返します。
ブラウザがページコードを取得した後、HTMLに基づいてDOMツリーを構築します
DOMツリー構築プロセスでリソース要求が発生した場合は、上記の手順を繰り返してリソースを取得します
リソース取得でキャッシュを読み取ることができる場合は、対応する強力なキャッシュを使用して、キャッシュルールをネゴシエートします
DOMツリー構築プロセス中にJSスクリプトが検出されると、対応するスクリプトをダウンロードして実行するためにDOMツリー構築が停止されます。
ブラウザは、スタイルに従ってCSSOMツリーを構築します
CSSOMツリーを構築した後、DOMツリーとマージしてレンダリングツリーにします
ページのレイアウトとレンダリング

ファイルの読み込みルール

CSSファイルの読み込みDomは解析に関して非同期であり、Domレンダリングをブロックし、Dom解析をブロックしません。
JSファイルの読み込みDomは解析と同期しており、解析をブロックしDomます。onloadイベントは、読み込みと実行後にトリガーされます。

ファイルの読み込みは、同様のファイルの読み込みに関して同期的です

スクリプトタグの延期と非同期の違い

共通点：これらはすべて非同期でscript読み込まれ、タグが検出されたときに読み込まれます。ファイルのダウンロード中HTML、ドキュメントの解析はブロックされません。
違い：実行シーケンスは、
deferドキュメントが解析さdomContentLoadedれた後、つまりイベントがトリガーされます。
asyncファイルのダウンロード後すぐに実行し、実行完了後にHTMLドキュメントを分析します

ファイルのダウンロード

ジャンプクラス

<a target="_blank" href='xxx'></a>
window.open('xxx')
window.location.href = 'xxx'

download属性

<a download='xxx' href='xxx'></a>

http header

res.setHeader("Content-Disposition","attachment;filename=xxx")

canvas.toDataURL()

同じソースの画像ファイルにのみ使用できます

非ブラウザで開くことができるファイル：1,2,3すべて、1,2クロスドメイン
ファイルに関係なく、ブラウザで開く1,2,3ことができます：すべて、1,2同じソースである必要があります

Cookie、sessionStorage、localStorage

共通点：ブラウザ側に保存、同じオリジンで共有
Cookie：ブラウザとサーバー間で転送され、有効期限が設定される前に有効で、サイズ制限はそれぞれ源4K
sessionStorageです：現在のブラウザまでのみ有効ですウィンドウが閉じている
localStorage：常に有効、OK永続的なデータストレージとして、サイズ制限はそれぞれ源2.5M〜10Mです

クッキーとセッションの違い

cookieデータをブラウザに保存すると、セキュリティが悪く
sessionなります。データをサーバーに
cookie保存し、より安全sessionIdに保存してユーザーを識別します。サーバーsessionIdは、ユーザーのステータスを読み取るために使用される情報を取得します。

CSRFとXSS

CSRF
XSS

Webワーカー

参照

Doctype、厳密モード、および無差別モードの役割

Doctypeはドキュメントの上部で宣言され、ページのレンダリング方法をブラウザに指示します。厳密モードと無差別モードの2つのモードがあります。

厳密モード：植字モードとJS動作モードは、ブラウザーでサポートされている最高水準で実行されます。

プロミスキャスモード：下位互換性、古いブラウザのシミュレーション、ブラウザがページとの互換性を失うのを防ぎます。

HTMLセマンティックタグの理解

セマンティックタグは、正しいタグに正しいコンテンツが含まれ、読みやすいように適切に構成されていることを意味します

iframeとは何ですか？欠点は何ですか？

iframe別のドキュメントを含むインラインフレームを作成します
短所：

メインページonloadをブロックするイベント（動的加算を使用してsrc解決）
に有害ですSEO
接続プールをメインページと共有すると、ブラウザhttpは同じソースからの同時リクエストの数を制限するため、メインページのパフォーマンスに影響を与えます

iframe通信

相同：親ページ、cookie
異なるソース：document.domain、location.hash、window.name
Jieke：postMessage

onload和onready

DOMドキュメントの読み込み手順は次のとおりです。

HTML構造を解析する
外部スクリプトとスタイルシートファイルをロードする
スクリプトコードを解析して実行する
DOMツリーが構築されます。// DOMContentLoaded、ブラウザの更新ボタンのリセット
写真などの外部ファイルをロードする
ページが読み込まれます。// window.onload

ビューポートとモバイルレイアウトについて話す

PCビューポート：
非モバイル端末用に設計されたページを表示するために使用されます。画面の実際の解像度よりも大きいデフォルトの幅があります

モバイルビューポート：
モバイル端末で設計されたページを表示するために使用されます。幅と高さは実際の画面解像度です

違いは次のとおりです。（モバイル端末は使用後に使用され、PC端末は使用されません）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

レイアウトが採用されているrem互換性が考慮されていない場合は、vw、vhそれがベストです

document.addEventListener('DOMContentLoaded', () => {
    
    
    const html = document.querySelector('html')
    let fontSize = window.innerWidth / 10
    fontSize = fontSize > 50 ? 50 : fontSize
    html.style.fontSize = fontSize + 'px'
})

RESTFULを1つの文に要約する

URLリソースの検索を使用HTTPし、リクエストに応じて操作を説明します

クリックはiOSで300msの遅延がありますが、それを解決する理由と方法は？

理由：IOSズームするにはダブルクリックがあり、ブラウザは最初のクリック後にシングルクリック操作かダブルクリック操作かを判断できません。
解決策：

ズームを無効にする

<meta name="viewport" content="width=device-width, user-scalable=no">

fastClick
検出touchend直後にアナログclickイベントを送信し、300ms後にトリガーされたイベントをブロックするために使用します

Webパフォーマンスの最適化

リクエストの量を減らす：リソースをマージし、HTTPリクエストの数を減らし、gzip圧縮、webP、lazyLoadを使用
してリクエストの速度を上げます：DNSを解決し、ドメイン名の数を減らし、並列読み込み、CDN配布
キャッシュ：HTTPプロトコルキャッシュ、オフラインキャッシュマニフェスト、オフラインデータキャッシュlocalStorage
レンダリング：JS / CSS最適化、読み込みシーケンス、サーバー側レンダリング、パイプライン