次の側面に分けフロントエンドのパフォーマンスの最適化：
まず、コードの展開：
図1に示すように、圧縮及び符号マージ
ベルト伝送リソースが不必要にクッキー情報でない場合にように、図2に示すように、画像、JS、CSSと他の静的記憶リソースと親局とは異なるドメイン名アドレス。
図3に示すように、コンテンツ配信ネットワークCDN使用して
4を、ファイルに設定され、最後の修飾満了したEtag
GZIP圧縮伝送用いて、5
（DNSルックアップを増加する別のドメイン名を使用して）DNSルックアップを秤量し、6
（不要リダイレクションを回避するために、7プラス"/"）
第二に、コーディング
HTML：
1は、構造明確な、シンプルな、意味ラベル使用して
空のsrcとHREF回避するために2、
3、HTMLで画像を拡大縮小していません
CSS：
1、CSSの上に置かれたCSSセレクタ2、合理化
、3スタイル@importの方法の導入を回避
：4は、CSSのbase64で画像データは、要求の数、オンライン転送base64でウェブサイト減らし、画像ファイルを置き換えるために使用されるHTTP：//tool.css-をjs.com/base64.html
代わりにCSSを使用しての5、アニメーションのJavaScriptアニメーション
、フォントのアイコンを使用して6、アイコン図書館のウェブサイト：http://fontawesome.io/icons/、オンライン本番サイト：www.iconfont.cn
7、CSSを使用してスプライトがドロップされた
グラフィックスSVGの使用、8
9、CSSの表現を使用しないよう
a {star : expression(onfocus=this.blur)} フィルタの使用を避けるために10、
ジャバスクリプト：
1、数削減の参照ライブラリ
2、または使用requirejs seajs非同期ロードのJSを
。3、JSは、ページの下部に導入された
グローバル検索を避けるために、4
属性の検索減らすために、5を
ネイティブメソッド使用して、6を
他の場合は、switch文に代わり複雑で、7声明
文の数を減らす8は、例えば、変数宣言の複数に書き込むことができる
9、配列またはオブジェクトを初期化するために使用されるリテラル式
10を、または使用DocumentFragmentsは複雑にinnerHTMLの要素を置換
プロキシイベント（イベントデリゲート）を用い、11
、12 DOMマルチプルアクセス選択が設定避ける
ONMOUSEMOVE、のonmouseover：13、高周波トリガイベントは、次のような、スロットル機能の使用が提供される
ウェブストレージデータキャッシュ使用、14
15、アレイ法ではなく最初に（に接続されている文字列「+」に参加します配列に連結された文字列）