責任を持ってModernizrを使用する方法

責任を持ってModernizrを使用する：Webサイトのパフォーマンスを改善するための戦略

Modernizr、ブラウザが特定の機能をサポートするかどうかを検出できるJavaScriptライブラリ。ただし、ウェブサイトの遅くなることを避けるために、必ず注意して使用してください。この記事では、Modernizrを責任を持って使用する方法や、JQueryなどの他の同様のライブラリについて説明します。

なぜModernizrがどのようにロードされるかに注意を払うのはなぜですか？

重要な質問：Webページにアクセスするために数秒待っても構わないと思いますか？答えがノーの場合、訪問者もそうです。長い積み込み時間は、ユーザーエクスペリエンスに直接影響し、訪問者の喪失につながります。したがって、クールな機能を追求したとしても、Webサイトのパフォーマンスを考慮する必要があります。

キーはロード方法です。多くのJavaScriptファイルは、ページがロードされた後に実行され、それらをに入れることは意味がなく、ページレンダリングをブロックします。大きなスクリプトはに配置されており、訪問者はページのコンテンツを見る前にスクリプトがロードされるのを待つ必要があります。

Modernizrは、CSS遷移や変換などの最新の機能を検出するために使用されます。特別な状況を除いて、これらの特性はページコンテンツを表示するために必要ではありません。ほとんどの場合、Modernizrはの代わりにの最後にロードできます。

最適化は、単一のリソース

だけではありません

Modernizrを使用したWebページがゆっくりとロードされている場合、ライブラリを責任を持ってロードするだけではパフォーマンスの問題を解決するのに十分ではないかもしれません。責任あるアプローチとは、JavaScriptファイルまたは他の大規模なリソースを含めるたびに慎重に検討することを意味します。単一のリソースを最適化することは明らかではないかもしれませんが、すべてのリソースを最適化するとパフォーマンスが大幅に向上する可能性があります。

ニーズを明確にします

Modernizrを使用する前に、必ず要件を明確にしてください。 Modernizrは多くのテストを提供しますが、すべてのテストがプロジェクトに役立つわけではありません。 Modernizrの公式Webサイトはカスタムビルドツールを提供します。必要なテストのみを選択して、小さなカスタムバージョンを生成してダウンロード時間を短縮できます。

プロジェクト開発段階でModernizrのフルバージョンを使用し、リリース時にカスタムバージョンを再生することをお勧めします。より良いアプローチは、CSSやJavaScriptファイルをスキャンするGrunt-Modernizrなどの自動化ツールを使用し、使用されるすべての機能を見つけ、対応するカスタムModernizrビルドを生成することです。

すべてのテストが必要ではない

たとえば、

Modernizrは、ブラウザがtext-shadow CSS属性をサポートするかどうかをテストできます。サポートされていない場合、このプロパティは無視され、Webサイトがクラッシュすることはありません。したがって、text-shadowがあなたのウェブサイトにとって重要でない限り（たとえば、テキストの読みやすさを改善するため）、テストは必要ないかもしれません。

フォールバックスキームが必要な状況では、それでもテストする必要がありますが、すべてのフォールバックスキームがModernizrを必要とするわけではありません。一部のCSSフォールバックスキームでは、自分でテストする必要はありません。

html5shivインターネットエクスプローラーの古いバージョンでHTML5要素をサポートするために使用されます。 Modernizrはそれを含めることができますが、古いIEと互換性がない場合は必要ありません。 html5shivを使用することをお勧めしますが、Modernizrを使用してロードする必要はありません。

いくつかの関数は、

の読み込みを遅らせる可能性があります

ほとんどのModernizr機能は、ページの下部への読み込みを遅らせることができます。これにより、ユーザーがページのコンテンツを表示することを妨げるのではなく、最初に基本的なコンテンツを表示してから、拡張エクスペリエンスをロードします。

ただし、HTML5要素をレンダリングする前に

などの特定の機能をhtml5shivに配置する必要があります。ただし、条件付きコメントまたはインラインスクリプトを介してロードする方法を最適化して、HTTPリクエストを削減できます。

Modernizrを

に配置するかどうかを決定することは、ページの構造と機能に依存します。テスト結果がページレイアウトに影響しない場合、読み込みを遅らせることができます。

効率の考慮ページの下部にModernizrを置くことで読み込み時間を改善できますが、Paul Irishは、多くのModernizrテスト（特にCSSテスト）が反射を引き起こし、ブラウザがスタイルを再計算する可能性があると指摘します。 。

それはあなたのDOMツリーの複雑さに依存します。より単純なDOMツリーの場合、テストの実行はより速いです。さまざまなブラウザとバージョンの下で実行時間を評価するためにテストを実施することをお勧めします。カスタムビルドは、不必要なテストを削減し、効率をさらに向上させることができます。

概要

この記事では、Modernizrを責任を持って使用する方法と、さまざまな状況で適切なロード場所を選択する方法について説明します。どの方法を選択しても、特にネットワーク接続が遅い場合は、ユーザーに良いエクスペリエンスを提供するために、不必要なリソースのダウンロードを最小限に抑える必要があります。 この責任ある開発アプローチは、Modernizrだけでなく、JQueryなどの他の図書館にとってもあります。 役に立たないデータのダウンロードを避けることは、すべての開発者が従うべき原則です。

以上が責任を持ってModernizrを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。