コードの実行が遅いですか?プログラムの高速実行を維持するには、JavaScript と Node.js でよくある 19 の間違いを回避してください
Web サイトが遅い、または遅れているのはアマチュアの兆候ですが、スムーズで最適化されたエクスペリエンスはユーザーを喜ばせ、プロとは一線を画します。
しかし、本当に高パフォーマンスの Web アプリケーションを作成するには、落とし穴がたくさんあります。バグはたくさんあり、気付かないうちに JavaScript の速度を低下させる可能性があります。小さな見落としがあるとコードが肥大化し、静かに少しずつ速度が低下する可能性があります。
これはどうなりましたか?
意図せずに JavaScript の速度を低下させる一般的な方法が多数あることが判明しました。時間が経つと、これにより Web サイトのパフォーマンスが妨げられる可能性があります。
これらの間違いは避けることができます。
今日は、JavaScript および Node.js アプリケーションの速度を静かに低下させる可能性がある 19 のパフォーマンスの落とし穴に焦点を当てます。コードを最適化するための具体的な例と実用的な解決策を使用して、これらの問題の原因を探ります。
ユーザーを満足させるスムーズな Web エクスペリエンスを作成するには、これらの危険を特定して排除することが重要です。それでは、詳しく見ていきましょう!
1. 間違った変数宣言とスコープ
JavaScript を初めて学習する場合、すべての変数をグローバルに宣言するのは簡単です。ただし、これは将来的に問題を引き起こす可能性があります。例を見てみましょう:
// globals.js var color = 'blue'; function printColor() { console.log(color); } printColor(); // Prints 'blue'
これは正常に動作しますが、別のスクリプトをロードした場合を想像してください:
// script2.js var color = 'red'; printColor(); // Prints 'red'!
color はグローバルなので、script2.js がそれをオーバーライドします。この問題を解決するには、可能な限り関数内で変数を宣言します。
function printColor() { var color = 'blue'; // local variable console.log(color); } printColor(); // Prints 'blue'
他のスクリプトからの変更は printColor に影響しません。
不必要な場合にグローバル スコープで変数を宣言するのはアンチパターンです。グローバル変数を構成定数に限定してみてください。他の変数については、可能な限り最小のスコープでローカルに宣言します。
2. 非効率的な DOM 操作
DOM 要素を更新するときは、一度に 1 つのノードを操作するのではなく、バッチ変更を行ってください。次の例を考えてみましょう:
const ul = document.getElementById('list'); for (let i = 0; i < 10; i++) { const li = document.createElement('li'); li.textContent = i; ul.appendChild(li); }
これにより、リスト項目が 1 つずつ追加されます。最初に文字列を構築してから、.innerHTML を設定することをお勧めします。
const ul = document.getElementById('list'); let html = ''; for (let i = 0; i < 10; i++) { html += `<li>${i}</li>`; } ul.innerHTML = html;
文字列を構築すると、リフローが最小限に抑えられます。 DOM を 10 回ではなく 1 回更新します。
複数の更新の場合は、変更をビルドして最後に適用します。さらに良いのは、DocumentFragment を使用してバッチ追加することです。
3. 過剰な DOM 操作
DOM を頻繁に更新すると、パフォーマンスが低下します。ページにメッセージを挿入するチャット アプリケーションを考えてみましょう。
否定的な例:
// New message received const msg = `<div>${messageText}</div>`; chatLog.insertAdjacentHTML('beforeend', msg);
これはすべてのメッセージに単純に挿入されます。更新を制限することをお勧めします:
正しい例:
let chatLogHTML = ''; const throttleTime = 100; // ms // New message received chatLogHTML += `<div>${messageText}</div>`; // Throttle DOM updates setTimeout(() => { chatLog.innerHTML = chatLogHTML; chatLogHTML = ''; }, throttleTime);
現在、更新は最大 100 ミリ秒ごとに行われるため、DOM 操作が低く抑えられます。
非常に動的な UI の場合は、React のような仮想 DOM ライブラリを検討してください。これらにより、仮想表現を使用した DOM 操作が最小限に抑えられます。
4. アクティビティ委任の欠如
イベント リスナーを多くの要素にアタッチすると、不要なオーバーヘッドが発生します。各行に削除ボタンがあるテーブルを考えてみましょう:
否定的な例:
const rows = document.querySelectorAll('table tr'); rows.forEach(row => { const deleteBtn = row.querySelector('.delete'); deleteBtn.addEventListener('click', handleDelete); });
これにより、各削除ボタンにリスナーが追加されます。イベント委任をより適切に使用する必要があります:
正しい例:
const table = document.querySelector('table'); table.addEventListener('click', e => { if (e.target.classList.contains('delete')) { handleDelete(e); } });
現在、.net にはリスナーが 1 つだけあり、メモリ オーバーヘッドが少なくなります。
イベント委任ではイベント バブリングを使用します。リスナーは複数の子孫からのイベントを処理できます。該当する場合は常に委任を使用します。
5. 非効率的な文字列の連結
ループ内で文字列を連結すると、パフォーマンスに影響します。次のコードを考えてみましょう:
let html = ''; for (let i = 0; i < 10; i++) { html += '<div>' + i + '</div>'; }
新しい文字列を作成するには、メモリを割り当てる必要があります。配列を使用することをお勧めします。
const parts = []; for (let i = 0; i < 10; i++) { parts.push('<div>', i, '</div>'); } const html = parts.join('');
配列を構築すると、中間文字列の数が最小限に抑えられます。 .join() は最後に結合します。
複数の文字列を追加するには、配列連結を使用してください。また、値を埋め込むテンプレート リテラルも考慮してください。
6. 最適化されていないループ
JavaScript のループは、パフォーマンスの問題を引き起こすことがよくあります。よくある間違いは、配列の長さに繰り返しアクセスすることです。
反例:
const items = [/*...*/]; for (let i = 0; i < items.length; i++) { // ... }
.length の冗長チェックにより、最適化が妨げられる可能性があります。
正しい例:
const items = [/*...*/]; const len = items.length; for (let i = 0; i < len; i++) { // ... }
キャッシュの長さにより速度が向上します。その他の最適化には、ループ外の不変条件の除去、終了条件の簡素化、反復内での負荷の高い操作の回避などが含まれます。
7. 不要な同期操作
JavaScript 的异步功能是一个关键优势。但要小心阻塞 I/O!例如:
反面例子:
const data = fs.readFileSync('file.json'); // blocks!
这会在从磁盘读取时停止执行。相反,如果使用回调或承诺:
正确示例:
fs.readFile('file.json', (err, data) => { // ... });
现在,事件循环在读取文件时继续。对于复杂的流程,async/await简化异步逻辑。避免同步操作以防止阻塞。
8. 阻止事件循环
JavaScript 使用单线程事件循环。阻止它会停止执行。一些常见的拦截器:
繁重的计算任务
同步输入/输出
未优化的算法
例如:
function countPrimes(max) { // Unoptimized loop for (let i = 0; i <= max; i++) { // ...check if prime... } } countPrimes(1000000); // Long running!
这会同步执行,并阻止其他事件。避免:
推迟不必要的工作
批量数据处理
使用工作线程
寻找优化机会
保持事件循环顺利运行。定期分析以捕获阻塞代码。
9. 错误处理效率低下
在 JavaScript 中正确处理错误至关重要。但要小心性能陷阱!
反面例子:
try { // ... } catch (err) { console.error(err); // just logging }
这会捕获错误但不采取纠正措施。未处理的错误通常会导致内存泄漏或数据损坏。
正确示例:
try { // ... } catch (err) { console.error(err); // Emit error event emitError(err); // Nullify variables obj = null; // Inform user showErrorNotice(); }
记录还不够!清理工件、通知用户并考虑恢复选项。使用 Sentry 等工具来监控生产中的错误。明确处理所有错误。
10. 内存泄漏
当内存被分配但从未释放时,就会发生内存泄漏。随着时间的推移,泄漏会累积并降低性能。
JavaScript 中的常见来源包括:
未清理的事件监听器
对已删除 DOM 节点的过时引用
不再需要的缓存数据
闭包中的累积状态
例如:
function processData() { const data = []; // Use closure to accumulate data return function() { data.push(getData()); } } const processor = processData(); // Long running...keeps holding reference to growing data array!
数组不断变大,但从未被清除。修理:
使用弱引用
清理事件监听器
删除不再需要的引用
限制关闭状态大小
监视内存使用情况并观察增长趋势。在泄漏堆积之前主动消除泄漏。
11. 过度使用依赖项
虽然 npm 提供了无穷无尽的选择,但请抵制过度导入的冲动!每个依赖项都会增加包大小和攻击面。
反面例子:
import _ from 'lodash'; import moment from 'moment'; import validator from 'validator'; // etc...
为次要实用程序导入整个库。最好根据需要挑选助手:
正确示例:
import cloneDeep from 'lodash/cloneDeep'; import { format } from 'date-fns'; import { isEmail } from 'validator';
只导入您需要的内容。定期检查依赖关系以删除未使用的依赖关系。保持捆绑精简并最大限度地减少依赖性。
12. 缓存不足
缓存允许通过重用先前的结果来跳过昂贵的计算。但它经常被忽视。
反面例子:
function generateReport() { // Perform expensive processing // to generate report data... } generateReport(); // Computes generateReport(); // Computes again!
由于输入没有更改,因此可以缓存报告:
正确示例:
let cachedReport; function generateReport() { if (cachedReport) { return cachedReport; } cachedReport = // expensive processing... return cachedReport; }
现在,重复调用速度很快。
13. 未优化的数据库查询
与数据库交互时,低效的查询可能会降低性能。需要避免的一些问题:
反面例子:
// No indexing db.find({name: 'John', age: 35}); // Unecessary fields db.find({first: 'John', last:'Doe', email:'john@doe.com'}, {first: 1, last: 1}); // Too many separate queries for (let id of ids) { const user = db.find({id}); }
这无法利用索引、检索未使用的字段并执行过多的查询。
正确示例:
// Use index on 'name' db.find({name: 'John'}).hint({name: 1}); // Only get 'email' field db.find({first: 'John'}, {email: 1}); // Get users in one query const users = db.find({ id: {$in: ids} });
分析并解释计划。战略性地创建索引。避免多次零散的查询。优化数据存储交互。
14. Promise 中错误处理不当
Promise 简化了异步代码。但未经处理的拒绝就是无声的失败!
反面例子:
function getUser() { return fetch('/user') .then(r => r.json()); } getUser();
如果fetch拒绝,异常就不会被注意到。
正确示例:
function getUser() { return fetch('/user') .then(r => r.json()) .catch(err => console.error(err)); } getUser();
链接.catch()可以正确处理错误。
15. 同步网络操作
网络请求应该是异步的。但有时会使用同步变体:
反面例子:
const data = http.getSync('http://example.com/data'); // blocks!
这会在请求期间停止事件循环。相反,使用回调:
正确示例:
http.get('http://example.com/data', res => { // ... });
或者:
fetch('http://example.com/data') .then(res => res.json()) .then(data => { // ... });
异步网络请求允许在等待响应时进行其他处理。避免同步网络调用。
16. 低效的文件 I/O 操作
读/写文件同步阻塞。例如:
反面例子:
const contents = fs.readFileSync('file.txt'); // blocks!
这会在磁盘 I/O 期间停止执行。
正确示例:
fs.readFile('file.txt', (err, contents) => { // ... }); // or promises fs.promises.readFile('file.txt') .then(contents => { // ... });
这允许事件循环在文件读取期间继续。
对于多个文件,使用流:
function processFiles(files) { for (let file of files) { fs.createReadStream(file) .pipe(/*...*/); } }
避免同步文件操作。使用回调、promise 和流。
17. 忽略性能分析和优化
在出现明显问题之前,很容易忽视性能。但优化应该持续进行!首先使用分析工具进行测量:
浏览器开发工具时间线
Node.js 分析器
第三方分析器
即使性能看起来不错,这也揭示了优化机会:
// profile.js function processOrders(orders) { orders.forEach(o => { // ... }); } processOrders(allOrders);
分析器显示processOrders需要 200 毫秒。
分析指导优化。制定绩效预算,如果超出则失败。经常测量并明智地优化。
18. 不利用缓存机制
缓存通过避免重复工作来提高速度。但它经常被遗忘。
反面例子:
// Compute expensive report function generateReport() { // ...heavy processing... } generateReport(); // Computes generateReport(); // Computes again!
相同的输入总是产生相同的输出。我们应该缓存:
正确示例:
// Cache report contents const cache = {}; function generateReport() { if (cache.report) { return cache.report; } const report = // ...compute... cache.report = report; return report; }
现在,重复调用速度很快。
19. 不必要的代码重复
重复的代码会损害可维护性和可优化性。
function userStats(user) { const name = user.name; const email = user.email; // ...logic... } function orderStats(order) { const name = order.customerName; const email = order.customerEmail; // ...logic... }
提取是重复的。我们重来:
function getCustomerInfo(data) { return { name: data.name, email: data.email }; } function userStats(user) { const { name, email } = getCustomerInfo(user); // ...logic... } function orderStats(order) { const { name, email } = getCustomerInfo(order); // ...logic... }
现在,它只定义一次。
结论
优化 JavaScript 应用程序性能是一个迭代过程。通过学习有效的实践并勤于分析,可以显着提高速度。
需要关注的关键领域包括最大限度地减少 DOM 更改、利用异步技术、消除阻塞操作、减少依赖性、利用缓存以及删除不需要的重复。
以上がコードの実行が遅いですか?プログラムの高速実行を維持するには、JavaScript と Node.js でよくある 19 の間違いを回避してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

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

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

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

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

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

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

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


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版
便利なJavaScript開発ツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Dreamweaver Mac版
ビジュアル Web 開発ツール
