【先端最適化】一般的な先端性能の最適化

リソース圧縮低減HTTP要求
静的リソース圧縮

html:スペースの圧縮、改行、コメントなどの文字ウェストパック—html-webpack-plugin

css:無効コード削除、意味統合(同じスタイルコード)Webpack css-loader

js:無効文字削除、注釈コードの意味を削除し、Webpack—UglifyJSPlugin

を最適化する.

ピクチャ最適化方案:

スプライト

ファイルはbase 64 webpack base 64-inline-loader

を使用します.

画像圧縮サイト

svg

リソースマージ

弊害:

首のスクリーンレンダリングの問題、合併のファイルは大きすぎて、遅くなります.

キャッシュ失効問題マークmd 5スタンプは一つの変動があれば、a、b、cの三つのjsを合算して

になります.

規則:共通ライブラリの合併、異なるページのそれぞれのマージ.非同期的にコンポーネントをロードして、異なるページは単独で包装して、ルートの変化を監督して、自動的に

をダウンロードします.

実装:gulpプラグインワークフローを整理する/webpack構成loaderとplugin

非コアコード非同期ローディング
通常のページのロードフロー:

ブラウザはHTMLページをダウンロードしながら解析を開始します.つまり、ダウンロードが終わるまでは、解析を開始します.

解析中、ブラウザは を し、 を し、ウェブページにレンダリングされた をJavaScriptエンジンに す.

もし が スクリプトを したら、このスクリプトをダウンロードして し、さもなければ コードを します.

JavaScriptエンジンの が し、 をレンダリングし、 HTMLページを します.

のロード は して み むため、ブラウザの ファイルをブロックします.だから はいつもscript をbodyの に いています.
3つの :ダイナミックシナリオ、async、defer
ダイナミックスクリプト
にスクリプトタグを

var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://xxxxxxx";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild); 

asyncasync とdefer は じで、 つのスレッドを いてjsファイルをダウンロードすることもありますが、deferとは って、ダウンロードが したらすぐに します.
どのjsファイルをダウンロードしたら にどれを しますか?
インラインスクリプトには がありません.すなわち、src のないスクリプトです.
defer
ブラウザがdefer を つタグに した 、もう つのスレッドを いて、jsファイルをダウンロードし、 にHTML を し けるなど、HTMLの ての が したら、DOMロードが したら、 に にロードされたjsファイルを します.
インラインスクリプトには がありません.すなわち、src のないスクリプトです.
シーン
に、スクリプト に があるかどうかを るのです. があれば、 を しなければなりません.deferを するべきです. に するとasyncは します.どちらもdocument.writeを するべきではなく、ページ が されます.
ブラウザキャッシュを する
https://juejin.im/post/5c4179...
:

は なデータ を し、インターネットの を する.

サーバの を らし、ウェブサイトの を させます.

は、クライアントがウェブページをロードする を くしました.
ブラウザキャッシュは、キャッシュとネゴシエーションキャッシュに けられます.
キャッシュ
もしリソースが れでないなら、キャッシュを ります. が れたら、サーバーにお いします.

cache-control:max-age=xxxは、このリソースがロードされた のxxx にキャッシュを すると しています. すなわちファイルの をロードする です.

Cache-Coontrolのいくつかの の :

prvate:ブラウザだけでキャッシュすることができます.

public:ブラウザとプロキシは キャッシュできます.

max-age=xxx:

no-cache:キャッシュを わない

no-store:キャッシュを くしないし、キャッシュを しない

ルールは、 に のcache-control:public、max-age=0

を むことができる.

expires: 、サーバが の に づいて1つのファイルの れの を します.defer ヘッダに「max-age」または「s-max-age」コマンドを したら、Cache-Controlヘッダは されます.
キャッシュのステップ:

めてa.jsを します.キャッシュテーブルにはこの がないので、バックエンドサーバを します.

バックエンドサーバはa.jsに り、http reponse headerのcache-controlはmax-age=xxxであるため、キャッシュルールはキャッシュテーブルに されます.

の a.js、キャッシュテーブルにmax-ageがあると、キャッシュに し、その 、 が れていないかどうかを し、キャッシュのa.jsを んで、もし が れたら、ネゴシエーションキャッシュのステップを します.
ネゴシエーションキャッシュ
トリガ :

Cache-Coontrolの はno-cache( くないキャッシュ)

です.

またはmax-ageが れになりました.
つまり、いずれにしても に キャッシュを うことができます.
ETag: ファイルに つがあります.ファイルを えたら わってしまいます.md 5に えます.
Last-Maodified:ファイルの
httpはrequestheaderの のETagとLast-Maodifiedに ってきます. の の にrequestheaderでこの つを ってきます.If-None-Match、Last-Maodified->If-Maodied-Since)、サービスの であなたが ってきた を けて、 のリソースを します.
キャッシュ のまとめ:

がリソースを するとき、ユーザーのローカルリソースのETagを にサービスに ち み、サービスと のリソースを します.

リソースが されていない は、304に り、ブラウザでローカルキャッシュを み す.

リソースが されたら、200に り、 のリソースを します.

DNS
の :

は、meta を いてブラウザに らせ、 のページはDNSの を う がある:

は、ページheaderにおいて、linkタグを してDNS を する.

:dns-prefetchは に う があり、マルチページでDNSプリケーションを り すと、 り しDNSクエリの が します.
なDNS Prfetchを する がある は、 のタブを してもよい.

ブラウザではaタグはデフォルトでDNSプリ を きますが、HTTPSではデフォルトではオフになります.
CDNコンテンツ ネットワーク
ネットの の は いネット を して、ネットの を します.