プログラマー面接質問バンク共有

古典的なフロントエンドのインタビューの質問から - フロントエンドのパフォーマンスの最適化について話す

ブラウザに URL を入力するとどうなりますか?

これは非常に古典的な面接の質問で、フロントエンドの基本的な知識ポイントのほとんどが含まれています。

最初のステップは、DNS を介してドメイン名の IP アドレスを見つけることです。
2 番目のステップでは、ブラウザは、解析して取得した IP アドレスに従って、Web サーバーに HTTP リクエストを送信します。
第 3 段階のサーバーが要求を受け取り、それを処理します。
ステップ 4 サーバーが応答を返す
ステップ 5: ブラウザーは応答をデコードし、html を dom として解析し、css を css-tree として解析し、dom+ css を解析してレンダリングツリーの描画を生成します。
ステップ 6 ページが表示された後、ブラウザは非同期要求を送信します。
ステップ 7 プロセス全体が終了すると、ブラウザは TCP 接続を閉じます。

最初に、これらの手順におけるパフォーマンス最適化のポイントを要約しましょう。

DNSプリロード
読み込まれたファイルを減らす

1. DNS 事前解決

DNS解決にも時間がかかり、ドメイン名に対応するIPは事前解決によって事前に取得できます。これにより、最初のステップでドメイン名から IP を検索する時間が節約されます。

<link rel="dns-prefetch" href="//www.zhihu.com">

第二に、ファイルの読み込み、ブラウザのキャッシュを減らします

通常、ブラウザのキャッシング戦略は、ストロングキャッシングとネゴシエートキャッシングの 2 種類に分けられ、キャッシング戦略は HTTP Header 設定によって実装されます。

強力なキャッシュ

強力なキャッシングにはリクエストインターフェイスは必要ありません. HTTP リクエストリソースが開始されるたびに、ブラウザのキャッシュが直接使用されます.

との 2HTTP Header つを設定することで、強力なキャッシングを実現できます。強力なキャッシングとは、キャッシング中にリクエストが不要であることを意味します。ExpiresCache-Controlstate code200

キャッシュのネゴシエーション

キャッシュをネゴシエートするには、バックエンドキャッシュ内のファイルが変更されているかどうかを確認するためにインターフェイスを要求する必要があります。変更されている場合は、再要求することしかできません。変更がない場合は、キャッシュが直接使用されます。

キャッシュの有効期限が切れた場合は、リソースが更新されているかどうかを確認するリクエストを開始する必要があります。ネゴシエーションキャッシュは、次の 2 つを設定することで実現でき HTTP Header ますLast-Modified 。 ETag
ブラウザがリソースを確認するリクエストを開始すると、リソースが変更されていない場合、サーバーは 304 ステータスコードを返し、ブラウザキャッシュの有効期間を更新します。

index.jsの読み込みからこの問題を見てください

1. 最初の読み込み、http リクエスト、サーバーが正常に戻る

応答ヘッダーと強力なキャッシュ命令を返します
有効期限: web 2019 年 8 月 11 日 20:50:00 (有効期限)
cache-control : max-age=3000000 (タイムスタンプ、http1.1 正確、高優先度)
どちらのヘッダーも、このファイルが期限切れにならない期間をブラウザに伝えるバックエンドです。
ブラウザーは、上記の 2 つのヘッダーを受け取った後、ファイルを保存します。

このファイルを 2.1 時間以内に再リクエストする

ブラウザは強力なキャッシュヒットを認識し、リクエストは送信されず、ローカルキャッシュファイルが直接使用され、ステータスコードはキャッシュから 200 です。

2 時間後にファイルを再度リクエストすると、強力なキャッシュが無効になり、ネゴシエートされたキャッシュが使用されます

ブラウザはリクエストを直接送信するのではなく、バックエンドに問い合わせます。ヘッダーはリクエストヘッダーを取得します。
if-modified-since: 日付。この日付以降にファイルが変更されたかどうかをバックエンドに問い合わせます
バックエンドは変更されていないことを通知し、キャッシュされたステータスコードは 304 not modified です。
優先度が高いのは etag (ファイルのフィンガープリント) で、コンテンツは変更されず、フィンガープリントは変更されません。

4. 変更したことがバックエンドから通知された場合は、リロードのみ可能です。

キャッシュを効率的に使用する方法

1. キャッシュ時間が長すぎる

リリースはオンラインで、クライアントはまだキャッシュを使用しているため、バグが発生する可能性があります

2. キャッシュ時間が短すぎる

あまりにも多くのファイルが繰り返し読み込まれ、帯域幅が浪費されます

解決する：

1. テンプレート (html) はキャッシュできません

強力なバッファリングは静的リソース用であり、動的リソースは注意して使用する必要があります。動的リソースと見なせるサーバー側のページに加えて、静的リソースを参照する html も動的リソースと見なすことができます.そのような html もキャッシュされている場合、これらの html が更新されたときに、ブラウザーに通知するメカニズムが存在しない可能性があります.特にフロントエンドとバックエンドが分離されているアプリケーションでは、これらの html に更新があることに注意してください。ページはすべて純粋な html ページであり、各アクセスアドレスは html ページに直接アクセスできます。これらのページは通常、キャッシュを強化せず、ブラウザが常にこれらのページにアクセスするときの最新のサーバー。

2. ファイル名＋ハッシュ値

ファイルの内容が変更された場合は、webpack を使用してパッケージ化します。生成されたファイル名のハッシュ値も変わるので、ファイル名も変わってしまうし、キャッシュ内のファイルを使わずに当然ながらブラウジングは再リクエストするようになります。

ファイルの内容が変更されていない場合、ハッシュ値は変更されず、ファイル名も変更されず、キャッシュされたファイルはリクエストを送信せずに参照されます。

3. ロードするファイルの数を減らす、画像の遅延ロード

画像の遅延読み込みとは

ページにアクセスするとき、最初に img 要素または他の要素の背景画像パスを 1*1px 画像のサイズのパスに置き換えます (そのため、一度だけ要求する必要があります)。ブラウザで画像の実パスを設定すると、画像が表示されます。これは画像の遅延読み込みです。

画像の読み込み方法

    <div class="img-container">
        <img  data-src="./01.jpeg" alt="">
    </div>
    <div class="img-container">
        <img  data-src="./02.jpg" alt="">
    </div>
    <div class="img-container">
        <img  data-src="./03.jpeg" alt="">
    </div>

data-src のアドレスを src に入れるだけです。

imgs[i].src = imgs[i].getAttribute('data-src')

要素が表示されているかどうかを確認する方法は?

頂点 (テキスト) に対する要素の距離 <= ウィンドウの高さ + スクロール距離

完全なコードで

<script>
    const imgs = document.querySelectorAll('img')
    // 获取可视区域高度
    const viewHeight = window.innerHeight || window.documentElement.clientHeight
    console.log(viewHeight,imgs)
    function loadImg(){
      for(let i=0; i<imgs.length;i++){
        console.log(imgs[i].getBoundingClientRect().top)
        let dis = viewHeight - imgs[i].getBoundingClientRect().top
        if(dis>0){
          imgs[i].src = imgs[i].getAttribute('data-src')
        }
      }
    }
    loadImg()
    window.addEventListener('scroll',loadImg)
  </script>

追記:

TCP/UDP、ブラウジングのレンダリング処理、再描画とリフロー（再配置）など、このトピックにも多くの知識ポイントが含まれています。興味のある方は、それらの内容について次回お話しします。

プログラマー面接質問バンク共有

1. フロントエンド面接質問集（面接必須）おすすめ：★★★★★

住所：フロントエンドインタビューの質問バンク

2. おすすめフロントエンド技術ナビ : ★★★★★

アドレス:フロントエンドテクノロジーナビゲーション Daquan

3. 開発者におすすめの色値変換ツール : ★★★★★

アドレス: Developer Color Value Conversion Tool