高パフォーマンスの JavaScript について知っておくべきこと
JavaScript はフルスタック開発言語であり、ブラウザ、携帯電話、サーバーで使用できることは誰もが知っているはずです。この記事では、JS の基礎となる原則と実装原則についての全員の理解を深めるために、効率的な JavaScript のベスト プラクティスをいくつか紹介します。
データ ストレージ
コンピュータ サイエンスにおける古典的な問題は、データ ストレージの場所を変更することで最高の読み取りおよび書き込みパフォーマンスを得るというものです。JavaScript では、データ ストレージの場所が影響します。コードのパフォーマンスに大きな影響を与えます。 – {} を使用してオブジェクトを作成できる場合は、new Object を使用しないでください。[] を使用して配列を作成できる場合は、new Array を使用しないでください。 JSのリテラルはオブジェクトよりもアクセス速度が速いです。 – 変数がスコープ チェーン内で深くなるほど、アクセスに時間がかかります。この種の変数の場合、キャッシュを通じてローカル変数を使用して変数を保存すると、スコープ チェーンへのアクセス数を減らすことができます。ドット表記 (object.name) と演算子 (object[name]) の使用に大きな違いはありません。 Safari には違いがあります。ポイントは常に高速です。
ループ
JS の一般的なループには次の種類があります。
for(var i = 0; i < 10; i++) { // do something}
for(var prop in object) { // for loop object}
[1,2].forEach(function(value, index, array) { // 基于函数的循环})最初のメソッドであることは間違いありません。ネイティブであり、パフォーマンスが優れています。消費量が最も少ないものは、最も高速でもあります。 for-in の 2 番目の方法は、反復ごとにより多くのオーバーヘッド (ローカル変数) を生成し、その速度は最初の方法の 1/7 にすぎません。3 番目の方法は、明らかにより便利なループ メソッドを提供しますが、速度は 1/8 しかありません。通常のサイクルの。したがって、プロジェクトの状況に応じて適切なリサイクル方法を選択できます。
イベント委任
ページ上の各 A タグにイベントを追加することを想像してください。各タグに onClick を追加しますか?同じイベント ハンドラーにバインドする必要がある要素がページ内に多数ある場合、この状況はパフォーマンスに影響を与える可能性があります。イベントのバインディングごとに、ページまたは実行時の負荷が増加します。リッチなフロントエンド アプリケーションの場合、バインディングが多すぎると、対話が頻繁に行われるページで多くのメモリが占有されます。シンプルでエレガントな方法は、イベントの委任です。これはイベントベースのワークフローです。レイヤーごとにキャプチャし、ターゲットに到達し、レイヤーごとにバブルします。イベントにはバブリングメカニズムがあるため、イベントを外側の層にバインドすることで、すべての子要素からのイベントを処理できます。
document.getElementById('content').onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement; //如果不是 A标签，我就退出
if(target.nodeNmae !=== 'A') { return } //打印A的链接地址
console.log(target.href) }再描画と再配置
ブラウザは HTMl、CSS、および JS をダウンロードした後、DOM ツリーとレンダリング ツリーの 2 つのツリーを生成します。 Dom の幅、高さ、色、位置など、Dom の幾何学的プロパティが変更されると、ブラウザは要素の幾何学的プロパティを再計算し、レンダリング ツリーを再構築する必要があります。このプロセスは再描画と再配置と呼ばれます。
bodystyle = document.body.style; bodystyle.color = red; bodystyle.height = 1000px; bodystyke.width = 100%;
上記のメソッドで 3 つの属性を変更すると、ブラウザは 3 回リフローして再描画します。場合によっては、この再配置を減らすことでブラウザのレンダリング パフォーマンスが向上することがあります。推奨される方法は次のとおりです。操作を 1 つだけ実行し、3 つの手順を完了します。
bodystyle = document.body.style; bodystyle.cssText 'color:red;height:1000px;width:100%';
JavaScript の読み込み
IE8、Firefox3.5、および Chrome2 ではすべて、JavaScript ファイルの必須ダウンロードが許可されています。したがって、<script> は他のタグのダウンロードをブロックしません。残念ながら、JS のダウンロード プロセスでは、画像などの他のリソースのダウンロードが引き続きブロックされます。最新のブラウザでは並列ダウンロードが可能になりパフォーマンスが向上しましたが、スクリプトのブロックには依然として問題があります。したがって、ページ全体のレンダリングへの影響を最小限に抑え、ユーザーに表示されないようにするために、すべての <script> タグを <body> タグの下部に配置することをお勧めします。空白
JS ファイルの高パフォーマンスのデプロイメント
複数の <script> タグがページのレンダリング速度に影響することは誰もが知っているので、難しいことではありません。 「ページのレンダリングに必要な時間を短縮する」を理解するには、「HTTP」は Web サイトの速度を向上させるための古典的なルールです。したがって、実稼働環境ですべての JS ファイルをマージすると、リクエストの数が減り、ページのレンダリングが高速化されます。 JS ファイルをマージするだけでなく、JS ファイルを圧縮することもできます。圧縮とは、ファイルの実行に関係のないファイルの部分を削除することを指します。除去されたコンテンツには空白文字やコメントが含まれます。通常、変更プロセスによりファイル サイズを半分に減らすことができます。ローカル変数の長さを短縮する圧縮ツールもいくつかあります。たとえば、次のとおりです。
var myName = "foo" + "bar"; //压缩后变成 var a = "foobar";
JS ファイルのキャッシュ
HTTP コンポーネントのキャッシュにより、Web サイトへの再アクセスのユーザー エクスペリエンスが大幅に向上します。 Web サーバーは、「Expires HTTP 応答ヘッダー」を使用して、リソースをキャッシュする期間をクライアントに伝えます。もちろん、キャッシュには独自の欠点があります。アプリケーションがアップグレードされるときは、ユーザーが最新の静的コンテンツをダウンロードするようにする必要があります。この問題は、静的リソースのファイル名を変更することで解決できます。運用環境では、ブラウザが jsapplication-20151123201212.js を参照していることがわかります。これにより、新しい JS ファイルがタイムスタンプとして保存され、キャッシュが更新されない問題が解決されます。
まとめ
もちろん、効率的な JS には改善できる点があるだけではなく、パフォーマンスの低下を軽減できれば、JavaScript を使用してより効率的に開発することができます。
推奨チュートリアル: 「JavaScript 基本チュートリアル」
以上が高パフォーマンスの JavaScript について知っておくべきことの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7651
15
1392
52
91
11
36
110
フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？
Apr 04, 2025 pm 02:42 PM
フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...
誰がより多くのPythonまたはJavaScriptを支払われますか？
Apr 04, 2025 am 12:09 AM
スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？
Apr 04, 2025 pm 05:09 PM
同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...
Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？
または：
Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？
Apr 04, 2025 pm 05:36 PM
この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。
Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？
Apr 04, 2025 pm 05:12 PM
Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...
JavaScriptは学ぶのが難しいですか？
Apr 03, 2025 am 12:20 AM
JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。
フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は？
Apr 04, 2025 pm 02:06 PM
フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...
