非同期ロードcssとGoogleブラウザの各ユーティリティの紹介

2591 ワード

非同期ロードcssリソース


ページの最初の画面の表示速度を加えると、私たちのフロントエンドが追求してきた目標は、cssリソースもこれらの最適化に不可欠です.1つのウェブサイトにはcssリソースの一部が必要かもしれません.彼はページのレンダリングが終わる前にロードされ、htmlと一緒に解析する必要があります.これはしばらく手足を作ることはできませんが、重要でないcssを非同期化することができます.つまり、非同期ロードです.loadCSSのようなツールが市販されています
今回お話しするこの非同期ロード方式は、実はloadCSSで使われているもので、コードは以下の通りです.

コードは簡単で、賢いあなたは、一目で理解できます.
printタイプに初期化し、ロードが完了したらmediaをフルプラットフォームアプリケーションに設定します.
しかし、これはどのように非同期と関係を持っているのでしょうか.
ブラウザはmediaに基づいて現在のリソースが適用されているかどうかを判断し、優先度を決定するため、希少なprintタイプを採用しているため、ブラウザが認識すると、現在ページレンダリングに影響を与えない方法でロードされます:非同期
preload、preconnection、prefetchなどのrelと言う人もいるかもしれませんが、ブラウザのサポート度が異なるため、オンラインでは互換性を補うためにより多くの操作が必要です.
また、preloadはブラウザがリソースをロードする優先度が最も高くなり、loadCSSはlowに変更されます.
(完)

一般的な操作

  • disable cache:シミュレーションユーザの最初のアクセス
  • replay xhr:インタフェース
  • をデバッグするためにxhrを繰り返し送信する
  • 右クリック=>clear browser cache:手動でキャッシュをクリア(cookiesをクリアするオプションもある)
  • offline:pwa
  • をすばやくデバッグできます.
  • network paneはソートをサポートし、左クリックtabまたは右クリックその他のオプションは
  • を選択します.
  • initiator:現在のリソースの開始元と依存リソースを表示します.shiftを押してリソースを表示することができます.緑はソースを表し、赤はリソースに依存します.
  • DOMContentLoaded&load:ページ解析完了時間とリソースロード完了時間を取得青はDOMContentLoaded、赤はload
    数式:loadTime=window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
  • 総リソースサイズおよび合計リソース数


  • 共通機能フィールドの説明

  • network panのtabフィールドの説明:
  • waterfall:各リクエストアクティビティ期間の可視化分解図
  • initiator:現在のリクエストをトリガーするソース.以下にいくつかの一般的なトリガー方法があります.
  • parser:グーグルのhtml解析で得られたリソースを、
  • に要求する.
  • redirect:httpリダイレクト
  • script:jsを実行するために導入されたリソース.
  • other:他の処理と動作、例えば、アドレスにアクセスします.このアドレス自体に対応するドメイン名リソースは、otherです.これはよく見られる2つの1つに属します.1つは入力アドレスアクセス、2つはクリックジャンプです.


  • waterfallを通じて、私たちのページリソースと要求が合理的かどうかを知ることができます.良いサイトのwaterfallは、
  • と似ているはずです.
  • waterfallの時間分解の各段階の解釈:
  • queueing:ブラウザが現在のリクエストをキューに入れる時間.
  • stalled:現在のリクエストはキューにありますが、実行の保留時間はありません.
  • request sent:リクエスト送信に時間がかかります.
  • waiting(TTFB):ブラウザがサービス側から返される最初のバイトを受信する時間.TTFBは、先頭バイト時間(Time to First Byte)
  • を意味する
  • content Download:ブラウザがコンテンツの返却を受け入れるのにかかる時間
  • queued at:キュー挿入準備タイミング
  • と理解する.
  • started at:タスク開始タイミング
  • 式1:started at=queued at+queueing式1:現在のリクエストにかかる合計時間≒queueing+stalled+request sent+waiting+content download

    文献を読む


    原文リンクブラウザ優先度loadCSS loadCSS github