それのWEBフロントエンドとは何ですか？それは私たちがユーザーのコンピュータのブラウザのすべてです。、ユーザーがアクセスしたサイトのを見てみましょう、ブラウザがどのような事を行っています。
URLを入力します。 - >解決ドメイン名 - >リクエストページ - >ページを解析し、リソース要求ページを送信 - >リソースをレンダリング - >出力ページ - >モニターのユーザーアクション - >再レンダリング。
分析ウェブフロントエンドのパフォーマンスを向上させる方法紙の三つの部分から、ユーザのアクセスを達成するために、三つの部分をレンダリングする、ブラウザ要求、伝送中に上記のパスから分かるように
リクエスト
ブラウザのリクエスト送信を削減するためには、自分のキャッシュメカニズムを実現しています。ブラウザのキャッシュには、Webリソースである認証機構（のEtagブラウザのキャッシュメカニズムがベースの、ローカルキャッシュ場合は、キャッシュを表示するために行く、コピーのコピーが、再び同じURLを要求すると、ブラウザに保存されている要求しました）と有効期限のメカニズムは、（Last-Modifiedの）判決は、キャッシュを使用するか、サーバーのリソースからファイルを転送することです。以下に示すように特定のプロセス。
ブラウザの要求がいくつかによって複雑になる、などのいくつかの障害物、：画像、CSS、要求インターフェースは同時であり、JSファイルがブロックされています。要求されたときJSは、ブラウザは、解析が完了したJSファイルをロードするのを待って、レンダリング処理を中断し、その後再レンダリング。だから、JS最後のページにファイルをする必要があります。
JSは、並列にブロッキングから二つの方法で変更することができる：一つはDOMに、スクリプトタグを作成することによってであり、他のスクリプトタグ属性非同期を増加させることです。
各ブラウザが同時同じドメイン名の数に制限があり、IE6 / 7が2である、IE9は、他の一般的なブラウザはそうリソース要求とリソースマルチドメイン構成ファイルを使用するの数を減らす、6、10大幅にサイトのパフォーマンスを向上させることができます。
リソース要求の数を減少させる方法は、一般的に次のようにあります。
1は、パッケージングツールによって、リソースを統合し、リソースの数を減らします。これは、クラス別のリソースファイル、展開時間の多くは、出力に複数のファイルをマージされた開発版です。モジュール管理を実現しつつ、出力を統一。
2、CSS、要求の数を減らすために、CSSスプライト画像を使用しています。
知覚せずにユーザリソース要求場合には、ローディング技術を遅らせることによって3、。
4、サーバ構成は、淘宝網CDNなどのリソースファイル、複数の返却要求を実現しています。
リクエストの数を減らすことに加えて、CDNミラーは、ネットワーク・ノード、高速応答を減少させるために使用されてもよいです。コピーするには、リソース・サーバ・ノードから、要求が新しい場合、最寄りのCDNのノードを見つけ、ユーザの位置に基づいて、CDNの要求を、使用して、クライアントに返します。要求が存在する場合、プロセスは直接クライアント・ノードから返されます。
私たちはオンラインの時間を展開する場合、我々はキャッシュメカニズムを知っている以上により、キャッシュを更新する必要があることです。強いブラシで普通のキャッシュが一晩変更することができ、かつCDNキャッシュは、URLを変更することで達成する必要があります。私たちは、最も効果的な方法で展開されたときに、URLの団結を変更、パッケージングツールでそうCtrlキーを押して、リフレッシュするためにユーザに要求することはできません。多くの場合、このようなechart、jqueryのではなく、提案された変更として、ファイルライブラリを変更せず。
第二に、伝送
サーバーからクライアントへの送信は、あなたは、伝送効率を向上させるためにgzip圧縮をオンにすることができます。
gzipは1-10からの10個のレベルがあります。小さい圧縮が高いが、サーバーのハードウェアリソースが使用するより圧縮。実際、グレード5、最もバランスの取れた、この時間圧縮は100K 20Kに圧縮することができるによると。
第三に、レンダリング
ブラウザのHTMLをロードした後、それは資源要求が出て解析した結果に基づきながら、片側を解決し、DOMツリーを生成します。ロードされた、CSS、レンダリングツリーを生成し、生成されたDOMツリーに基づいた優れたレンダリングエンジンでした。他のすべてのリソースが解析された後、完全にブラウザインタフェースにレンダリング、レイアウトを計算します。ユーザの操作としては、JSが再描画や再配置、DOMノードまたはスタイルを変更します。DOMノードがレンダリングに対応するノードを指す再描画描画、再配置は、ブラウザインタフェース内のノードの位置を再計算することを指します。再配置は非常に時間がかかるの性能であることは明らかです。私たちはしなければならない再構成の数を減らすことです。
DOMツリーを生成し、我々は、DOMノードを減らすことにより、パフォーマンスを最適化することができます。最初に、レイアウトテーブル、深さとかなり複雑な、パフォーマンスの低下のノード番号を有します。カスケードスタイルシートと同じCSS、レベルが深すぎ、それ以外の場合はコストがかかる横断することはできません。また表現CSSプロパティではなく、パフォーマンスを消費し、それは行うことはできません。CSSアニメーション効果はJSを書かない書くことができ、レンダリングエンジンと、パフォーマンスの損失は同じではありませんが、同じではありません。
これは、レンダリング処理を解析し、我々はその後、ユーザーとの対話のプロセスについて話をするようになったと言います。ユーザーのアクションが再描画と再配置するためにつながる、転位が再描画を引き起こし、必ずしも再編成につながることはありません再描画します。最終的にはどのような並べ替え、それを引き起こすのだろうか？単純な定義、DOM構造の変更、およびDOMスタイルの幾何学的特性の変化は、再編成につながります。幾何属性名は、示唆パッチ、パッチなどの外に、一般的に高ボックスモデルのプロパティ、ボーダーとして知られ、広いです。だけでなく、マージン特性等を相殺しました。
転位は再配置方法があり減らし、最もエネルギー集約的です：
1.あなたが繰り返しDOM、メモリ内の最初の変更、DOMに挿入された最後の一時間を変更する必要がある場合。
図2に示すように、上記は、スタイルで複数の変更された場合、合成され、次いでDOMに挿入しました。
図3は、により固定された位置とするときabsoute値に、文書ストリーム、例えばDOMノードの動作からの逸脱と、ページ全体の再配列を引き起こしません。だから、アニメーション要素が離れて、文書の流れからの位置を設定します。
noneに等しい表示するために、すべての操作を待っているが完了するように、その後、ディスプレイがそのように、ブロックに設定され、比較的複雑な操作ので、もしディスプレイが、それはレンダリングツリーに存在しないなしDOMノードに等しい4、 2回だけ再配置。
図5に示すように、取得が再配置プロパティ値をもたらす場合、変数に格納され、それは再び再配置再度使用されません。これらのプロパティは、再配列につながる入手：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTopスプライト、scrollLeft、scrollWidth、scrollHeight、のclientTop、clientLeft、clientWidth、clientHeight
これらがどのように上記に加えて、ページの肉眼にリソースを置くために、ブラウザで、ブラウザのパフォーマンスの最適化プロセスに基づいてまとめた、我々はまた、最適化が必要JavaScriptのプログラムを見てする必要があります。のではJavaScriptガベージコレクションを見てみましょう。
Javascriptのエンジンは、ローカル変数がメモリのシェアのリリースをオフに書き込むために使用されることはありません、一定の時間間隔になります。そして閉鎖があり、参照は解放されませんがありました。グローバル変数のライフサイクルは、アンインストールするまで、ブラウザのページが終了します。だから、一般的に言えば、メモリオーバーフローがグローバル変数とクロージャの原因のリリースによるものです。メモリのオーバーフローを防ぐために、我々が行うことができる方法は以下のとおりです。
1は、無名関数のビジネス・コードがすぐ内側に実行され、すぐに解放終えました。
変数は過ごしながら2は、以下のグローバル変数は、手動でオフに書かれました。
3、代わりに内部閉鎖プロパティにアクセスするためのコールバックを使用して
クロージャの必然的な使用は、慎重に詳細を扱わ4、。オフのときは書かれていません。
図5は、ブラウザを介してメモリの活動をチェックするために、ツールプロファイルが付属しています。波記載通常なら。それはメモリが解放されませんを示し、緩やかな上昇を傾けている場合は、適切な機能を確認する必要があります。
一つの最終地点、撮影した非同期関数の戻り値は、それはそう頻繁でした。
Var getList = function(){ $.ajax().then(function(data){
Return data;
}) };
Var users = getList();
そこは間違いないが、ある非同期関数に戻ることによるものであるため、戻りはむしろ必要なデータよりも、未定義にすることができます。だから、戻ってデータを達成するために、取得したデータに対する非同期と同期で、設定アヤックスが偽になる非同期属性を置きます。しかし、最大の問題は、ユーザが操作応答ではありません、要求が戻るのを待っているレンダリング処理を、中断されます同期は、ページ全体がスタックしている、です。この問題の真の解決策ではなく、非同期同期に比べて、オブジェクトを返すことを約束することです。
著者：Mazong澤