パフォーマンスの最適化について
4976 ワード
パフォーマンスの最適化
何を求めているのか、あなたのページが最も速いスピードで開くことができます.例えば、ユーザーがパチパチと開いたところで、何の操作もすぐにフィードバックがあります.
キーワードは:速度
未来のある日を考えてみて、18 Gの时代になって、すべての人のネットのスピードはすべて1000 Mで、それではあなたはまた何を最適化してあなたのウェブサイトはたとえ100 Mの大きさでも恐れません.
しかし、それは遠い未来で、今のネットのスピードはまだこんなに速くありません.
だから私たちの問題は、比較的低いネット速度の上で、できるだけ早く私たちのページをロードすることです.
固定変数:ネットワーク速度.
だから問題は:固定網速がpの条件の下で、どのようにできるだけ私たちのページを早くロードします.我々のリソースサイズがnであり、ネットワーク速度がpであると仮定すると、理論的には、サーバからクライアントを取得するのに必要な時間は次のとおりです.
time = n/ppが固定すると、nが小さいほどtimeが小さくなる.つまり、私たちの資源の体積が小さいほど、時間が短くなります.
問題は、私たちのリソースのサイズをどのように減らすかということです.まず私たちの資源の種類はどれらがありますか?
images
js
css
html
fonts
others
ボリュームを小さくする方法を次に示します.
js
css
html
fonts
others
これらは、現在存在するリソースの上に構築され、前処理もできます.
上記の議論は、実際には、すべてのリソースがserverからclientに移行した後、clientがページを見ることができるという前提があります.
しかし、これは本当ではありません.一部のリソースを持って帰ってきたら、ページが表示されることがあります.だから私たちは資源をいくつか区別して、「ページを表示するために必要な最小資源の集合」を優先的に返して、残りの資源を話して、これも1つの考え方です.
だから私たちの問題は、その最小のリソースの集合を見つけたり、リソースの順序を合理的に手配したりすることです.how?
依然としてリソースのタイプです.
images
js
css
html
fonts
others
images , .
pageA, pageB , .
この方面に関連するいくつかの概念は:
実はこの言葉はserverが資源を手配する順序のようですが、あなたもそうではないことを知っています.serverは私が頭がないと言っています.あなたは自分で手配します.だからlinkを事前にロードし、scriptを後ろにロードします.
上は最初の段階の終わりですが、今はもっと前に言います.
time = /
実はこのモデルは、明ちゃんがA時からB時まで総重量100 kgのものを持ってきて、明ちゃんが全部B->Aから出すにはどのくらいかかりますか?明ちゃんが毎回いくら持っているかと、彼が一度にどのくらいかかるかと関係があるのではないでしょうか.上記の「ネットワーク速度」という概念は混合変数です
'ネットワーク速度'=('帯域幅','対応する時間を要求')
帯域幅、すなわち、毎回いくら取るかは、一般的には一定の値であると仮定すると、要求応答時間が残り、インタフェース応答が速い点に関連する.
前の議論では、明ちゃんだけが引っ越していると仮定していましたが、10人いたら?ここでは、ブラウザのパラレルロードについて説明します.
これはブラウザが提供したもので、私たちの性能最適化手段について話します.彼とは関係ないようです.これはブラウザがしたことです.いいえ、利用できます.この観点から、パラレルロードの数が多ければ多いほど良いのではないでしょうか.はい.では、パラレルロードの数を増やしてみましょう.例えば、1から100に上げると、ブラウザのパラレルロードはdomainを区別して制限され、1つのdomainは最大4つ(異なるブラウザで異なる)のパラレルロードをサポートすることができます.
では、リソースを複数のドメイン名に分割すればいいのではないでしょうか.この理屈のようだ.あなたは100の資源を持っていて、25のドメイン名に分けて、同じドメイン名の下で4つの並列を支持して、それではあなたは一瞬にして100個がすべて出したのではありませんか?そのスピードはさっと上がったのではありませんか?(これは判らなかった)
では、もう少し短くする方法はありませんか.AとBを近づけましょう.これがCDNです.つまり、私たちはCDNに行くことができます.これは確かに私たちがやったのです.
上記は、1回目のロード、1回目のアクセス時、2回目の3回目のアクセス時、この時はキャッシュに関連しています.
キャッシュは私の記憶の中の概念で、性能の最適化の時に言及したキャッシュは一般的に3つの状況があります.
この2つの「100の資源」を統合すると、統合に多くの資源があることがわかります.つまり、このサイトに2回アクセスしたとき、同じリソースに対して2回リクエストしました.これはきっと不要で、浪費したに違いない.だから私たちは完全にやることができます.
どうしたの?
私たちの目標は、Aのすべてのリソースを一度だけ要求すればいいということです.1 Aを手に入れるにはどうすればいいですか?资源は私达が出したので、コードはあなたが书いたので、あなたは资源に対してすべてとてもはっきりしていて、だからあなたは自分でどれらの资源がずっとすべて変わらないことを知っていて、どれらの资源はしばらくの时间でどれらが毎回変わったので、あなたはとてもはっきりしています.
では、私はあなたにすべての不変の資源Aをあげます.
2キャッシュは誰がキャッシュしますか?ブラウザよ、ブラウザはどうしてこのリソースの中でどれがキャッシュされるか、どれが要らないか知っていますか.君は知っているから彼に伝えなさい.どうやって彼に言ったの?httpプロトコルですね.それはhttp headersフィールドのマークにすぎません.ここでは、協議の首長がどんな様子なのか具体的には説明しません.
serverはclientに、このファイルはキャッシュしなければならないと言って、このファイルはいつ期限切れになったのか次のアクセスの時、ブラウザが要求した時、このファイルを発見して、それがいつ期限切れになったのかを見て、期限切れになっていないことを発見したら使って、ああ期限切れになったことを発見したら、それでは新しい要求をやり直します.賞味期限という意味です.
2つ目の案はstorageでキャッシュして、私の印象の中で2つを見たことがあります:微信美団のLsLoader
3つ目はAjaxリクエストキャッシュである、通常queryタイプのインタフェースのキャッシュ、例えば商品リストなどに見られる.
最後のディスカッションポイントでは、リソースが戻ってきてページが表示されていると言っていましたが、ブラウザがリソースをレンダリングする必要があることもあります.
ブラウザのレンダリングプロセスは、いったい何を言っているのか、プロセス全体を話しているのか、リソースを入力してページを出力しています.手順は大体このように説明できる.
html ->
-> render tree -> layout -> paint -> .
css -> Layout:render treeの上の各ノードの位置を手配し、サイズpaint:各ノードを描画します.
流れはこうですが、何か問題がありますか.
(1)ダウンロードと解析が同期しているかどうか、いいえ、ダウンロードしながら解析しているので、すべてのリソースがダウンロードされるまで解析する必要はありません.つまり、htmlが来たらhtmlを解析し、cssが来たらcssを解析します.
(2)レンダリング中にjsに出会ったらどうする?レンダリングを続行しますか?それとも停止しますか?jsを先に実行しますか?実は2つの答えだけで、続けるか、止めるか.
続けて、jsを私がレンダリングした後に実行させます.焦らないでください.はい、レンダリングが終わったら、jsの中でさっと実行してください.
document.write('');
これは、私のすべてのレンダリングの努力が無駄になったことを意味します.これに対して、レンダリング時にjsに遭遇するなど、実行が終了してから実行を継続することで、全体の努力が無駄になることを防止し、リスクが小さくなるので、待つようにしましょう.
したがって、レンダリング中にjsに遭遇すると、停止して実行する.
それはjsにそれがいったいあるかどうかを教えてくれませんか?つまり、DOMを変更して、时にはそれは确かにできないことがあります.この时、私はむだに待っています.だからdeferとasyncがあります
これは、defer、defer、あなたに教えて、あなたは私を待つ必要はありませんて、あなたはレンダリングを続けて、私はあなたを変えることはできません.okこの时、jsはブラウザでレンダリングしてから実行します.
asyncは?これはお父さんです.これは、私を待たないでください.私もあなたを待っていません.私はどうせ降りてから実行します.