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

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

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

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

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

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

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

だけではありません

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

ニーズを明確にします

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を使用してロードする必要はありません。

いくつかの関數(shù)は、

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

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

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

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

Modernizrを

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

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

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

概要

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

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