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:js;">
//修改前
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:js;">
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:js;">
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:js;">
//修改前
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:js;">
//修改前
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:js;">
.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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
