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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

javascriptパフォーマンス

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

HTML ファイルでは、

領域と領域に <script> タグを追加できます。 JavaScript の実行と UI レンダリングがシングルスレッドであるため、js ファイルが読み込まれると、その後のページの解析プロセスがブロックされ、ページは js ファイルが完全に読み込まれて実行されるまで待機してから、実行を続行します。操作。その後、ページが空白になったり、スタックしたりするという問題が発生します。フロントエンド開発者としては、要件を実現するだけでなく、高品質のユーザーエクスペリエンスを提供することが重要です。この問題を解決するには、ユーザーの退屈な待ち時間をなくす必要があります。私が考えた解決策は次の 2 つです。 <p>1. ページをレンダリングする前に js ファイルをロードしてコンパイルする必要があることを示す特別な要件がない場合は、js ファイルをタグの前に配置することを選択します。 css ファイルは引き続き <head> 領域に配置されます (乱雑なレイアウトのページは誰も見たくありません)。これを行うと、ユーザーは空白のページではなくレイアウトページを表示できるようになります。データは js リクエストを通じてロードする必要があると指摘する人もいます。データのロードを並べ替えることができ、緊急に必要なインターフェイスを最初に実行し、それほど必要でないインターフェイスを延期したり、同時に単純なロードアニメーションやプロンプトを作成したりできます。 <p>2. これらの JS ファイルが、ページのコンテンツをより適切に表示するために最初に実行する必要があると指定されている場合は、最初の JS またはページに小さな読み込みアニメーションを配置します。これは、面白いアニメーションシーンやかわいいアニメーションシーンにすることができます。これにより、ユーザーの待ち時間の退屈も回避できるため、ユーザーは読み込みアニメーションにもっと興味を持つようになり、プロジェクトのユーザーエクスペリエンスが向上する可能性があります。 <p><span style="color: #800000"><strong>最後の推奨事項: ユーザーエクスペリエンスを向上させるために、<script> タグをできるだけタグの前に配置します。 <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"> <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> <p><strong>4. DOM 操作の最適化 <p>ご存知のとおり、DOM 操作は JavaScript の実行よりもはるかに多くのパフォーマンスを消費しますが、DOM での操作を避けることはできませんが、この操作によるパフォーマンスの消費を可能な限り削減することは可能です。 <p>これをコードで説明してみましょう: <div class="jb51code"> <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> <p>上記のメソッドを書き換えます: <div class="jb51code"> <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> <p><strong>5. Dom を軽減する再描画およびリフローバージョン <p>要素のレイアウトの変更、コンテンツの追加、削除、またはブラウザウィンドウのサイズの変更はリフローを引き起こし、フォントの色や背景色の変更は再描画を引き起こします。 <br /> 次のコードと同様の操作については、最新のブラウザのほとんどが最適化されている (1 つの再配置バージョンに最適化されている) と言われています: <div class="jb51code"> <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> <p>针对多重操作，以下三种方法也可以减少重排版和重绘的次数： <p>1.Dom先隐藏，操作后再显示 2次重排 (临时的display:none) <p>2.document.createDocumentFragment() 创建文档片段处理，操作后追加到页面 1次重排 <p>3.var newDOM = oldDOM.cloneNode(true)创建Dom副本，修改副本后oldDOM.parentNode.replaceChild(newDOM,oldDOM)覆盖原DOM 2次重排 <p><strong>六、循环的优化 <p>这应该是较多人都知道的写法了，简单带过即可(后面还是用代码+注释形式说明)~ <div class="jb51code"> <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> <p><strong>七、合理利用二进制 <p>如：对2取模，则偶数最低位是0，奇数最低位是0，与1进行位与操作的结果是0，奇数的最低位是1，与1进行位与操作的结果是1。 <p>代码如下： <div class="jb51code"> <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="jb51code"> <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> <br /> <p>虽说现代浏览器都已经做的很好了，但是本兽觉得这是自己对代码质量的一个追求。并且可能一个点或者两个点不注意是不会产生多大性能影响，但是从多个点进行优化后，可能产生的就会质的飞跃了 <p>JavaScript 总结的这几个提高性能知识点，希望大家牢牢掌握。 </script>

声明

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

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

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

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

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

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの進化：現在の傾向と将来の見通しApr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

See all articles