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: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>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: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>上記のメソッドを書き換えます: </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><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: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>针对多重操作，以下三种方法也可以减少重排版和重绘的次数：</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: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>七、合理利用二进制</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: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> </pre><div class="contentsignin">ログイン後にコピー</div></div> </div> <div class="jb51code"> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;"> 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>

JavaScript のパフォーマンス向上に関する知識ポイントのまとめ_JavaScript スキル