一般的なフロントエンドのパフォーマンスの最適化とブラウザの互換性の問題

一般的なフロントエンドのパフォーマンスの最適化は何？

• 最小限にする01. HTTPリクエスト
• 02.使用CDN（コンテンツデリバリーネットワーク）
• 03.追加Expiremヘッド
• 04.圧縮アセンブリ（gzipは）
• 05.上部のCSSスタイルシート（ヘッド）
• 一番下に06.ザ・jsのスクリプト
• CSSの表現を使用して07.避けてください
• 08.は、DNSクエリを削減します
• 09.合理JS（圧縮/混乱）
• 10.避けリダイレクション（負けません「/」）
• 11. Ajaxのキャッシュ可能
• 12.削除複製スクリプト（コードモジュラー）

フロントエンドの共通のブラウザの互換性の問題

• 1.別のブラウザタブデフォルトの外側と内側のパッチパッチ

  ソリューション：CSSは、ワイルドカードで増加しています

* {
    margin: 0 ;
    padding: 0 ;
}

• 二国間の問題から2.IE6：IE6でfloatを設定するだけでなく、マージンを設定し、マージンが問題になります

  解決策：設定 display:inline;

• 10pxの下のラベルの高さを設定する場合3、IE6では、IE7は自分を超えて配置された位置に表示されます

  解決策：ラベルの高さ位置を越えてoverflow:hidden、または行の高さの設定値、設定の高さよりも小さく、

• 4.ピクチャーギャップデフォルト

  解決策：レイアウトIMGのための使用フロート

• 5.IE9次のブラウザは、不透明度を使用することはできません

  ソリューション：

  opacity:0.5;
  filter:alpha(opacity = 50);
  filter:progid:DXImageTranform.Microsoft.Alpha(style = 0,opacity = 50);

• 6.マージンが重なる2つの隣接する要素は余裕代が設けられている場合、マージンが最小捨て、最大値を取ります。

  溶液：オーバーラップマージンを防止するために、親要素がオーバーフローの親要素とサブ要素に添加することができる：隠されました。

• 7. cursor:hand手のディスプレイ、サファリではサポートされていません

  ソリューション：統一された使用カーソル：ポインタ;

• 8. 2つのブロック要素、親要素に配置されたoverflow:auto;サブ要素の設定位置：相対;および親要素よりも高さも大きくはなく、オーバーフローIE6、IE7に隠されます。

  溶液：親要素が集合 `位置である相対。