Eine langsame oder verzögerungsfreie Website ist ein Zeichen dafür, dass es sich um einen Amateur handelt, während ein reibungsloses, optimiertes Erlebnis Benutzer begeistern und Profis von anderen abheben wird.
Aber die Erstellung wirklich leistungsstarker Webanwendungen birgt viele Fallstricke. Es gibt viele Fehler, die JavaScript verlangsamen können, ohne dass Sie es überhaupt merken. Kleine Versäumnisse können Ihren Code aufblähen und ihn Stück für Stück langsamer machen.
Was ist los?
Es stellt sich heraus, dass es viele gängige Möglichkeiten gibt, wie wir JavaScript unbeabsichtigt verlangsamen können. Mit der Zeit kann dies die Leistung der Website beeinträchtigen.
Diese Fehler sind vermeidbar.
Heute konzentrieren wir uns auf 19 Leistungsfallen, die Ihre JavaScript- und Node.js-Anwendungen leise verlangsamen können. Wir untersuchen die Ursachen dieser Probleme anhand anschaulicher Beispiele und umsetzbarer Lösungen zur Optimierung Ihres Codes.
Das Erkennen und Beseitigen dieser Gefahren ist der Schlüssel zur Schaffung eines reibungslosen Netzwerkerlebnisses, das die Benutzer zufriedenstellt. Also, lasst uns näher darauf eingehen!
1. Falsche Variablendeklarationen und -bereiche
Wenn Sie zum ersten Mal JavaScript lernen, ist es einfach, alle Variablen global zu deklarieren. Dies kann jedoch später zu Problemen führen. Schauen wir uns ein Beispiel an:
// globals.js
var color = 'blue';
function printColor() {
console.log(color);
}
printColor(); // Prints 'blue'Das funktioniert gut, aber stellen Sie sich vor, wir laden ein anderes Skript:
// script2.js var color = 'red'; printColor(); // Prints 'red'!
Da Farbe global ist, wird sie von script2.js überschrieben! Um dies zu beheben, deklarieren Sie wann immer möglich Variablen innerhalb von Funktionen:
function printColor() {
var color = 'blue'; // local variable
console.log(color);
}
printColor(); // Prints 'blue'Änderungen von anderen Skripten wirken sich jetzt nicht auf printColor aus.
Variablen im globalen Bereich zu deklarieren, wenn dies nicht erforderlich ist, ist ein Anti-Pattern. Versuchen Sie, globale Variablen auf Konfigurationskonstanten zu beschränken. Deklarieren Sie andere Variablen lokal im kleinstmöglichen Umfang.
2. Ineffiziente DOM-Operationen
Führen Sie beim Aktualisieren von DOM-Elementen Stapeländerungen durch, anstatt jeweils einen Knoten zu bearbeiten. Betrachten Sie dieses Beispiel:
const ul = document.getElementById('list');
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.textContent = i;
ul.appendChild(li);
}Dadurch werden die Listenelemente einzeln angehängt. Es ist besser, zuerst eine Zeichenfolge zu erstellen und dann .innerHTML festzulegen:
const ul = document.getElementById('list');
let html = '';
for (let i = 0; i < 10; i++) {
html += `<li>${i}</li>`;
}
ul.innerHTML = html;Durch die Erstellung der Zeichenfolge werden Reflows minimiert. Wir aktualisieren das DOM einmal statt zehnmal.
Bei mehreren Updates erstellen Sie die Änderungen und wenden sie dann am Ende an. Oder noch besser: Verwenden Sie DocumentFragment zum Stapelanhängen.
3. Übermäßige DOM-Operationen
Häufige DOM-Updates verringern die Leistung. Stellen Sie sich eine Chat-Anwendung vor, die Nachrichten in Seiten einfügt.
Negativbeispiel:
// New message received
const msg = `<div>${messageText}</div>`;
chatLog.insertAdjacentHTML('beforeend', msg);Das wird unschuldig in jede Nachricht eingefügt. Es wäre besser, Aktualisierungen einzuschränken:
Richtiges Beispiel:
let chatLogHTML = '';
const throttleTime = 100; // ms
// New message received
chatLogHTML += `<div>${messageText}</div>`;
// Throttle DOM updates
setTimeout(() => {
chatLog.innerHTML = chatLogHTML;
chatLogHTML = '';
}, throttleTime);Jetzt aktualisieren wir höchstens alle 100 Millisekunden und halten so die DOM-Operationen gering.
Für hochdynamische Benutzeroberflächen sollten Sie eine virtuelle DOM-Bibliothek wie React in Betracht ziehen. Diese minimieren die DOM-Manipulation mithilfe virtueller Darstellungen.
4. Mangelnde Aktivitätsdelegation
Das Anhängen von Ereignis-Listenern an viele Elemente erzeugt unnötigen Overhead. Stellen Sie sich eine Tabelle mit einer Löschschaltfläche für jede Zeile vor:
Negativbeispiel:
const rows = document.querySelectorAll('table tr');
rows.forEach(row => {
const deleteBtn = row.querySelector('.delete');
deleteBtn.addEventListener('click', handleDelete);
});Dadurch wird für jede Löschschaltfläche ein Listener hinzugefügt. Event-Delegation muss besser genutzt werden:
Richtiges Beispiel:
const table = document.querySelector('table');
table.addEventListener('click', e => {
if (e.target.classList.contains('delete')) {
handleDelete(e);
}
});Jetzt gibt es nur noch einen Listener auf .net, weniger Speicheraufwand.
Event-Delegation nutzt Event-Bubbling. Ein Listener kann Ereignisse von mehreren Nachkommen verarbeiten. Verwenden Sie bei Bedarf die Delegation.
5. Ineffiziente String-Verkettung
Beim Verketten von Strings in einer Schleife wird die Leistung beeinträchtigt. Betrachten Sie diesen Code:
let html = '';
for (let i = 0; i < 10; i++) {
html += '<div>' + i + '</div>';
}Das Erstellen einer neuen Zeichenfolge erfordert die Zuweisung von Speicher. Verwenden Sie besser Arrays:
const parts = [];
for (let i = 0; i < 10; i++) {
parts.push('<div>', i, '</div>');
}
const html = parts.join('');Das Erstellen von Arrays minimiert den Bedarf an Zwischenzeichenfolgen. .join() tritt beim letzten Mal bei.
Für das Hinzufügen mehrerer Zeichenfolgen verwenden Sie bitte die Array-Verkettung. Berücksichtigen Sie auch Vorlagenliterale, die Werte einbetten.
6. Nicht optimierte Schleifen
Schleifen in JavaScript verursachen häufig Leistungsprobleme. Ein häufiger Fehler besteht darin, wiederholt auf die Array-Länge zuzugreifen:
Gegenbeispiel:
const items = [/*...*/];
for (let i = 0; i < items.length; i++) {
// ...
}Redundante Prüfungen für .length können die Optimierung behindern.
Richtiges Beispiel:
const items = [/*...*/];
const len = items.length;
for (let i = 0; i < len; i++) {
// ...
}Die Cache-Länge kann die Geschwindigkeit verbessern. Weitere Optimierungen umfassen das Entfernen von Invarianten außerhalb der Schleife, die Vereinfachung der Abbruchbedingungen und die Vermeidung teurer Operationen innerhalb von Iterationen.
7. Unnötige Synchronisierungsvorgänge
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 更改、利用异步技术、消除阻塞操作、减少依赖性、利用缓存以及删除不需要的重复。
Das obige ist der detaillierte Inhalt vonCode läuft langsam? Vermeiden Sie diese 19 häufigen JavaScript- und Node.js-Fehler, damit Ihre Programme mit hoher Geschwindigkeit laufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
