javascript - コンテンツを条件付きで読み込むための手法はどれですか?

Question

私はモバイル ファーストのアプローチの Web サイトを構築しており、コンテンツを条件付きで読み込むための最適な手法を決定しています。

テクニック 1

この手法ではenquire.jsを使用します

次のコードと一緒に...

enquire
  .register("(min-width: 500px)", {
     match: function() {
        $("#page").load("content.html");
     }
  })
  .listen();

このソリューションは、jQuery と Enquire.js に依存しています。ページが上向きにサイズ変更されると、新しいコンテンツが自動的にダウンロードされます。下向きにサイズ変更されると、ロードされたコンテンツが残り、display:none を介して削除できます。ただし、ロードされたコードは DOM に残ります。

テクニック 2

2つ目のテクニックです

ここでは、実際のコンテンツの代わりにアラートを使用して、2 番目の手法の codepen を実行しました。

これは CSS メディア クエリに基づいており、最初の手法よりもはるかに高速で、ブレークポイントでコンテンツを交換します。サイズが変更されると、DOM にコードは残らず、そのビューポートのコードのみが残ります。

テクニック 2 を使用する傾向がありますが、これが最適なテクニックかどうかはわかりません。あなたはどちらを選びますか、そしてその理由は何ですか?