限り二つの側面、1つのローディング速度の最適化におけるフロントエンド最適化として、第二のレンダリング速度の最適化です。最適化を実行する前に、二つの基本的な理論的な知識を習得します
理論的な知識（A）：レンダリング処理のブラウザの全負荷
①、URLを入力するリクエスト送信
②負荷（すなわち、ダウンロードに）全体の.htmlファイル
に解決ロード後③（すなわちランニング）、HTML、およびDOMツリー解析プロセスを構築
・JavaScriptがシングルスレッドです。ブラウザは、マルチスレッドです：いくつかのスレッドがロードするリソースを担当して、いくつかのスレッドはスクリプトの実行を担当して、いくつかのスレッドがインターフェースをレンダリングする責任があります。
・各HTMLタグの構文解析（深トラバーサル）の下で、原則上のブラウザから
プロセスのプロセス解像度のタグがDOMツリー構築することである
-analytic出会いリンク、スクリプト、imgタグを、ブラウザがサーバリソースへの要求を送信します。
彼らはJSの実行、その解析およびレンダリングをロードし続けるためにJSの実装後まで待つ必要性の内容を知らないので、スクリプトがロード時にロードするために他のリソースに影響を与えるのではなく。
スクリプトの実行は、ダウンロードするには、スレッドと他のスレッドをレンダリング、HTMLの構文解析をブロックされます。
リンクはCSSをロードした後（カスケーディングスタイルシートが一つだけのスタイル情報を含むモデルツリーオブジェクト）CSSOMに解決されます。CSSの負荷とブロックせずにHTMLの解析を解析しますが、レンダリングをブロックします。
IMGの負荷解析HTMLをブロックすることなく、それはロード後のimgをレンダリングしていない、それがツリーをレンダリングし、ツリーを一緒にレンダリングされたレンダリングを生成した後まで待つ必要があります。ダウンロードされていない画像がレンダリングされたダウンロードした後、待たなければなりません。
CSSはCSSOM、DOMのHTMLの解析に解決すると④、2つのツリー（ツリーレンダリング）レンダリングが生成されます。
⑤Layout（リフロー）：各ノードレンダーツリーの形状及び位置を計算します。（パフォーマンスの廃棄物）
⑥Painting（再描画）：ように、ブラウザレンダリングスタイル、色、背景、国境やこれらの要素の大きさと。（パフォーマンスの廃棄物）
（ラミネート用）⑦Composite：ブラウザ情報は、描画層のGPUのそれぞれに送信され、GPUは、適切な順序で結合され、次いで層が画面に表示されます。（GPU合成画像、別のスレッド、より多くの流体が、メモリ消費量）
理論的な知識（2）：ブラウザのレンダリングパフォーマンス指標
この周波数は、レンダリング未満であるため、ほとんどのコンピュータのモニタは、レートが60Hzの、第二再描画あたり60回とほぼ同等でリフレッシュし、ページがユーザーエクスペリエンスに影響を与え、カトン現象が表示されます。ほとんどのブラウザは、ユーザーエクスペリエンスの周波数よりもさらにを向上させることがないので、これ以上のディスプレイの周波数を再描画するよりも、運転制限を再描画しません。したがって、最も好ましい滑らかなアニメーションサイクル間隔は1000ミリ秒/ 60であり、16.6msにほぼ等しいです。インジケータは、ゲーム開発の最も重要な指標です。
*フロントローディングの最適化：
使用のアウトリーチCSSやJS：HTTPリクエストを減らす、ブラウザのキャッシュをしてみましょう。利用可能なのWebPACKは自動的に更新され、ブラウザのキャッシュリソースへの定数の参照に基づいて、バックにリソース参照のハッシュ値を増やします。小さなキャッシュ容量の問題のために、キャッシュのlocalStorageを考えます。
・マージCSS、JS：HTTPリクエストを減らします。
オンデマンドローディング：WebPACKのパッケージは、プログラムロジックの思想から開始である：エントリファイル=>解析コード=> =依存同定>包装、袋に参照されないようなコードモジュールを効果的に音量を小さくすることができません。
・プレスJSモジュールがロードされている：例えば、Kのみのechart図ラインモジュール場合にのみ、負荷線kになります。
圧縮HTML、CSS、JS：リソースのサイズを縮小します。
・アイコンBASE64を使用した：HTTPリクエストを減らします。
・スプライトマップ（SVG、フォントのアイコン）を使用して、アイコン：リソースのサイズを小さくするためにHTTPリクエストを減らします。
・画像圧縮：picdiet（https://www.picdiet.com/zh-cn）、JSが符号化され、無サイズ、サイズ、量は、デフォルトのボリュームが平均で50％低減することができ、明確さの実質的に損失なく、互換性がありません問題は、あなたはまた、圧縮率を調整することができます。
空のSRCのような写真やiFrameを避けてください：http要求を減らします。
・ピクチャー：遅延ロードをスクロールします。
・CDNアクセラレーション：このようなjqueryのように、応答リソースの速度を向上させるechartsを共通リソースCDNアクセラレーションを使用しています。（Http://www.bootcdn.cn/）
・BigRender最初の画面描画の最適化：HTML、JS、CSSと画像がtextareaの遅延ロード（https://segmentfault.com/a/1190000006744741）に配置されています。
•増加のロードプログレスバー：荷重ケースは、ユーザに提示されます。
* HTML、CSS構造最適化：
以下、ページラベル、ページの読み込み速度より速く、そしてより迅速な対応。
・CSSがブロックされてロードされないので、頭の上にCSSは、白い画面がちらつきによって引き起こされたコンテンツを再描画し、再配置を防止します。
■は：n番目の-最後の子・のような、短いのクラスを保つようにしてください （-n + 1）.TITLEを、 読み：.final-ボックスのタイトル。
・フレックスレイアウトを持つフローティングレイアウトを交換してください。
・空のCSSルールを削除します。空のCSSルールは、CSSファイルのサイズ、およびCSSツリーの実装の影響が増加します。
過度の開始効率のCSSフォントサイズのツリー：•は、あまりにも多くのフォントサイズを宣言しないでください。
・0の値は、任意の単位を必要としない：ブラウザの互換性とパフォーマンスのために、ユニット0:00を取ることはありません。
・レンダリング表示プロパティは、公正使用であるためには、ページに影響を与える：
①display：インライン後には、もはや、幅、高さ、マージン、パディング及びフロート使うべきではありません
②displayを：もはやインラインブロックの後にフロートを使用する必要があり
③display：垂直後のブロックを使用すべきではありません-align
④display：マージンは*の後やフロート卓上使用すべきではありません
* DOMのパフォーマンスの最適化：メインは転位を防止し、再描画することである
。・画像、オーディオとビデオの幅と高さ0にロードする前に、その最初の静的な負荷資源は、画像の大きさを規定すること。
・リセット画像サイズを避けるようにしてください：繰り返し画像のサイズをリセット何回も画像を再描画するためにつながる
（学習する）マルチユースのrequestAnimationFrameの
・あなたは、同時に親と子要素を追加し、メモリに最初にその子要素であることをした場合親要素の下で、親要素は、1つのDOMツリーに追加されました。
・あなたは、同時に複数の子要素を同じレベルを追加した場合、最初のサブ要素のドキュメントフラグメントの同じレベル、文書の断片に入社し、その後、全体のページに追加。具体的には：
①文書フラグメントを作成します。var FRAG = document.createDocumentFragment（）;文書フラグメント：一時ストレージの仮想メモリレベルの親要素のレベルのサブ要素とを備えます。
②サブ要素の同じレベルが、第一次FRAGに追加：同じ共通の親要素を使用
全体のページに追加、③文書フラグメントを
-dom第1ノードの表示：なし;（再配置をトリガします）。そして、多くの変更を行い、それが表示されます。
・変更後、メモリにDOMノードを複製し、そしてノードオンライン位相置換。
・IDセレクタは最速で、IDセレクタを使用してみてください。
•あなたはドムを計算することを選択するたびに、彼はゲンロックレイアウト（力リフロー）を避けるためにキャッシュします。
•のために複数のスタイルの要素を変更、あなたが強制同期のレイアウトを避けるために、cssText属性を使用することができます。例えば、以下の、トリガー3回のリフロー：
VAR =のdocument.getElementById EL（ 'myDiv'）;
el.style.borderLeft = '1ピクセル';
el.style.borderRightは= '2ピクセル'。
el.style.padding = '5pxの';
このように、1つだけの再構成：
VAR =のdocument.getElementById EL（ 'myDiv'）;
el.style.cssText =「ボーダー左：1ピクセル;ボーダー右： 2ピクセル;パディング：5pxのは、「;
クラスが必要なクラス名のクラスを追加することにより、その後のスタイル複数の変更され、定義しています。
・アニメーションの詳しい使用変換し、不透明度、彼らは合成、レイアウトにつながるし、再描画が発生しません。
要素が層を再描画する必要がある場合•は、層全体を再描画する必要があります。（0）手動でレンダリングする画素の必要な数を減らすこと、層をレンダリングtranslateZで作成され、GPUにも加速することができます。しかし、大幅にメモリ消費量を増加させる性質を乱用しないでください。します。https：//developers.google（詳細については。
CN /ウェブ/基礎編/パフォーマンス/レンダリング/簡素化・ペイント・複雑-削減-と-ペイントの分野） ・テーブルのレイアウトを使用しないでください、小さな変化がテーブル全体の再レイアウトになります。
・代わりに、CSS、JSのアニメーションを使用してのアニメーション：CSSアニメーションは完全にGPUに取り組んでいる重要な機能を持っています。あなたが開始するとどのように終了するかのアニメーションを宣言しているため、ブラウザは、アニメーションを開始する前に、すべての命令が必要な状態になります。そしてGPUに送信します。JSのアニメーションを使用した場合、ブラウザは、各フレームの状態を計算しなければならない。滑らかなアニメーションを確実にするために、我々はブラウザのメインスレッドで新しい状態を計算しなければならない。毎秒GPUに少なくとも60回送信します。CSSアニメーションより遅いデータを計算して送信することに加えて、負荷のメインスレッドもアニメーションに影響を与えます。あまりにも多くのコンピューティングタスクのメインスレッドは、アニメーションの遅延カトンの原因になりますとき。だけでなく、より速く、CSSベースのアニメーションを使用して、可能なので、限り、それはブロックされたコンピューティングのjsの多くではありません。
あなたはサイズ次いで、5％--10％とすることにより画像がそれらを大きくするためのスケールを使用することができます。ユーザーは任意の違いは表示されませんが、あなたは、ストレージスペースの量を減らすことができます。•複合層のサイズを縮小します。
・仮想DOMの技術：例えばVueのは、反応した仮想DOMの使用上の他のフレームワーク。
*スクリプトの最適化：
・それは最終的に<SCRIPT>タグでなければなりませんように、我々は、スクリプトがロードされることを知っていて、ページをブロックし実行します。
・JS：スロットル機能（スロットル）：一回しかXX秒を実行し;（https://segmentfault.com/a/1190000006722279）
・JS：デバウンス機能（手ぶれ補正）：連続トリガ関数が呼び出され、決勝で最初の呼び出しが一度XX秒をトリガした後、それは始まりました。（https://segmentfault.com/a/1190000006732819）
・マルチ条件については、辞書速いのif-elseより。
矢継ぎ早のレイアウトを避ける：
改善前：resizeWidth機能（）{
// '読み取り書き込み'サイクルにブラウザを作る
ための（VARのI = 0; I <paragraphs.length; I ++）{
段落[I]。 + = box.offsetWidth style.width 'PX';
}
}
改善後：VAR幅= box.offsetWidth;
関数resizeWidth（）{
用（VAR I = 0;私はparagraphs.lengthを<; Iは++）{
段落[I]。幅= + style.width 'PX';
}
}
・深さより深いプロトタイプチェーン、検索速度が遅くなります。覚えておいて、検索プロセスのインスタンスメンバーまたは重い直接的負担のローカル変数量、これだけのアクセスよりも、この効果を増幅するコストを増加させるために、プロトタイプチェーンを横断します。
・検索機能のスコープチェーンはグローバル変数がスコープチェーンの最後に常にある、パフォーマンスを消費しますが、それは最も長くなります。できるだけローカル変数を最大限に活用。親指の良いルールは、ローカル範囲外の変数によって格納されたローカル変数の値。
・メンバーはより深く、より遅いアクセス速度を入れ子になりました。LOCATION.HREF window.location.hrefよりも常に速く、より速く）（window.location.href.toStringよりも後者。これらの属性のインスタンスがオブジェクトでない場合は、メンバーに時間がかかります各点の分析プロトタイプチェーンを、検索する必要があります。
・ような簡易計算のための：（VAR = I 2、I <= Math.sqrt（N-）; Iは++）{IF（N-I％== 0）{}}偽に戻り
、以前-mentionedする各フレームに描画されるべきです彼らは多くの時間を占有しているので、時間のかかるJavaScriptコードを実行するためには、3~4ミリ秒で制御しなければならないので、16msの内に完了しますが、アニメーション処理。そこに非常に時間がかかり、純粋に計算作業のDOM要素を操作しない場合は、考えることができるウェブ労働者は、実行中に入れました。
最適化する*サーバー設定：
*キャッシュキャッシュ可能なすべてのリソース：HTTPキャッシュ。
•避けるために長いキャッシュ、304リダイレクトを使用してください：携帯端末ネットワークが不安定、1つの以上の要求、マルチパートのロード時間の前提。
DNSキャッシュを使用します。ブラウザは、DNS解決に費やす時間を短縮します。
・でGZipを有効にする：gzipはページのサイズを圧縮するために使用される、HTTPプロトコルの一部です。
*画像圧縮：デフォルトのフロントエンドサムネイル伝記を生成します。
クッキーの削減：クッキーは、読み込み速度に影響を及ぼしますので、静的リソースドメインはクッキーを使用しません。
・DNS：DNSの数を減らすために-クロスサイト参照外部リソースを減らします。
•接続の作成：作成した接続の数を減らす-重複を避けるために、キープアライブ接続を使用して。
・応答を待つ：サーバーの速度を向上させるために-操作やデータのクエリ速度を向上させます。