jQuery for mobile、賛否両論

これはインターネット上で私に出くわした記事のかなり無料の翻訳です。 著者はTJ VanTollです。 彼は長年にわたってWeb開発に携わり、特に携帯電話のパフォーマンス向上のためにサイトを最適化しています。 カットの下では、いくつかの最適化方法と、さまざまなデバイスでのテスト結果が考慮されます。

jQuery for mobileを使用する必要がありますか？

私はよくこの質問をされますが、この間ずっとこれを説明できる研究は行われていません。 jQueryライブラリーは「大規模」で「肥大化」しているとよく言われますが、これらの概念は相対的であり、実験的な確認なしでは何も証明しません。 次のようにこの質問をするのは正しいでしょう。「jQueryのサイズは、このライブラリを使用して機能を損なうことを拒否できるほど強力ですか？」 この質問に答えるには、モバイルデバイスにライブラリをロードする速度を決定する必要があります。 この記事はこの問題に特化していますが、最初から<script>タグ内で何が起こっているのかを理解する必要があります。

<script>タグ

<script src="jQuery.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちは皆、このコードを何度も見ましたが、ブラウザーがこの行を見るとどうなりますか？ 実際、多くのイベントが発生していますが、最も重要な2つのプロセスのみに関心があります。

• ファイルの受信（ここには、キャッシュまたはネットワークからの2つのオプションがあります）;
• 解析とスクリプト実行。

これらの各アイテムを個別に見てみましょう。

jQueryをダウンロードする

最良の結果を得るために、ユーザーが初めてサイトにアクセスし、それに応じてキャッシュにデータがないと想定しています。 ブラウザのキャッシュにデータがない場合、サーバーからすべてのファイルをダウンロードする必要があります。 そのような負荷の時間を測定してみましょう。それは、帯域幅と遅延の2つの要因の影響を受けます。

スループット。

帯域幅は、ブラウザがサーバーからファイルをダウンロードできる速度であり、ほとんどの場合、Mbpsで測定されます。

2012年、世界中のモバイルネットワークの平均速度は、一部のアジア諸国の〜2 Mbitからロシアとインドの〜1 Mbitの範囲でした。 もちろん、このデータは少し時代遅れであり、新しいネットワークは次のような大きな速度を約束します。

• Virgin Mobileは、4Gネットワ​​ークのダウンロード速度は3〜6 Mbpsであると主張しています。
• Verizon Wirelessは、4Gネットワ​​ークのダウンロード速度は5〜12 Mbpsであると主張しています。
• LTEネットワークは、米国で最大6.5 Mbps、オーストラリアで最大24.5 Mbpsの速度を提供します。

この記事はjQueryに関するものなので、これらの数値を使用してjQueryがロードされている時間を判断しましょう。 私たちは、28.65 KBの2.1.0ライブラリの圧縮バージョンに基づいています。



ダウンロード速度が1 Mbpsのネットワークでは、毎秒125 KBをダウンロードできます。つまり、1秒でjQuery 4.36回ダウンロードできます。 または、より具体的な言語で：

• 最悪の速度（1 Mbps）でダウンロードするには229ms。
• 中速（5 Mbps）でダウンロードするには46ms
• 高速（12 Mbps）でダウンロードするには19ms。

後でこれらの計算に戻りますが、これは多かれ少なかれ特定の情報ですか？ しかし、実際には、ネットワーク帯域幅はモバイルWebの生産性に関する最大の問題ではありません。 たとえば、Ilya Grigorik（Google）は、5 Mbitの速度のネットワークから10 Mbitの速度のネットワークに切り替えると、ダウンロード時間は5％しか短縮されないと指摘しました。



それで、ネットワーク帯域幅がボトルネックではないことがわかりましたが、その理由は何ですか？

遅延

Webアプリケーションのコンテキストでは、待ち時間はサーバーへの接続にかかる時間です。 遅延は通常、RTT（ラウンドトリップ時間）で測定されます。これは、信号がサーバーに到達してクライアントに戻る時間です。



歴史的に、RTTは約50ミリ秒と小さいため、パーソナルコンピューターの遅延時間についてはあまり心配していませんでした。 しかし、携帯電話では私たちはそれほど幸運ではありませんでした。 2012年、米国のモバイルネットワークの平均RTT時間は約344ミリ秒でした。 そして、これはHTTPリクエストの遅延時間であり、現在は93ミリ秒ですが、各DNSおよびTCPリクエストの遅延時間でもあります。



現在、平均RTTはわずかに改善されています。 Virgin Mobileは、平均4Gネットワ​​ークレイテンシが約150ミリ秒になったことを発表しました。 これまでのところ、平均遅延は改善されていますが、伝送速度の最終制限に問題があり、遅延を最小限に抑えることはできません。



しかし、これらすべてには明るい面があります。 jQueryを使用するときに大きな遅延を回避する簡単な方法があることを思い出してください。ライブラリを個別のファイルとしてロードする代わりに、コンテンツをスクリプトファイルに添付して一緒にロードします。 以下のように：

 <!-- Before --> <script src="jQuery.js"></script> <script src="app.js"></script> <!-- After --> <script src="app.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この簡単な変更により、jQueryをアプリケーションに個別にダウンロードするときに発生する遅延がなくなります。 外部CDNからライブラリをロードするときにも同じことができます。 CDNプロバイダーの断片化のため、CDNキャッシュを使用する可能性は低く、サーバーからのダウンロードにはいくつかの手順（DNSルックアップ、TCP接続、GET HTTP要求の送信）が必要になる場合があります。



前に、ネットワークからjQueryファイルをダウンロードするのに必要な時間を計算しました。 結合されたJavaScriptファイルをロードして遅延を回避する場合、中品質のネットワークを使用して50ミリ秒でファイルをダウンロードできることがわかります。 しかし、ファイルをダウンロードした後、ブラウザはそれを処理します。 この点をさらに詳しく見てみましょう。

解析とスクリプト実行

ブラウザはファイルをダウンロードした後、JavaScriptコードをバイトコードに変換して実行する必要があります。 このプロセスは非常に複雑であり、詳細に検討しようとすると、この記事の範囲をはるかに超えてしまいます。 他の何かに興味があります。



では、このプロセスにはどれくらい時間がかかりますか？



スクリプトの解析と実行にかかる時間を調べる簡単なテストを作成しました。

 <script>var start = new Date();</script> <script> /* jQuery's minified source code in its entirety */ </script> <script>alert( new Date() - start );</script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

console.time（）およびconsole.timeEnd（）を試しましたが、古いモバイルブラウザーではサポートされていないため使用しませんでした。 これらのメソッドをサポートするブラウザーでは、以前に提案したものとほぼ同じ結果が得られました。



解析時間と実行時間を割り当てるために、jQueryをインラインスクリプトとして作成しました（つまり、HTMLマークアップに直接挿入されたコード）。 さまざまなブラウザで実行した結果を以下に示します。

ブラウザ	OS	JQuery 2.1.0解析/実行時間（ミリ秒）
IE 11	Windows 8.1	18、21、14、16、15
クローム33	OS X 10.9.2	15、8、5、7、6
Safari 7	OS X 10.9.2	9、5、3、3、2
Firefox 27	OS X 10.9.2	12、12、11、12、12
サファリ	iOS 7	178、125、44、87、96
デフォルトのAndroid	Android 2.2	1184、268、299、216、422
デフォルトのAndroid	Android 4.0	603、465、106、145、243
クローム33	Android 4.4	219、86、38、86、123
Firefox 27	Android 4.4	269、367、400、381、264

デスクトップブラウザーテストはMacBook Proで実施され、私は即興のデバイスでモバイルブラウザーをテストしました。 ダウンロード間でブラウザのキャッシュをクリアしませんでした。更新ボタンを数回クリックしただけです。 これは興味深い結果につながりました.WebKit（Chrome、Safari）のブラウザーは最初の起動時にデータをキャッシュに保存し、その後のダウンロードの速度ははるかに速くなりますが、Trident（IE）およびGecko（FireFox）のブラウザーはそうではありません。 これらのエンジンの開発者がこの記事を読んだ場合、解析の詳細についてもっと知りたいと思います。 また、時間の計算方法に関する他の提案がある場合は、コメントで共有してください。



IE、Chrome、Safari、Firefoxのすべてのデスクトップブラウザーは、これを簡単に実行できます。 IEでさえ、平均で17ミリ秒というかなり良い結果を示しました。



しかし、モバイルブラウザはまったく異なる結果を示しました。 iOS7のMobile SafariとAndroidのChromeはうまく機能しましたが。 標準のAndroidブラウザーは非常に悪い結果を示しました。 Android 2.2でこのテストを初めて実行したのは1秒かかりました。 テストするデバイスの種類は多くありませんでしたが、他の多くのデバイスでは結果がさらに悪化すると思われます。



私の意見では、モバイルブラウザ、特に標準のAndroidブラウザでのこのような遅い解析とスクリプト実行は、jQueryの代わりに小さなJavaScriptライブラリを使用することを好む人にとって大きなプラスです。



ただし、テストにはいくつかの良い点があります。 ムーアの法則はここにあります。Android2.2とAndroid 4.0の違いは明らかに顕著であり、この傾向は今後も追跡される可能性が高いでしょう。



要約すると、jQueryのサイズは彼らが言うほどひどいものですか？



そこで、ダウンロード速度に影響を与える必要なすべての指標を調べました。この質問に答えるときです。 ソフトウェア開発に関する質問に対する答えと同様に、私たちの答えは特定の状況に依存します。 受信したすべてのデータを要約することから始めましょう。



28.56K jQuery 2.1.0のダウンロード時間は次のとおりです。

• 悪いネットワークで1Mbpsの速度でダウンロードすると229ms。
• 5Mbpsの速度で通常のネットワークにダウンロードする場合は46ms。
• 12Mbpsの速度で良好なネットワークにダウンロードする場合、19ms。

jQuery 2.1.0をロードするときの遅延時間は次のとおりです。

• スクリプトファイルにライブラリの内容を含めた場合は0ミリ秒。
• ライブラリを個別のファイルとしてダウンロードする場合は、150〜1000ミリ秒。

jQuery 2.1.0の解析/実行には以下が必要です。

• デスクトップブラウザの場合は15〜20ミリ秒。
• 調査対象のすべてのモバイルブラウザーでの平均読み込み時間は270ミリ秒です。

これらの数値は、Android 2.2の古いバージョンのブラウザーがダウンロードに余分な時間を追加する可能性があることを明らかにしています。 これは、ターゲットオーディエンスに依存して、開発時に考慮に入れる必要があります。 これはパフォーマンスに悪影響を与える可能性があります。



統計を調べて聴衆を知ることをお勧めします。 古いモバイルブラウザからの訪問の割合が高い場合は、jQueryの使用を停止することができます。 ただし、ポイントはライブラリ自体ではなく、JavaScriptコードの処理時間であることに注意してください。 それはすべて特定のアプリケーションに依存します。jQueryがあなたが書いたコードよりも速くロードされることがあり、このライブラリがあなたの時間を節約します。 最後に、jQueryのモットーは、書く回数を減らし、もっと書くことです。



しかし、数字に戻りましょう。 上記のデータから、ネットワークからjQueryをダウンロードするのに平均で約50ミリ秒、さらに解析時間に約250ミリ秒かかることがわかります。 時は金なりだと証明しましょう。 例としてAmazonを検討してください。 Amazon.comでのページの読み込みが100ミリ秒遅れるため、売り上げの1％を失うと主張しています。 接続されたjQueryライブラリは売上の3％のコストがかかることを計算するのは簡単です。 ひどいように聞こえますが、jQueryを使用するとサイトのパフォーマンスと機能が向上し、売上の3％の損失をカバーできるので、考慮すべき点がいくつかあります。



ライブラリがモジュールで構成されていることを理解する必要もあります。 したがって、ダウンロード速度に満足できない場合は、不要なモジュールを簡単に削除し、必要なモジュールのみを残すことができます。 しかし、これを行う前に、他の問題を見てみましょう。

おそらく、アプリケーションのパフォーマンスを向上させる方法は他にもたくさんあります。

HTTPアーカイブによると、平均的なWebページ：

• 重さは1.7MB以上です。
• 90を超えるHTTP要求を作成します。
• 275KB以上のJavaScriptスクリプトがあります。
• 1つのJavaScriptに対して17個のHTTPリクエストを作成します。
• 1MBの画像が含まれています。
• ページの46％のみがキャッシュされます。

したがって、まず、次のことに注意する必要があります。

• CSS / JSを最小化する必要があります。
• すべてのCSS / JSファイルを1つに結合します。
• 特別なツールを使用して、HTML / CSS / JSドキュメントを圧縮します。
• 画像を圧縮します。
• ブラウザがファイルをキャッシュに保存できるようにします。
• 不要なHTTP要求を削除します。

多くの場合、複数の画像を削除すると、jQueryを削除するよりもはるかに大きな結果が得られます。 いくつかの最適化を行ったが、モバイルデバイスのパフォーマンスの問題が引き続き発生し、jQueryを削除することを考えている場合-可能なすべてを実行したかどうか、または他の方法が残っているかどうかを確認してください。