非同期ロードのCSSリソース
プラス私たちは目標を追求してきたように、最初の画面には、ページの表示速度のフロントエンドを開き、そしてこれらの最適化でのCSSリソースも不可欠です。
サイトでは、一部のCSSリソースを有していてもよく必見です、彼は一緒に完全にページをレンダリングし、解析する前に終了し、HTMLロードする必要があり、これはトリックを再生することが一時的にできないですが、私たちはいくつかの非クリティカルなCSS非同期技術を、置くことができます非同期ロード。
など、この効果を達成するための多くのツールがあるloadCSSは、
これを言うために、非同期読み込みは、実際には、loadCSSは、以下のコードで使用されます。
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">コードは巧妙な、シンプルであるあなたは、1を読むことができます：
ロードされ、メディアは完全なアプリケーションプラットフォームに設定プリントタイプ、のために初期化
しかし、どのようにこの関係および非同期のget、それについてはどうですか？
非同期：ブラウザが現在のリソースアプリケーションかどうかを判断して、優先順位を決定しますので、我々はそれが印刷の珍しいタイプなので、ブラウザの識別で採用しているように、道のメディアによると、現在のページのレンダリングの負荷に影響を与えません。
いくつかは、プリロード、接続前、プリフェッチなどのrelについて話かもしれませんが、ブラウザのサポートが異なりますので、ラインはより多くの操作を必要とするので、その互換性を補うために。
そして、彼らが異なっている、リソースの優先順位をロードするようにブラウザを引き起こす可能性がありますプリロードはloadCSSが低いに変更されます、最も高くなります。
（終わり）
いくつかの一般的な操作
- 無効キャッシュ：アナログ加入者の最初の訪問
- リプレイXHR：繰り返しXHRを送信、デバッグするためのインターフェース
- 右=>ブラウザのキャッシュをクリア：手動でキャッシュをクリア（も明確なクッキーにオプション）
- オフライン：速いPWAの試運転
- ネットワークペインを並べ替えサポートし、より多くのオプションを選択し、左のタブまたは右をクリック
- イニシエータ：現在のリソースを表示して、そのソースが依存リソースを開始しました。シフトダウンホールドは、依存リソースは赤のソースを、開始するための緑、リソースを表示するために使用することができます。
DOMContentLoaded＆ロード：ロード時間にページの解析完了時間とリソースを取得
ブルーDOMContentLoadedを表し、赤は負荷を表し、
公式：loadTime = window.performance.timing.domContentLoadedEventEnd- window.performance.timing.navigationStart;
资源总大小和资源总数
常用功能字段解释
network pan的tab字段解释：
- waterfall: 每个请求活动期间的可视化分解图示
initiator：触发当前请求的来源，下面有几种常见的触发方式
- parser：通过谷歌的html解析得到的资源，进而发起请求
- redirect：http重定向
- script：由于执行js，而引入的资源。
- other：一些其他的处理和动作，比如我们访问一个地址，这个地址本身对应的域名资源，就是other。这属于常见的两种之一。一是输入地址访问，二是点击跳转。
通过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