HTMLおよびJavaScriptのパフォーマンスのヒント





サイトとアプリケーションのパフォーマンスを改善するというトピックは、常に優れたWeb開発者の注目を集めるべきです。 場合によっては、有能な作業によってコンピューティングリソースを節約できますが、他の場合では、Wikipediaで先日行われように、ユーザーの全ユーザー向けのアプリケーションのエクスペリエンスを大幅に改善できます。 そして多くの場合一度に。



Webアプリケーションの作業速度は、条件付きで3つのコンポーネントに依存します:1)データとコードが配信されるネットワークインフラストラクチャ、2)ブラウザーの動作、3)実際にブラウザーが実行する必要があるコードの記述方法。



3つのコンポーネントはすべて、常に改善および最適化されています。 たとえば、ネットワークスタックでは、HTTP 2.0への移行により特定の一般的な改善が行われています。 ブラウザの観点から見ると、すべてのメーカーはエンジンの改善に絶えず取り組んでいます。 Microsoft EdgeのChakraの場合、JavaScriptによる生産性の一般的な向上に加えて、特定のシナリオ(同様にFirefoxおよびGoogle Chrome)でコードの有効性を高めるように設計されたAsm.jsSIMD.jsなどの特殊なツールのサポートを追加します。



しかし、Webアプリケーションのコードに関しては、多くの場合、さまざまなエンジンの約束された速度だけでなく、意思決定の有効性を独立して測定および改善する必要があります。



同僚のDoris ChenとJohn-David Daltonは、HTMLおよびJavaScriptコードのパフォーマンスを改善する方法に関する実用的なヒントを含むコース全体を準備しました。 Microsoft Virtual Academyの対応するページで、またはカットの下で個別のクリップとして視聴できます







Webパフォーマンス101







Webパフォーマンスの基本、パフォーマンスチューニング方法、およびサイトとアプリケーションを最適化するときに発生する主なブロッカー。



機器と測定







JavaScriptおよびHTMLのパフォーマンスを追跡および測定するのに役立つツールに精通している。



戦略と原則:ネットワーク要求とデータのダウンロード







ネットワーク要求への迅速な応答を実装し、ダウンロードされるデータの量を減らすためのアプローチ。



戦略と原則:メディアリソースの使用







メディアコンテンツを最適化し、CSS3を活用するためのヒント。



戦略と原則:メモリ、マークアップ、コード実行







メモリ使用量を管理し、効果的なマークアップ構造を構築し、コード実行を最適化する方法。



高速JavaScriptの記述







オンデマンドでJSを初期化し、JSON、.innerHTML、数値、配列、DOMオブジェクトを効率的に使用するなど、優れた高速なJavaScriptを作成するためのヒント。



例:カジュアルゲームのパフォーマンスチューニング







カジュアルゲームの例の分析。ステップバイステップで、以前のレッスンの戦略と原則を使用して、起動時間、UIの応答性、およびメモリ消費効率が改善されます。



願い事を書く場所は?



前と同様に、ブラウザのパフォーマンスを改善するためのフィードバックと要望を喜んでお送りします。 新しいパフォーマンス機能のリクエストはUserVoiceに残し、バグはMicrosoft Connectに報告し、一般的なコメントはEdgeチームにツイートする必要があります。



All Articles