JavaScript の知識ポイントのまとめ: Performance_JavaScript スキルを向上させる方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript の知識ポイントのまとめ: Performance_JavaScript スキルを向上させる方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

JavaScriptのパフォーマンスの最適化

JavaScript のパフォーマンスの問題を過小評価することはできません。そのため、開発者は JavaScript プログラムを作成する際にいくつかの詳細に注意を払う必要があります。この記事では、JavaScript のパフォーマンス最適化に関する知識ポイントを詳細に紹介します。これは間違いなく有益な情報です。

まず、JavaScript の基本的な構文を整理しましょう:

JavaScript の基本構文

var キーワードを使用して変数を定義します

構文: var 変数名=変数値

識別子: ① 文字、数字、アンダースコアで構成されます。キーワードは厳密に区別されます。

データ型:

数値タイプ: 数値

文字列: 文字列

ブール型: ブール

特殊なデータ型: 未定義、空、未定義、未割り当て

Null 値: null

参照型オブジェクト関数

パラメータのデータ型を検出します: typeof() はデータ型に対応する文字列を返します

2 つの等号 == と 3 つの等号 ===

==: データ型に関係なく比較値は等しい

===: 合同比較は数値とデータ型の両方に関連します

ブール環境: if

が発生すると、自動的にブール値に変換されます。

文字列 string 内のブール環境: 空は false、空以外は true

数値のブール環境: 0 は false、0 以外は true

数値と文字列の関係

①. 遭遇 + スプライシング操作を実行します

②. 演算を実行する必要がある場合、文字列を数値に変換する必要があります

変換方法1、文字列*1を数値型に変換

変換方法2:数値(文字列)を数値型に変換する

1: js ファイルの読み込み場所

HTML ファイルでは、領域と領域に <script> タグを追加できます。 JavaScript の実行と UI レンダリングがシングルスレッドであるため、js ファイルが読み込まれると、その後のページの解析プロセスがブロックされ、ページは js ファイルが完全に読み込まれて実行されるまで待機してから、実行を続行します。操作。その後、ページが空白になったり、スタックしたりするという問題が発生します。フロントエンド開発者としては、要件を実現するだけでなく、高品質のユーザーエクスペリエンスを提供することが重要です。この問題を解決するには、ユーザーの退屈な待ち時間をなくす必要があります。私が考えた解決策は次の 2 つです。<p> <br /> 1. ページをレンダリングする前に js ファイルをロードしてコンパイルする必要があることを示す特別な要件がない場合は、js ファイルを </body> タグの前に配置することを選択します。 css ファイルは引き続き <head> 領域に配置されます (乱雑なレイアウトのページは誰も見たくありません)。これを行うと、ユーザーは空白のページではなくレイアウトページを表示できるようになります。データは js リクエストを通じてロードする必要があると指摘する人もいます。データのロードを並べ替えることができ、緊急に必要なインターフェイスを最初に実行し、それほど必要でないインターフェイスを延期したり、同時に単純なロードアニメーションやプロンプトを作成したりできます。 <p> <br /> 2. これらの JS ファイルが、ページのコンテンツをより適切に表示するために最初に実行する必要があると指定されている場合は、最初の JS またはページに小さな読み込みアニメーションを配置します。これは、面白いアニメーションシーンやかわいいアニメーションシーンにすることができます。これにより、ユーザーの待ち時間の退屈も回避できるため、ユーザーは読み込みアニメーションにもっと興味を持つようになり、プロジェクトのユーザーエクスペリエンスが向上する可能性があります。 <p> <br /> 最後の推奨事項: ユーザーエクスペリエンスを向上させるために、<script> タグをできるだけ </body> タグの前に配置します。 <p> <br /> <p><strong>2: js ファイルのマージ<span style="color: #0000ff"> 多くのチーム開発では、開発プロセス中に全員が共同でコードを作成することがより便利になるように、異なる機能を持つコードブロックを異なる js ファイルに配置することがあります。結局のところ、対応するフォルダーを見つけるだけで済みます。または長いファイルでメソッドを探していません。これにより、確かにチームの開発効率が向上し、新しい人が参加した後の二次開発やメンテナンスが容易になります。では、この問題をページのパフォーマンスに反映させてみてはどうでしょうか?これが本書で述べられているとおり、まさに問題です。各 HTTP リクエストには追加のパフォーマンスオーバーヘッドが伴うため、100 KB ファイルを 1 つダウンロードする方が、25 KB ファイルを 4 つダウンロードするよりも高速になります。<p> <br /> 100KBのファイルを1つダウンロードする方が、25KBのファイルを4つダウンロードするよりも速く、開発プロセス中に各ファイルを区別できる利点が大きいため、マージの問題は開発が完了してから対処されると思います。皆さんご存知ですよね? 今ではフロントエンドツールがたくさんあるので、使い慣れた圧縮を使用してください~<p> ここで、遅延読み込みや非同期読み込みのためにファイルを読み込むときに、defer 属性と async 属性を使用することもできることについて簡単に説明したいと思います。最近のブラウザでは、ほとんどのブラウザで defer 属性がすでにサポートされていますが、私はこれを使用することに慣れていません。まあ、具体的な問題があるかどうかはわかりません。興味のある友人は、この知識ポイントを自分でググってみてください。ここで簡単に説明します。 <p> <br /> 今日のフレームワークのほとんどは、遅延読み込みとオンデマンド読み込みもサポートしています。 <p> <br /> <p><span style="color: #0000ff">3: データアクセスの高速化<strong> <br /><p>對於瀏覽器來說，一個標識符所處的位置越深，去讀寫他的速度也就越慢(對於這點，原型鏈亦是如此)。這應該不難理解，簡單比喻就是：雜貨店離你家越遠，你去打醬油所花的時間就越長... 熊孩子，打個醬油那麼久，菜早燒焦了-.-~ <br /> <p>如果我們需要在目前函數內多次用到一個變數值，那麼我們可以用一個局部變數先儲存起來，案例如下： <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> //修改前 function showLi(){ var i = 0; for(;i<document.getElementsByTagName("li").length;i++){ //一次访问document console.log(i,document.getElementsByTagName("li")[i]); //三次访问document }; }; //修改后 function showLi(){ var li_s = document.getElementsByTagName("li"); //一次访问document var i = 0; for(;i<li_s.length;i++){ console.log(i,li_s[i]); //三次访问局部变量li_s }; }; </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p><strong><span style="color: #0000ff">四：DOM操作的最佳化</span></strong><br /> </p> <p>眾所周知的，DOM操作遠比javascript的執行耗性能，雖然我們避免不了對DOM進行操作，但我們可以盡量去減少該操作對性能的消耗。 <br /> </p> <p>讓我們用程式碼解釋這個問題：<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> function innerLi_s(){ var i = 0; for(;i<20;i++){ document.getElementById("Num").innerHTML="A"; //进行了20次循环，每次又有2次DOM元素访问：一次读取innerHTML的值，一次写入值 }; }; </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p>針對以上方法進行一次改寫：<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> function innerLi_s(){ var content =""; var i = 0; for(;i<20;i++){ content += "A"; //这里只对js的变量循环了20次 }; document.getElementById("Num").innerHTML += content; //这里值进行了一次DOM操作，又分2次DOM访问：一次读取innerHTML的值，一次写入值 }; </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p><span style="color: #0000ff"><strong>五：減少Dom的重繪重排版</strong></span><br /> </p> <p>元素版面的改變或內容的增刪改或瀏覽器視窗尺寸改變都會導致重排，而字型顏色或背景色的修改則會導致重繪。 <br /> 對於類似以下程式碼的操作，據說現代瀏覽器大多進行了最佳化(將其優化成1次重排版)：<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> //修改前 var el = document.getElementById("div"); el.style.borderLeft = "1px"; //1次重排版 el.style.borderRight = "2px"; //又1次重排版 el.style.padding = "5px"; //还有1次重排版 //修改后 var el = document.getElementById("div"); el.style.cssText = "border-left:1px;border-right:2px;padding:5px"; //1次重排版 </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p>針對多重操作，以下三種方法也可以減少重排版和重繪的次數：<br /> </p> <p>1.Dom先隱藏，操作後再顯示 2次重排 (暫時的display:none)<br /> </p> <p>2.document.createDocumentFragment() 建立文件片段處理，操作後追加至頁 1次重排<br /> </p> <p>3.var newDOM = oldDOM.cloneNode(true)建立Dom副本，修改副本後oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆寫原DOM 2次重排<br /> </p> <p><span style="color: #0000ff"><strong>五：循環的最佳化</strong></span><br /> </p> <p>這應該是較多人都知道的寫法了，簡單帶過即可(後面還是用代碼+註釋形式說明)~<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> //修改前 var i = 0; for(;i<arr.lengthli++){ //每次循环都需要获取数组arr的length console.log(arr[i]); } //修改后 var i = 0; var len = arr.length; //获取一次数组arr的length for(;i<len;i++){ console.log(arr[i]); } //or var i = arr.length;; for(;i;i--){ console.log(arr[i]); }</pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <p><strong><span style="color: #0000ff">六：合理利用二元</span></strong><br /> </p> <p>如：對2取模，則偶數最低位是0，奇數最低位是0，與1進行位與操作的結果是0，奇數的最低位是1，與1進行位與操作的結果是1。 <br /> </p> <p>程式碼如下：<br /> </p> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> .odd{color:red} .even{color:yellow} <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> var i = 0; var lis = document.getElementsByTagName("li"); var len = lis.length; for(;i<len;i++){ if(i&1){ lis[i].className = "even"; } else{ lis[i].className = "odd"; } }; </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>雖說現代瀏覽器都已經做的很好了，但是本獸覺得這是自己對程式碼品質的一個追求。並且可能一個點或兩個點不注意是不會產生多大性能影響，但是從多個點進行優化後，可能產生的就會質的飛躍了~<br /> </script>

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホット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）

ホットトピック

Java チュートリアル

1670

CakePHP チュートリアル

1428

Laravel チュートリアル

1329

PHP チュートリアル

1274

C# チュートリアル

1256

Related knowledge

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

See all articles