Un site Web lent ou lent est le signe d'un amateur, tandis qu'une expérience fluide et optimisée ravira les utilisateurs et distinguera les pros.
Mais créer des applications Web véritablement performantes est semé d’embûches. Les bugs abondent et peuvent ralentir JavaScript sans même que vous vous en rendiez compte. De petits oublis peuvent rendre votre code gonflé et le ralentir petit à petit.
Que se passe-t-il ?
Il s'avère qu'il existe de nombreuses façons courantes de ralentir involontairement JavaScript. Au fil du temps, cela peut nuire aux performances du site Web.
Ces erreurs sont évitables.
Aujourd'hui, nous nous concentrons sur 19 pièges de performances qui peuvent ralentir silencieusement vos applications JavaScript et Node.js. Nous explorerons les causes de ces problèmes avec des exemples illustratifs et des solutions concrètes pour optimiser votre code.
Identifier et éliminer ces dangers est essentiel pour créer une expérience réseau fluide et satisfaisante pour les utilisateurs. Alors, creusons-y !
1. Déclarations et portées de variables incorrectes
Lorsque vous apprenez JavaScript pour la première fois, il est facile de déclarer toutes les variables globalement. Cependant, cela peut entraîner des problèmes à long terme. Regardons un exemple :
// globals.js
var color = 'blue';
function printColor() {
console.log(color);
}
printColor(); // Prints 'blue'Cela fonctionne bien, mais imaginez si nous chargeons un autre script :
// script2.js var color = 'red'; printColor(); // Prints 'red'!
Parce que la couleur est globale, script2.js la remplace ! Pour résoudre ce problème, déclarez les variables dans les fonctions autant que possible :
function printColor() {
var color = 'blue'; // local variable
console.log(color);
}
printColor(); // Prints 'blue'Désormais, les modifications provenant d'autres scripts n'affecteront pas printColor
Déclarer des variables dans la portée globale lorsqu'elles ne sont pas nécessaires est un anti-modèle. Essayez de limiter les variables globales aux constantes de configuration. Pour les autres variables, déclarez-les localement dans la plus petite portée possible.
2. Opérations DOM inefficaces
Lors de la mise à jour des éléments DOM, effectuez des modifications par lots au lieu d'utiliser un nœud à la fois. Prenons cet exemple :
const ul = document.getElementById('list');
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.textContent = i;
ul.appendChild(li);
}Cela ajoutera les éléments de la liste un par un. Il est préférable de créer d'abord une chaîne, puis de définir .innerHTML :
const ul = document.getElementById('list');
let html = '';
for (let i = 0; i < 10; i++) {
html += `<li>${i}</li>`;
}
ul.innerHTML = html;Construire la chaîne minimise les redistributions. Nous mettons à jour le DOM une fois au lieu de 10 fois.
Pour plusieurs mises à jour, créez les modifications puis appliquez-les à la fin. Ou mieux encore, utilisez DocumentFragment pour ajouter par lots.
3. Opérations DOM excessives
Les mises à jour fréquentes du DOM réduiront les performances. Considérez une application de chat qui insère des messages dans les pages.
Exemple négatif :
// New message received
const msg = `<div>${messageText}</div>`;
chatLog.insertAdjacentHTML('beforeend', msg);Ceci est innocemment inséré dans chaque message. Il serait préférable de limiter les mises à jour :
Exemple correct :
let chatLogHTML = '';
const throttleTime = 100; // ms
// New message received
chatLogHTML += `<div>${messageText}</div>`;
// Throttle DOM updates
setTimeout(() => {
chatLog.innerHTML = chatLogHTML;
chatLogHTML = '';
}, throttleTime);Maintenant, nous mettons à jour au maximum toutes les 100 millisecondes, maintenant ainsi les opérations DOM à un niveau bas.
Pour les interfaces utilisateur hautement dynamiques, envisagez une bibliothèque DOM virtuelle comme React. Ceux-ci minimisent la manipulation du DOM à l’aide de représentations virtuelles.
4. Manque de délégation d'activité
Attacher des auditeurs d'événements à de nombreux éléments crée une surcharge inutile. Considérons un tableau avec un bouton de suppression pour chaque ligne :
Exemple négatif :
const rows = document.querySelectorAll('table tr');
rows.forEach(row => {
const deleteBtn = row.querySelector('.delete');
deleteBtn.addEventListener('click', handleDelete);
});Cela ajoutera un écouteur pour chaque bouton de suppression. Besoin de mieux utiliser la délégation d'événements :
Exemple correct :
const table = document.querySelector('table');
table.addEventListener('click', e => {
if (e.target.classList.contains('delete')) {
handleDelete(e);
}
});Maintenant, il n'y a qu'un seul écouteur sur .net, moins de surcharge de mémoire.
La délégation d'événements utilise le bouillonnement d'événements. Un écouteur peut gérer les événements de plusieurs descendants. Utilisez la délégation le cas échéant.
5. Concaténation de chaînes inefficace
Lors de la concaténation de chaînes dans une boucle, les performances seront affectées. Considérez ce code :
let html = '';
for (let i = 0; i < 10; i++) {
html += '<div>' + i + '</div>';
}La création d'une nouvelle chaîne nécessite l'allocation de mémoire. Mieux vaut utiliser des tableaux :
const parts = [];
for (let i = 0; i < 10; i++) {
parts.push('<div>', i, '</div>');
}
const html = parts.join('');Construire des tableaux minimise le besoin de chaînes intermédiaires. .join() rejoint la dernière fois.
Pour l'ajout de plusieurs chaînes, veuillez utiliser la concaténation de tableaux. Pensez également aux littéraux de modèle qui intègrent des valeurs.
6. Boucles non optimisées
Les boucles en JavaScript entraînent souvent des problèmes de performances. Une erreur courante consiste à accéder à plusieurs reprises à la longueur du tableau :
Contre-exemple :
const items = [/*...*/];
for (let i = 0; i < items.length; i++) {
// ...
}Les vérifications redondantes de .length peuvent inhiber l'optimisation.
Exemple correct :
const items = [/*...*/];
const len = items.length;
for (let i = 0; i < len; i++) {
// ...
}La longueur du cache peut améliorer la vitesse. D'autres optimisations incluent la suppression des invariants en dehors de la boucle, la simplification des conditions de terminaison et l'évitement d'opérations coûteuses au sein des itérations.
7. Opérations de synchronisation inutiles
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 更改、利用异步技术、消除阻塞操作、减少依赖性、利用缓存以及删除不需要的重复。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
