ウェブサイトのパフォーマンスの詳細な調査_html/css_WEB-ITnose

1、基本的なネットワーク最適化

CSS および JS シリーズと圧縮:

ファイル シリーズ: Grunt-Contrib-CONCAT または Gulp-Concat

JavaScript 圧縮圧縮/縮小: grunt-contrib-uglify または gulp-uglify

CSS 圧縮: grunt-contrib-cssmin または gulp-cssmin

画像可逆圧縮:

• ワークフロープラグイン: grunt-contrib-imagemin または gulp-imagemin
• Mac デスクトップ アプリケーション: ImageOptim
• Web アプリケーション: TinyPNG

ブラウザ キャッシュの利用: 静的アセットに適切なキャッシュ時間を設定して、ページの読み込み速度を大幅に向上させます。

gzip 圧縮設定を有効にする: サーバーとクライアントが gzip 圧縮をサポートしている場合、応答時間を 90% 節約できます。
2. ブラウザの互換性に関するクイックフィックス
古いバージョンのブラウザを適切にサポートするにはどうすればよいですか?ここでは、古いブラウザに関する一般的な問題に対するオープンソースの解決策をいくつか紹介します。

Selectivizr

: IE9 より前のバージョンでは CSS3 のサポートが制限されているため、ほとんどの新しいバージョンの CSS セレクターはポリフィルなしでは使用できません。

Respond.js

: IE8 より前のバージョンは CSS メディア クエリをサポートしていません。スタイルシートがロードされた後にこれをロードしてください。IE のこの欠点に長い間耐えてきたユーザーは感謝するでしょう。

Webshim :
• 従来のブラウザのポリフィル ライブラリを使用すると、開発者はフォーム、位置情報、キャンバスなどの一般的な HTML5 機能のポリフィルを動的に読み込むことができます。
3. クイック フィックス コレクションとタブレット
• ここでは、モバイル アプリのパフォーマンス向上に役立つ優れたオープンソース JS プロジェクトをいくつか紹介します。
• FastClick : ユーザーが画面をクリックした後のイベントトリガーの時間遅延を排除します。特に iOS に適しており、Android バージョンの Chrome は user-scalable=no を使用して削除できます。IE11 以降では touch-action: 操作を使用できます。モバイル Safari ブラウザには現在そのような設定がありません。

オフライン

: ユーザーがオフラインのときに通知し、オンラインに戻ったときにユーザーの行動を保存します。

4. JavaScript のモジュール バンドルとパッケージ管理
• バンドラーを使用して、Webpack、Browserify、RequireJS、または System.js を使用した JSPM などのクライアント コードを整理します。特に多くのサードパーティに依存している場合は、バンドルされていないローカル開発モードと運用開発モードの両方で実行できます。
バンドラーは、JS リクエストのブロックを減らし、コードを圧縮し、現在ページで使用されているスクリプトのみを読み込むことができます。
• 5. usemin
Usemin は、参照テンプレートで最適化されていない設定を自動的に置き換えるためのワークフローの一部として導入されています。 usemin は、連結、圧縮、ファイルの高速化を簡単に統合できます。

元の翻訳元: dzone

転載する際は明記してください: evget

Huidu Technology は 13 年の業界経験を持ち、総合的なソフトウェア テクノロジー ソリューションの提供に重点を置き、世界最大のソフトウェア向けワンストップ サービス プラットフォームの構築に取り組んでいます。テクノロジー。

Huidu Controls｜企業が成功するソフトウェアを作成するのを支援します

Huidu は、グローバルな高品質の制御製品/制御トレーニング/プロジェクトカスタマイズ開発/プログラムコンサルティング/オンサイト実装/プロジェクトアウトソーシング/専門テストを提供します

WeChat ID: EVGET_Huidu

企業 QQ: 800018081｜電話: 023-66090381

QR コードをスキャンして WeChat をフォローしてください