【フロントエンド最適化】フロントエンドの一般的なパフォーマンス最適化

6699 ワード
フロントエンド最適化
前言:
Webフロントエンドは本質的にGUIソフトウェア(グラフィックユーザインタフェース-グラフィック方式で表示されるコンピュータ操作ユーザインタフェース)である.
  time=    time+    time（api+     time
           50%    - http               
        ：    -         1s

最適化ポイント1:リソースリクエスト
ブラウザのリクエストの送信から返信まで何を経験しましたか?
http://www.zyy1217.com/2017/0...
簡単な説明:
        URL  DNS    ，    IP，        ；
                ，       （HTML、JS、CSS、   ）
          （HTML、JS、CSS ）      ，           （ HTML DOM）          ，    ，

要求図
dnsキャッシュ
Dnsとは
            IP

キャッシュによりdnsクエリー時間を短縮できますか?
dns  /       /  host  /     
DNS    ------20ms
    ，

cdnサービス(コンテンツ配信ネットワーク)
               
      ---       -- money

同じ静的リソースキャッシュ
フロントエンド:ローカル-Expire/Cache-Controlヘッダの追加
≪バックエンド｜Background｜oem_src≫:特定の文字列---を使用して、要求リソースのバージョンを識別します.
要求リソース---ブラウザtagはサーバtagと同じ---304-を返す--情報は変更されていません--ローカルキャッシュを直接使用してetagを構成することで、サーバの圧力を軽減できます.
最適化ポイント2:httpリクエストサイズを減らす(圧縮/マージ)
サービス側:Gzip圧縮
Gzip-思想:まずファイルをサーバーに置いて圧縮し、ブラウザは自動的にこれらのテキストファイルを圧縮しなければならない.
サービス側レンダリングSSR
フロントエンド:一般html/css/js/ピクチャのマージ圧縮
html圧縮
1.例:
goole         ，        HTML

2.ルール
 HTML       ，    ，   ，    ，           ， HTML

3.意味
     :google   ，        40%
  2016           1.3ZB(1ZB = 10^9TB)
  google 2016      1.3ZB * 40%
  google 1MB        
         500TB

4.実現
Webapack — html-webpack-plugin   HTML

css圧縮
1.ルール:
      +css    (      )

2.実現:
Webpack css-loader

JS圧縮
1.ルール
       
    
           var a = 1, var a=2, var a=3

2.意味

3.使用
Webpack — UglifyJSPlugin

画像圧縮
実装:
        +

一般的な画像フォーマットとシーンの使用
Png8/png24/png32
png8 —— 256  +     
png24 —— 2^24  +      
png32 —— 2^24  +     
              —   
jpg    ，    ，                    
Png    ，      ，               
webp      ， ios webview      ，    /safari no/           
svg           ，          ，

ピクチャ最適化スキーム
1.Css   — backgroudPosition/          fb/    
2.Image inline base64 webpack

    module: {
    　　loaders: [
    　　　　{
    　　　　　　test: /\.(png|jpg)$/,
    　　　　　　loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
    　　　　}
    　　]
    }

3.    svg    (dom  ，   )/iconfont(svg/png)
    svg                 ，     
    https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Basic_Shapes
4.tinypng.com

ファイルの結合
意味:
               ，   N-1

ファイルマージの弊害:
             ，   
          md5              a,b,c  js

連結ルール:
                   
                ，        ，      ，

インプリメンテーション
Webpack — require.ensure([], callback)
http://www.cnblogs.com/rubylouvre/p/4981929.html
Webpack —   entry         
entry:{
  index:["./src/index.js","./src/main.js"]
}

最適化ポイント3:ブラウザレンダリング
ブラウザはリソースを手に入れた後、どのように仕事をしますか?http://taligarsiel.com/Projec... how bowser work
概要:
     html  —        css.js.      
Html    ：    、    （        ）
    ： result: 10 in IE 8, 6 in Firefox 3+ and Chrome 5+

ブラウザは3つのものを解析します:(1)HTML/SVG/XHTML、この3つのファイルを解析するとDOM Treeが生成されます.(2)CSS,解析CSSはCSSルールツリーを生成する.(3)Javascriptスクリプト、v 8エンジン、主にDOM APIとCSSOM APIによってDOM TreeとCSS Rule Treeを操作する.
       ，             （       、        —         ）

Dom解析:
                dom 
                  
DOM                ：                                
                ，  、  、http

css解析
#nav li      li，              #nav

レンダーパス(Render Passes)
Render tree構造はdomツリーのWebページにどのノードがあるか、各ノードのCSS定義、およびそれらの依存関係Layoutと等しくありません.各ノードのスクリーン内の位置を計算し、UIバックエンドレイヤを使用して各ノードを描画します.
Dom/Cssレンダー最適化ポイント
再描画/リフロー
名詞の解釈:
両者の関係

最適化:reflow/repaintの削減
Css/jsの位置はなぜこんなに重要なのか、リンクはそこに置いても構わないのでしょうか.
cssブロック
Css — head —       （  ）—   ，  
Css —   js  /   js   -

理由:
      — GUI     javascript        
javascript    dom css

結論:
css

Jsブロック
    js       script 
js       , —          js

Webkit Html-preload-scannerプリロード
    ，     ，js   ，         ，                 。          "src" , "link"   ，         ，  CachedResourceLoader

解決策
 defer — IE  
 IE    js  、  DOM      、  defer               
</code></pre> 
 <p><span class="img-wrap"></span></p> 
 <p>js         </p> 
 <h4>  ：         </h4> 
 <p><span class="img-wrap"></span></p> 
 <h2>Q：</h2> 
 <h4>1.  js     </h4> 
 <p>    </p> 
 <p>            </p> 
 <h4>2.cache-control   </h4> 
 <p>      ：</p> 
 <pre><code>Cache-Control: max-age=<seconds>
 
Cache-Control: max-stale[=<seconds>]
 
Cache-Control: min-fresh=<seconds>
 
Cache-control: no-cache
 
Cache-control: no-store
 
Cache-control: no-transform
 
Cache-control: only-if-cached
</code></pre> 
 <p>      </p> 
 <pre><code>Cache-control: must-revalidate
 
Cache-control: no-cache
 
Cache-control: no-store
 
Cache-control: no-transform
 
Cache-control: public
 
Cache-control: private
 
Cache-control: proxy-revalidate
 
Cache-Control: max-age=<seconds>
 
Cache-control: s-maxage=<seconds>

</code></pre> 
 <h4>3.chrome   Html-preload-scanner    </h4> 
 <p> WebKit ,               , HTML          script     ,          .  ,                  (     ,  ,     ) URL,             ,             ,            </p> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1177300227372150784"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
hibernateはなぜ方言があるのか
freeMarkerにおけるマクロ解析