非同期ロード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