CSS 減量ツール – Firefox プラグイン CSSUsage_html/css_WEB-ITnose

まず、Firefox をインストールする必要があります (ダウンロードするにはここをクリック) か、インストールされているバージョンが 3.1 以降であることを確認してください
2 番目のステップは、フロントエンド開発者にとって最も人気のある開発ツールである Firebug をインストールすることです。 ;
3 番目のステップでは、CSS 使用法 0.3.4.1 をインストールします。
4 番目のステップは、ブラウザで最適化するページを開き (ローカル ページも可)、右下隅にある小さな Firebug アイコンをクリックして、 firebug ツール ウィンドウで、ツールのオプションの中に CSS 使用ツールのボタンがあることがわかります。

まず、上位 3 つの機能ボタンの使用を分析しましょう

スキャン: 文字通りの意味から、これがサイトに 1 つまたは複数のページしかない場合にそれをスキャンするためのツールであることがわかります。ページでは、この機能ボタンを使用してページの CSS ユーティリティを表示できます

クリア: スキャン結果をクリアしますが、Web ページを表示して CSS を変更した後は、以前のスキャン結果は必要ありません。 [クリア] ファンクション キーを使用して、以前のスキャン結果のキャッシュをクリアし、スキャンを再開できます。

AutoScan: Web サイトには多くのページがあり、[スキャン] をクリックすると、多くのポップアップ レイヤーが表示される可能性が高くなります。毎回、多くの時間がかかります。AutoScan ファンクション キーを使用すると、スキャン作業がより自動化され、作業効率が向上します。例としてブログ http://blog.sina.com.cn/laosong11

「スキャン」をクリックすると、以下に示すように、CSS 使用法によって現在のページの HTML とスタイルがスキャンされます

上の写真はスキャン結果を折りたたんだ後の私です, CSS の使用法がページの CSS スタイル シートのインライン スタイルと外部リンク スタイルをスキャンし、HTML もスキャンされて読み込み時間が表示されたことがわかります

以下のインライン スタイルを展開してみましょう

この文が表示されます。行 CSS セレクター 表示されている、前に表示されている、未表示、:hover、教えてください」 CSS セレクターのステータスをリストします:

緑 – 現在のスキャン中に表示されたものを示します、

濃い緑 – 以前のスキャンで表示されたもの、
赤 –は、現在および以前のスキャンで見つからなかったものを表します。
灰色 – は、疑似クラス セレクター CSS を表します。この部分は無視されます。
このリストの下部には、その数を示す統計も表示されます。発見された数、発見されなかった数、無視された数、CSS の実際のカバー率はどれくらいか

同時に、CSS 使用状況では、特定の CSS セレクターが使用された回数に関する統計情報も提供されます。

オートスキャン機能を使用し続けると、ページがジャンプするたびに、ホームページからブログ投稿ディレクトリに移動し、次に写真に移動し、最後に私についてに移動する回数も増えていきます。以下に示すように、CSS の使用量によりページ スキャンの数が自動的に増加します。

どのページがスキャンされたか、すべてのページがカバーされているかどうかを知りたい場合は、ページのスキャンを確認できます。 CSS の重みを設定したら、赤いセレクターで作業を開始できます。CSS の使用法では、クリーンな CSS をエクスポートする (Export Cleaned CSS) というより賢いツールが提供されます。ただし、多くの大規模な Web サイトでは、このツールを直接使用する方が安全です。セレクターの名前を選択し、フォルダーの検索機能を使用して、この CSS セレクターのスタイルがダウンロードとしてダウンロードされているかどうかを確認できます。タイミングが悪かったので、その時点で変更されたファイルがオンラインになるのを待つ代わりに、冷や汗をかきました

このツールの欠点についても触れておきたいと思います:

Web サイトで Ajax が大量に使用されている場合。 dhtml では、Css 使用法ができるだけ多くのコンテンツをクロールできるように、できるだけ多くの非表示の div/ウィンドウとタブを開く必要があります。

Web サイトのページ数が多い場合、CPU とメモリを大量に消費するため、十分な忍耐が必要になります。

私たちの記事では、無効な CSS セレクターを削除する方法のみを紹介しています。Web サイトの速度をより包括的に向上させたい場合は、Firebug Yslow Page Speed 組み合わせアプリケーションを組み合わせて、より良い解決策を見つける必要があるかもしれません。