JavaScript のパフォーマンス向上に関する知識ポイントのまとめ_JavaScript スキル
1. jsファイルの読み込み場所
HTML ファイルでは、
領域と 領域に <script> タグを追加できます。 JavaScript の実行と UI レンダリングがシングルスレッドであるため、js ファイルが読み込まれると、その後のページの解析プロセスがブロックされ、ページは js ファイルが完全に読み込まれて実行されるまで待機してから、実行を続行します。操作。その後、ページが空白になったり、スタックしたりするという問題が発生します。フロントエンド開発者としては、要件を実現するだけでなく、高品質のユーザー エクスペリエンスを提供することが重要です。この問題を解決するには、ユーザーの退屈な待ち時間をなくす必要があります。私が考えた解決策は次の 2 つです。 <p>1. ページをレンダリングする前に js ファイルをロードしてコンパイルする必要があることを示す特別な要件がない場合は、js ファイルを </body> タグの前に配置することを選択します。 css ファイルは引き続き <head> 領域に配置されます (乱雑なレイアウトのページは誰も見たくありません)。これを行うと、ユーザーは空白のページではなくレイアウト ページを表示できるようになります。データは js リクエストを通じてロードする必要があると指摘する人もいます。データのロードを並べ替えることができ、緊急に必要なインターフェイスを最初に実行し、それほど必要でないインターフェイスを延期したり、同時に単純なロード アニメーションやプロンプトを作成したりできます。 <p>2. これらの JS ファイルが、ページのコンテンツをより適切に表示するために最初に実行する必要があると指定されている場合は、最初の JS またはページに小さな読み込みアニメーションを配置します。これは、面白いアニメーション シーンやかわいいアニメーション シーンにすることができます。これにより、ユーザーの待ち時間の退屈も回避できるため、ユーザーは読み込みアニメーションにもっと興味を持つようになり、プロジェクトのユーザー エクスペリエンスが向上する可能性があります。 <p><span style="color: #800000"><strong>最後の推奨事項: ユーザー エクスペリエンスを向上させるために、<script> タグをできるだけ </body> タグの前に配置します。 <p><strong>2. js ファイルのマージ<br /> 多くのチーム開発では、異なる機能を持つコード ブロックを異なる js ファイルに配置することがあります。これにより、開発プロセス中に全員が協力してコードを作成することが容易になります。結局のところ、対応するフォルダーまたはファイルを見つけるだけで済みます。非常に長いドキュメント内でメソッドを見つけます。これにより、確かにチームの開発効率が向上し、新しい人が参加した後の二次開発やメンテナンスが容易になります。では、この問題をページのパフォーマンスに反映させてみてはどうでしょうか?これが本書で述べられているとおり、まさに問題です。各 HTTP リクエストには追加のパフォーマンス オーバーヘッドが伴うため、100 KB ファイルを 1 つダウンロードする方が、25 KB ファイルを 4 つダウンロードするよりも高速になります。 <p>100KBのファイルを1つダウンロードする方が、25KBのファイルを4つダウンロードするよりも速く、開発プロセス中に各ファイルを区別できる利点が大きいため、マージの問題は開発が完了してから対処されると思います。皆さんご存知ですよね? 今ではフロントエンド ツールがたくさんあるので、使い慣れた圧縮を使用してください~<br /> ここで簡単に説明しますが、最近のブラウザでは、遅延読み込みや非同期読み込みのために defer 属性と async 属性を使用することもできます。私はまだこの属性の使用に慣れていません。特定の問題が発生するかどうかはわかりません。興味のある友人は、この知識ポイントを自分でググってみてください。ここで簡単に説明します。 <p>今日のフレームワークのほとんどは、遅延読み込みとオンデマンド読み込みもサポートしています。 <p><strong>3. データアクセスの高速化 <p>ブラウザの場合、識別子の位置が深くなるほど、読み取りと書き込みが遅くなります (プロトタイプチェーンにも同じことが当てはまります)。これを理解するのは難しいことではありません。簡単な例えで言えば、食料品店が家から遠いほど、醤油を作るのに時間がかかります。醤油を作るのに時間がかかると、野菜が減ってしまうのです。焼けてしまいます -.-~ <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>4. DOM 操作の最適化</strong></p> <p>ご存知のとおり、DOM 操作は JavaScript の実行よりもはるかに多くのパフォーマンスを消費しますが、DOM での操作を避けることはできませんが、この操作によるパフォーマンスの消費を可能な限り削減することは可能です。 </p> <p>これをコードで説明してみましょう: </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>上記のメソッドを書き換えます: </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><strong>5. Dom を軽減する再描画およびリフロー バージョン</strong></p> <p>要素のレイアウトの変更、コンテンツの追加、削除、またはブラウザ ウィンドウのサイズの変更はリフローを引き起こし、フォントの色や背景色の変更は再描画を引き起こします。 <br /> 次のコードと同様の操作については、最新のブラウザのほとんどが最適化されている (1 つの再配置バージョンに最適化されている) と言われています: </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>针对多重操作，以下三种方法也可以减少重排版和重绘的次数：</p> <p>1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none)</p> <p>2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排</p> <p>3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排</p> <p><strong>六、循环的优化</strong></p> <p>这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~</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>七、合理利用二进制</strong></p> <p>如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。</p> <p>代码如下：</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> </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> 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> <br /> <p>虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了 <p>JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。 </script>
ホット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）
ホットトピック
7649
15
1392
52
91
11
36
110
Windows 10 と Windows 11 のパフォーマンス比較: どちらが優れていますか?
Mar 28, 2024 am 09:00 AM
Windows 10 と Windows 11 のパフォーマンス比較: どちらが優れていますか?テクノロジーの継続的な開発と進歩により、オペレーティング システムは常に更新され、アップグレードされます。世界最大のオペレーティング システム開発者の 1 つとして、Microsoft の Windows シリーズ オペレーティング システムは常にユーザーから大きな注目を集めてきました。 2021 年、Microsoft は Windows 11 オペレーティング システムをリリースし、広範な議論と注目を引き起こしました。では、Windows 10 と Windows 11 のパフォーマンスの違いは何でしょうか?
PHP 言語と Go 言語の比較: 大きなパフォーマンスの違い
Mar 26, 2024 am 10:48 AM
PHP と Go は一般的に使用される 2 つのプログラミング言語であり、それぞれに異なる特徴と利点があります。その中でも性能差は誰もが一般的に気にする問題です。この記事では、パフォーマンスの観点から PHP 言語と Go 言語を比較し、具体的なコード例を通じてパフォーマンスの違いを示します。まずは、PHPとGo言語の基本的な機能を簡単に紹介します。 PHP は、もともと Web 開発用に設計されたスクリプト言語で、学習と使用が簡単で、Web 開発の分野で広く使用されています。 Go 言語は、Google によって開発されたコンパイル言語です。
Win11 と Win10 システムのパフォーマンスを比較すると、どちらの方が優れていますか?
Mar 27, 2024 pm 05:09 PM
Windows オペレーティング システムは、常にパーソナル コンピューターで最も広く使用されているオペレーティング システムの 1 つであり、最近 Microsoft が新しい Windows 11 システムを発売するまで、Windows 10 は長い間 Microsoft の主力オペレーティング システムでした。 Windows 11 システムのリリースに伴い、Windows 10 と Windows 11 システムのパフォーマンスの違いに関心が集まっていますが、どちらの方が優れているのでしょうか?まずはWを見てみましょう
Kirin 8000 プロセッサが Snapdragon シリーズと競合: 誰が王になれるでしょうか?
Mar 25, 2024 am 09:03 AM
モバイルインターネットの時代において、スマートフォンは人々の日常生活に欠かせないものになりました。多くの場合、スマートフォンのパフォーマンスはユーザー エクスペリエンスの品質に直接影響します。スマートフォンの「頭脳」であるプロセッサーの性能は特に重要です。市場では、Qualcomm Snapdragon シリーズは常に強力なパフォーマンス、安定性、信頼性の代表格であり、最近では Huawei も独自の Kirin 8000 プロセッサを発売し、優れたパフォーマンスを備えていると言われています。一般ユーザーにとって、性能の良い携帯電話をいかに選ぶかは重要な課題となっている。今日はそうします
Embedding サービスのローカル実行パフォーマンスは OpenAI Text-Embedding-Ada-002 を上回っており、とても便利です。
Apr 15, 2024 am 09:01 AM
Ollama は、Llama2、Mistral、Gemma などのオープンソース モデルをローカルで簡単に実行できるようにする非常に実用的なツールです。この記事では、Ollamaを使ってテキストをベクトル化する方法を紹介します。 Ollama をローカルにインストールしていない場合は、この記事を読んでください。この記事では、nomic-embed-text[2] モデルを使用します。これは、短いコンテキストおよび長いコンテキストのタスクにおいて OpenAI text-embedding-ada-002 および text-embedding-3-small よりも優れたパフォーマンスを発揮するテキスト エンコーダーです。 o が正常にインストールされたら、nomic-embed-text サービスを開始します。
PHP 配列キー値の反転: さまざまな方法のパフォーマンス比較分析
May 03, 2024 pm 09:03 PM
PHP の配列キー値の反転メソッドのパフォーマンスを比較すると、array_flip() 関数は、大規模な配列 (100 万要素以上) では for ループよりもパフォーマンスが良く、所要時間が短いことがわかります。キー値を手動で反転する for ループ方式は、比較的長い時間がかかります。
さまざまな Java フレームワークのパフォーマンスの比較
Jun 05, 2024 pm 07:14 PM
さまざまな Java フレームワークのパフォーマンス比較: REST API リクエスト処理: Vert.x が最高で、リクエスト レートは SpringBoot の 2 倍、Dropwizard の 3 倍です。データベース クエリ: SpringBoot の HibernateORM は Vert.x や Dropwizard の ORM よりも優れています。キャッシュ操作: Vert.x の Hazelcast クライアントは、SpringBoot や Dropwizard のキャッシュ メカニズムよりも優れています。適切なフレームワーク: アプリケーションの要件に応じて選択します。Vert.x は高パフォーマンスの Web サービスに適しており、SpringBoot はデータ集約型のアプリケーションに適しており、Dropwizard はマイクロサービス アーキテクチャに適しています。
C++ 関数はプログラムのパフォーマンスにどのような影響を与えますか?
Apr 12, 2024 am 09:39 AM
C++ プログラムのパフォーマンスに対する関数の影響には、関数呼び出しのオーバーヘッド、ローカル変数、およびオブジェクト割り当てのオーバーヘッドが含まれます。 関数呼び出しのオーバーヘッド: スタック フレーム割り当て、パラメーター転送、および制御転送が含まれます。これは、小規模な関数に大きな影響を与えます。ローカル変数とオブジェクト割り当てのオーバーヘッド: ローカル変数やオブジェクトの作成と破棄が大量に行われると、スタック オーバーフローやパフォーマンスの低下が発生する可能性があります。
