Jsの基礎（5） - フロントエンドのパフォーマンスの最適化の概要

フロントエンドのパフォーマンスの最適化の概要

リソースの最適化

キャッシュ

最適なリソースの最適化は、リソースをロードされていません。最適化は、キャッシングの最も有効な手段です。クライアントキャッシュがブラウザで発生しますが、キャッシュサーバは、主にコントロールするものの、正直に言うと、フロントエンドとの関係は素晴らしいではありません。しかし、まだ、私たちは知る必要があります。

キャッシュは、キャッシュサーバとクライアント側のキャッシュを含み、我々はクライアントキャッシュについて話しています。いわゆるクライアント側のキャッシュ主にHTTPキャッシュ。HTTPキャッシュとキャッシュが必須相談キャッシュに分かれています。

強制キャッシュ

• 有効期限（HTTP1.0）

使用して、HTTP1.0でキャッシュ内に行うことを余儀なく有効期限。サーバーの有効期限から返されたデータのExprires値。この時間が再び要求された場合は、要求時間が直接使用されるキャッシュされたデータのリターンよりも小さい場合。ただし、サーバとクライアントの時間のために、時間にもキャッシュヒットとエラーになりますこれは、エラーがあるかもしれません。

• Cache-Control

Cache-Controlは、異なる属性が異なる表す意味、多くの属性を持っています。

1. プライベート：クライアント缶キャッシュ
2. 公共：クライアントとプロキシサーバーの缶キャッシュ
3. 最大エージング= T：キャッシュの内容は、t秒で期限切れになります
4. キャッシュなし：キャッシュ相談は、データキャッシュを検証するために必要とされます
5. 無店舗：すべてのコンテンツがキャッシュされません。

キャッシュ相談

まず、ブラウザの要求データ、サーバーは、クライアントがキャッシュにそれらをバックアップし、クライアントに識別データキャッシュで応答します。要求、クライアントがサーバに識別子キャッシュします繰り返しますが、サーバーはこの識別に基づいて決定されます。いいえ失敗した場合、ステータスコード304は、データキャッシュとして使用することができ、このステータスコードを取得するには、ブラウザを返します。

• 最終更新日

サーバー要求に応答して、それが最後に変更され、ブラウザのリソースを教えてくれます

• 変更 - 開始

ときに再びサーバーにブラウザがリクエスト、リクエストヘッダにはLast-Modifiedのキャッシュ（最終更新時刻）で得られ、続いて、このフィールドが含まれます。要求されたリソースが最後に変更された時間よりも大きい場合、サーバーは、変更される場合は-ので前に、要求されたリソースの最終更新時刻と比較して、要求の髪を受け304が返され、ブラウザがキャッシュからリソースを取得します。要求されたリソースよりも少ないが、最後に変更された場合、それは、最新のサーバーからのリソース、およびキャッシュのブラウザを最新のリソースを200を返し、戻ります。

• たEtag

リソースサーバによって生成された各固有の識別文字列

• もし-なしマッチ

サーバへのリクエストは再び、ブラウザ要求パケットのヘッダは、キャッシュIDで得られた値の後ろに、このフィールドが含まれますとき。サーバが受信した場合のIf-なしマッチメッセージビューには、要求されたリソースの一意の識別子と比較されました。同じ場合は、リソースは異なるリソース記述が変更されている場合は、200に戻り、リターン304、キャッシュからのリソースへのブラウザアクセスを修正し、最新のリソース、最新のサーバーからのリソース、およびキャッシュのブラウザを返すされていないことを示します。

Last-ModifiedとETagのは、一緒に使用することができ、サーバーは、ETagのを確認するために優先順位を与える、同じ状況下で、304を返すかどうかを決定する前に、Last-Modifiedの比較していきます。

あなたがツールをパッケージ化フロントエンドを使用する場合は、ファイルは、バージョン番号やハッシュ値に加算されるファイルにパッケージ化することができ、それはまた、資源の有効期限が切れているかどうかを区別することができます。

HTTPリクエストを減らします

• 使用CDN静的リソースをホスティング
• マージファイルのJS、CSSと他の圧縮に一口、WebPACKのおよびその他のパッケージツールを助けることができます
• 写真遅延ロード、オンデマンドの読み込み、画像へスクロールロード画像を行く前にエリアを表示します
• スモールピクチャー、それはBASE64符号化して伝送を使用して、基本的な画像を変更しません。base64では、小さな画像のbase64エンコーディングが長い文字列を生成します後でも、虐待していない虐待base64であれば、それは逆効果になります
• 無差別使用は逆効果になる場合は、図スプライト、スプライト図これは、基本的な画像のために使用されている変更されませんが、画像が変化した場合ので、全体マップスプライトの再生成の原因となります。

リソースhttpリクエストの量を削減

• WebPACKのでは、一気圧縮ツールなどのリソース
• サービスは、（圧縮率が通常30％以上、非常に印象的である）gzip圧縮で有効になっています
• 便利なツールがパッケージ化した場合、実行する最適化をパッケージ化、公共資源、サードパーティのコード、ノーパッケージライブラリを抽出...

レンダリングの最適化

（範囲を解決していないTCPハンドシェイク、DNSなど）、画面上のページが表示され、行われたものを、物事のブラウザからURLを入力することを知っておくべき機構を作動フロントJSをお読みください。

• FPSは、最高のGoogleのdevtoolビューを完了するために、以下10msのフレームレートよりも16msの

ブラウザは、60 FPSに到達する場合は、比較的スムーズに表示されますが、ほとんどのモニタのリフレッシュレートは60Hzで、この周波数に応じて、ブラウザが自動的にリフレッシュアニメーションです。
FPSによれば、この時間以上はフレーム、カトン現象がドロップされる場合たびにレンダリング時間は、16msのを超えることはできません、1000ミリ秒/ 60 = 16.7msの平均時間を計算するために60に等しいです。

タイムラインは、リフレッシュレートを表示するには、クロムのブラウザの開発者ツールで、あなたはすべてのフレームレートだけでなく、時間のかかるフレームの実装を表示することができますすることができます。チュートリアルのタイムライン：HTTPS：//segmentfault.com/a/11 ...

通常のFPSを確保するために、いくつかのレンダリングパフォーマンスの最適化が必要です。以下の戦略は、レンダリングの最適化に関連する記述されています。

• CSS3を使用してアニメーションを行うようにしてください

私たちが知っているように、JSよりもCSSの高速なパフォーマンス、彼らが使用することができますCSSは、JSを達成しようとしないでください

• requestAnimationFrameのアニメーションドム操作のsetTimeoutかのsetIntervalを使用しないでください、または高周波を利用するように。

setTimeoutとのsetIntervalは、コールバック関数の実装のタイミングを保証することはできませんので、コマ落ちが生じ、時間枠の終わりに行うことが可能ですが、requestAnimationFrameのは、コールバック関数が実行される保証することができたときに、アニメーションの各フレームの開始
の中国のMDNアドレスrequestAnimationFrameの：HTTPS：//developer.mozilla.org ...

• ウェブ労働者を使用して複雑なコンピューティング事業

あなたがやることは容易にし、Webワーカーは、そのような合計を横断要素の配列として、複雑なデータ操作を必要としている場合。

バックグラウンドスレッドは、ページのメインスレッドには影響を与えませんしながら、ウェブ労働者は、JavaScriptのスクリプトは、（子スレッドの作成と同様）バックグラウンドスレッドで実行することができます。しかし、スレッドの使用が作成したWeb労働者は、DOMツリーを操作することはできません。
より多くのウェブ労働者については、MDNのコメントを表示することができます。HTTPS：//developer.mozilla.org ...

• 頭の上にCSSは、尾にJS。

ページのレンダリングは、プロセスがどのように知っておくべき機構を作動フロントJSを読んで、それを繰り返しません。ヘッド避けるスプラッシュスクリーン現象生成されたHTMLのツリー上のCSSは再レイアウトした後、通常、最後の実行尾に、ページ上で一般的に大きな影響をJS。

• イベント画像安定化（デバウンス）とスロットル（絞り）

ままにしておく高周波イベントトリガー（のMouseMove、スクロール）やその他のイベントの場合は、短時間で多くのイベントをトリガします。

防振機能は、一度コードを実行するだけの十分な空き時間、頻繁なトリガーの場合を指します。シーン：800ms後にチェック：Eメールの登録入力ボックス、リアルタイムでユーザーの入力に加えて、正しいメールボックス形式かどうかを判断するために、ときに最初のイベント・トリガ入力、タイマーを設定します。唯一の100msの後、タイミングが最後に実行されていない場合、この時間は800msをリタイミング、タイミングをクリアします。最後の入力までは、入力がすぐに従わない、最近の入力タイミングのこの時期は完了し、最終的に確認コードを実行します。

const filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;  
$("#email").on("keyup",checkEmail());  
function checkEmail(){  
    let timer=null;  
    return function (){  
        clearTimeout(timer);  
        timer=setTimeout(function(){  
            console.log('执行检查');  
        },800);  
    }  
}  

それは一度だけ実行するように、時間の関数展開法JS一定の期間を指します。すなわち、第2の10倍を実行するために1秒となる一方に100回実行されなければなりません。
シーン：ページ要素のイベントをスクロールしたとき、実際のシーンスロットリング機能は、ほとんどのリスナーが使用されます。

var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

• ドム操作

ドゥフロントエンド開発者が操作を認識している非常に時間がかかる（30 * 30の上に測定が開いているテーブルトラバース追加スタイルを送っ）されます。だから、DOM操作の最適化を行うために、可能な限りそれを避けられない場合は、頻繁にDOM操作を避けるようにしてください。

1.：缓存Dom查询，比如通过getElementByTagName('div')获取Dom集，而不是逐个获取。

2： 合并Dom操作，使用createDocumentFragment()

    var frag = document.createDocumentFragment()
    for (i<10) {
        var li = document.createElement('li')
        frag.appendChild(li)
    }
    document.body.appendChild(frag)

 3： 使用React、Vue等框架的虚拟dom（原理目前还不明白），可以更快的实现dom操作。

• （再描画）再描画しないようにしてくださいとリターン（リフロー）

あなたは、JSは、色や要素の背景色が再描画をトリガする変更を使用している場合は、DOM要素をチェック内のすべてのノードにブラウザが特定のDOM要素で視覚効果を変更することがあるため、コストは、非常に高価である再描画します。

あなたのサイズや逆流が発生した要素の位置、大きなオーバーヘッド還流を変更する場合は、DOM要素内の特定の位置が変更されたトリガ、それはすべての要素の位置を再計算し、面積はそう、ページ上に占めますそれは再レンダリングページ全体または偶数ページの特定の部分の原因となります。

• CSS3のハードウェアアクセラレーション

通常の層と複合層：ブラウザがレンダリングするとき、2つの層に分割されます。

文書の一般的な流れは、複合層として理解することができる範囲内で、絶対的な、固定レイアウト一般文書の流出が、それはまだ正常層であることができるが、ハードウェアアクセラレーションが開始されません。再描画（再描画）とリターン（リフロー）たとえば上記の共通層の再描画とリターンです。

複合層は、ハードウェアアクセラレーションを開始します。要素が複合層に上昇させる場合、同じ層に共通層とではないが、複合層は、要素は、共通層と再描画逆流を起こさないであろうことを、その後、一般的な層には影響を与えません。これにより、レンダリング性能を改善します。

ハードウェアアクセラレーションを開始する方法：

1. translate3dとtranslateZ

webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);

2.不透明
開始または終了要素の後にアニメーションが返す前に、アニメーション処理を実行するために必要な合成層、ない状態を作成します。

3.使用するチャンプロパティは、
このプロパティは、一般的にあまり一般的で不透明度を使用して変換されます

WebKitのブラウザのために、いくつかのケースでは、ハードウェアアクセラレーションを有効に頻繁にフラッシュする、ちらつくにブラウザを引き起こす可能性があり、あなたは排除するために、次の方法を使用することができます。

-webkit-backface-visibility:hidden;
-webkit-perspective:1000;

ハードウェアアクセラレーションは、この要素は、ハードウェアアクセラレーションを追加した場合ので、使用にZインデックスを使用し、インデックス・レベルが比較的低い場合、後者の他の要素（エレメントよりも高いレベル、または同一の要素、及びreleative場合絶対プロパティまたは同じ）、デフォルトのレンダリング複合層を変更し、適切に処理されない場合は大幅にパフォーマンスに影響します

• 強制同期ジッタレイアウトとレイアウトを避けます

ブラウザのレンダリングプロセスは次のとおりです。JS / CSS（ジャバスクリプト）>コンピューティングスタイル（様式）>レイアウト（レイアウト）>ドロー（塗料）>マージレイヤーがレンダリング（コンポジット）

JavaScriptを：アニメーション用のJavaScript、DOM要素の操作。
スタイル（計算式）：各DOM要素のCSSルールが適用されるべきかを決定。
レイアウト（レイアウト）：各DOMエレメントのサイズと位置が最終画面上に表示さを算出します。
ペイント（描画）は：DOM要素は、テキスト、色、画像、罫線、シェーディングなどの複数の層に描かれています。
複合（レンダリング層を合わせ）：レイヤーは、適切な順序で結合し、画面上に表示しました。

あなたはJS style属性を読み込む場合は、いくつかの値は、レイアウトが計算された後、ブラウザを聞かせすることを余儀なくされ、戻り値、などされます。

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

请求了getComputedStyle(), 或者 IE的 currentStyle

だから、あなたはゲンロックレイアウトと呼ばれているJavaScriptのスクリプトを実行する前にレイアウト処理を実行するためにブラウザを強制している場合。
例えば、以下のコード：

requestAnimationFrame(logBoxHeight);

// 先写后读，触发强制布局
function logBoxHeight() {
    // 更新box样式
    box.classList.add('super-big');

    // 为了返回box的offersetHeight值
    // 浏览器必须先应用属性修改，接着执行布局过程
    console.log(box.offsetHeight);
}

// 先读后写，避免强制布局
function logBoxHeight() {
    // 获取box.offsetHeight
    console.log(box.offsetHeight);

    // 更新box样式
    box.classList.add('super-big');
}

JavaScriptのスクリプトを実行すると、その要素のスタイルプロパティ値を取得することができ、上の画像のすべての古い値です。あなたが不動産を取得するために、現在のフレームの前の要素ノードへの変更を持っているのであれば、それはブラウザがプロパティの変更、レイアウト処理の実装の結果を適用し、最終的には、JavaScriptのロジックを実行しなければならない原因になります。

レイアウトが繰り返し同期を強制した場合、ジッタレイアウトにつながる
、たとえば以下のコードを：

function resizeAllParagraphsToMatchBlockWidth() {
  for (var i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = box.offsetWidth + 'px';
  }
}

作者：SylvanasSun
链接：https://juejin.im/post/59da456951882525ed2b706d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

私たちは、ブラウザが知られているレイアウト情報のフレームごとに、フレーム内にページを更新することであることを知っています。
強制レイアウトは、JSは、以下のコードのように、先にレイアウトのブラウザを強制使用することです。

// bed  每次循环都要去获取left ，就会发生一次回流
function logBoxHeight() {
  box.style.left += 10
  console.log(box.style.left)
}

// goog 
var width = box.offsetWidth;

function resizeAllParagraphsToMatchBlockWidth() {
  for (var i = 0; i < paragraphs.length; i++) {
    // Now write.
    paragraphs[i].style.width = width + 'px';
  }
}

• DOMContentLoaded与ロード

DOMContentLoadedイベントが発生するとDOMがトリガーDOMContentLoadedロードされたときにのみ、この時間スタイルシート、画像、外部リソースの導入がロードされていません。負荷がロードされ、すべてのリソースがトリガされます。

1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。//DOMContentLoaded
5. 加载图片等外部文件。
页面加载完毕。//load

• ビジュアルの最適化

ある程度の待ち時間に、ユーザに落ち着きロードgifのアクションフィギュアの感覚をなくすことができ、ロード時間の使用の合理化を待ち

コードのパフォーマンス

コードのパフォーマンスへの影響は、パフォーマンスを向上させるために、だけでなく、自分のレベルを向上させるために微妙になり、非常に柔軟であることができますが、コードと高品質なコードを書くのは良い習慣を開発します。騒ぎ、（あまりにも多くの知識ポイントのこの部分の、私たちはタイムコードを書くの概要を多く必要とするので）私がまとめいくつかの重要なポイントで直接見て。

• グローバル検索を避けます

速いグローバル変数よりローカル変数、JSがローカルオフィスの役割を見つけるために、今、時間を見つけ変数は、ルックアップするステップバイステップを見つけることができませんので。

// bad
function f () {
    for (...){
        console.log(window.location.href)
    }
}

//good
function f () {
    var href = window.location.href
    for (...){
        console.log(href)
    }
}

• ループテクニック

// bed 
for(var i = 0; i < array.length; i++){
    ....
}
// good
for(var i = 0, len = array.length; i < len; i++){
    ....
}
// 不用每次查询长度

• 配列を横断中に使用しないでください

最も遅いために、他のものは、最速のサイクルのために直接使用され、類似しています。ただでオブジェクトをトラバースするのに適してのために。

• 文字列変数に使用+「」の代わりに文字列（）には、

var a = 12
//bad
a = String(a)

// good
var a = 12
a = a + ''

そのような代わりのparseIntの* 1を使用するなど、このような多くは、すべてゼロだけ速く、数十万回変数変換を行って、インターネットがテストされた、これはパフォーマンスのために素晴らしいではない、実際には、弱いタイプのJSを使用している）（あり数秒。

• 削除DOM

削除DOM要素は、それらの間で選択するために「」=のremoveChildとのinnerHTMLを選択し、後者の試みをそうでなければ、回復できませんメモリをノードに登録されたイベントを削除するには、それが（特定のremoveChildの時々効果的にノードを解放することができないと言われています未知の理由のために）

• イベントを使用してハンドルのイベントを代行

任意のイベント缶バブルは、子ノードが同じイベントをバインドする必要があるため状況は、各サブノード追加のイベントリスナーに個別に持っていないだろうが、祖先ノードの処理に上昇しているように、祖先ノード上で処理することができます。

• オブジェクトによって生成されたDOM jsがページに追加する必要があります

IE、ページに追加されていない場合は、DOMのJSが作成した量では、このメモリは回復されません。

• ヌルを比較しないでください

以下の方法ヌルコンパレータ用いて置換することができる
値が基準型である場合は1を、その後のinstanceofコンストラクタを使用して確認し
、これが基本型、typeof演算の型チェックであれば2

• 代わりに、それ以外の場合は三項演算子を使用しての可能性

if(a>b){num = a}
else{num = b}

// 可以替换为
num = a > b ? a : b

• スイッチを使用して代わりの場合は判定条件は、ケース3よりも大きい場合

速度が約2倍であれば、実行速度スイッチ速い場合よりますので、IEの下にありません

まず集計そんなに、実際には、そのようなプリロードされ、サーバーのレンダリング、CSSセレクタの最適化などなど、多くのパフォーマンスの最適化は、あります。だから要約する機会を持っています