検索
ホームページウェブフロントエンドjsチュートリアルjs パフォーマンスの最適化 JavaScript ページをより速く読み込む方法

コードはできるだけシンプルにしてください

すべてを JavaScript に依存しないでください。繰り返しのスクリプトは書かないでください。 JavaScript は、見た目を美しくするためだけのお菓子のツールだと考えてください。 Web サイトに大量の JavaScript コードを追加しないでください。必要な場合にのみ使用してください。ユーザー エクスペリエンスを本当に向上できる場合にのみ使用してください。

DOM アクセスを最小限に抑える

JavaScript を使用して DOM 要素にアクセスするのは簡単で、コードも読みやすくなりますが、速度は遅くなります。重要なポイントをいくつか紹介します。 Web ページのレイアウトを変更するための JavaScript の使用を制限し、アクセスされた要素への参照をキャッシュします。場合によっては、サイトが大規模な DOM 変更に依存している場合、マークアップを制限することを検討する必要があります。これは、古い XHTML と HTML4 を放棄して HTML5 に切り替える十分な理由です。 DOM 要素の数を確認するには、Firebug プラグインのコンソールに document.getElementsByTagName('*').length と入力します。

圧縮されたコード

圧縮された JavaScript ページを提供する最も効果的な方法は、まず JavaScript 圧縮ツールを使用してコードを圧縮し、その後、gzip 圧縮を使用して結果のコードを提供することです。 。

はい、main.js は圧縮していませんが、圧縮されていない jQuery プラグインがないか確認して、圧縮を忘れないようにしてください。以下に、圧縮のためのいくつかのオプションをリストします。

◆ YUI 圧縮ツール (jQuery 開発チームが使用)、初心者ガイド

(http://www.slideshare.net/nzacas/extreme-JavaScript-compression-with-yui-compressor)、第 2 ガイド ( http: //vilimpoc.org/research/js-speedup/) および公式 Web サイト (http://developer.yahoo.com/yui/compressor/)。

◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

◆ JSMin(http://crockford.com/JavaScript/jsmin)

GZip 圧縮: その背後にあるアイデアは、ブラウザとサーバーの間でデータを転送するのにかかる時間。時間を短縮すると、「Accept-Encoding: gzip,deflate」というタイトルのファイルが得られます。ただし、この圧縮方法にはいくつかの欠点があります。これは、サーバー側とクライアント側 (圧縮および解凍用) の両方のプロセッサ リソースとディスク領域を占有します。

eval() を避ける: eval() は時間の面である程度の効率をもたらす場合もありますが、それを使用するのは明らかに間違ったアプローチです。 eval() を使用すると、コードが汚く見えるため、ほとんどの圧縮ツールによる圧縮が回避されます。

JavaScriptの読み込みを高速化するツール: Lab.js

JavaScriptの読み込みを高速化する優れたツールがたくさんあります。言及する価値のあるツールの 1 つは Lab.js です。

LAB.js (JavaScript のロードとブロック) を使用すると、JavaScript ファイルを並行してロードして、全体のロードプロセスを高速化できます。さらに、ロードする必要があるスクリプトに特定の順序を設定して、依存関係の整合性を確保できます。さらに、開発者は Web サイトで速度が 2 倍向上したと主張しています。

適切な CDN を使用する

現在、多くの Web ページでコンテンツ配信ネットワーク (CDN) が使用されています。誰でも使用できるため、キャッシュ メカニズムが改善されます。また、帯域幅も節約できます。簡単に ping を送信したり、Firebug を使用してサーバーをデバッグし、どこでデータを高速化できるかを見つけることができます。 CDN を選択するときは、Web サイトへの訪問者の所在地を考慮してください。可能な限りパブリック リポジトリを使用するようにしてください。

jQuery 用のいくつかの CDN ソリューション:

◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js - Google Ajax、ライブラリの詳細については、http:/ を参照してください。 /code.google.com/apis/libraries/devguide.html#Libraries。

◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——Microsoft の CDN

•http://code.jquery.com/jquery-1.4.2。 .js - エッジキャスト (mt)。

Web ページの最後に JavaScript をロードします

ユーザーに焦点を当て、インターネット接続が遅いためにユーザーが Web ページから離れなかった場合、これは非常に良い習慣です。使いやすさとユーザーが第一であり、JavaScript は最後にあります。これは苦痛かもしれませんが、一部のユーザーは JavaScript を無効にするという事実を覚悟しておく必要があります。ロードする必要があるヘッダーに JavaScript を入れることができますが、それは非同期でロードされる場合に限られます。

トラッキングコードを非同期で読み込む

これはとても重要です。私たちのほとんどは統計を取得するために Google Analytics を使用します。これはいい。次に、トラッキング コードを配置する場所を確認してください。ヘッダー内にあるのでしょうか? それとも document.write を使用しているのでしょうか? では、コードを非同期的に追跡するために Google Analytics を使用していない場合は、責任があるのは自分だけです。

Google Analyticsの非同期トラッキングコードはこんな感じです。これは document.write を使用する代わりに DOM を使用することを認めざるを得ませんが、これはあなたにとってより適しているかもしれません。 Web ページが読み込まれる前にこれらのイベントの一部を検出できますが、これは非常に重要です。ここで、ページがまだ読み込まれておらず、すべてのユーザーがページを閉じているという状況について考えてみましょう。ページビューの欠落に対する解決策が見つかりました

var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); 
_gaq.push(['_trackPageview']); 
(function() { 
var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})();

Google Analytics を使用していませんか? それは問題ありません。今日の分析プロバイダーのほとんどは非同期トラッキングを使用できます。


Ajaxの最適化

Ajax リクエストはウェブサイトのパフォーマンスに大きな影響を与えます。以下に、Ajax 最適化に関するいくつかの重要なポイントを紹介します。

ajaxをキャッシュします

まずコードを見てください。 Ajax はキャッシュ可能ですか? はい、データに依存しますが、ほとんどの Ajax リクエストはキャッシュ可能であるはずです。 jQuery では、script および jsonp データ型を除いて、リクエストはデフォルトでキャッシュされます。

Ajax リクエストには GET を使用します

POST タイプのリクエストでは、2 つの TCP データ パケットを送信する必要があります (最初にヘッダーを送信し、次にデータを送信します)。 GET タイプのリクエストでは、1 つのパケットを送信するだけで済みます (これは、持っている Cookie の数によって異なる場合があります)。したがって、URL の長さが 2K 未満で、何らかのデータをリクエストする場合は、GET を使用した方がよいでしょう。

ySlowの使い方

パフォーマンスに関して言えば、ySlowはシンプルでありながら非常に効果的です。 Web サイトにスコアを付けて、修正が必要な領域と重点を置くべき領域を示します。

もう 1 つのトリック: JavaScript を PNG ファイルにパッケージ化します

想像してみてください: JS と CSS を画像の最後に追加し、CSS を使用してトリミングし、単一の HTTP リクエストを通じてアプリケーションで必要なものを取得し、すべての情報を取得します。

最近この方法を見つけました。基本的に、JavaScript/CSS データを PNG ファイルにパックします。その後、キャンバス API の getImageData() を使用するだけで、それを解凍できます。さらに、非常に効率的です。データを圧縮せずに、さらに約 35% 圧縮できます。そして、これは可逆圧縮です。大きなスクリプトの場合、画像がキャンバスにポイントされてピクセルが読み取られるまでに「ある程度」の読み込み時間がかかると感じられることを指摘しなければなりません。

さらに js パフォーマンスの最適化については、PHP 中国語 Web サイトに注目して、JavaScript ページをより速く読み込む方法に関する関連記事をご覧ください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript:Web言語の汎用性の調査JavaScript:Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化:現在の傾向と将来の見通しJavaScriptの進化:現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

javascriptの分解:それが何をするのか、なぜそれが重要なのかjavascriptの分解:それが何をするのか、なぜそれが重要なのかApr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

pythonまたはjavascriptの方がいいですか?pythonまたはjavascriptの方がいいですか?Apr 06, 2025 am 12:14 AM

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。

JavaScriptをインストールするにはどうすればよいですか?JavaScriptをインストールするにはどうすればよいですか?Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境