程式碼運行慢？避免這19個常見的JavaScript和Node.js錯誤，讓你的程式高速狂飆

// globals.js
var color = 'blue';
function printColor() {
  console.log(color); 
}
printColor(); // Prints 'blue'

// script2.js
var color = 'red';
printColor(); // Prints 'red'!

function printColor() {
  var color = 'blue'; // local variable
  
  console.log(color);
}
printColor(); // Prints 'blue'

const ul = document.getElementById('list');
for (let i = 0; i < 10; i++) {
  const li = document.createElement(&#39;li&#39;);
  li.textContent = i;
  
  ul.appendChild(li);
}

const ul = document.getElementById('list');
let html = '';
for (let i = 0; i < 10; i++) {
  html += `<li>${i}</li>`; 
}
ul.innerHTML = html;

// New message received
const msg = `<div>${messageText}</div>`;
chatLog.insertAdjacentHTML(&#39;beforeend&#39;, msg);

let chatLogHTML = '';
const throttleTime = 100; // ms
// New message received  
chatLogHTML += `<div>${messageText}</div>`;
// Throttle DOM updates
setTimeout(() => {
  chatLog.innerHTML = chatLogHTML;
  chatLogHTML = &#39;&#39;; 
}, throttleTime);

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);
  }
});

let html = '';
for (let i = 0; i < 10; i++) {
  html += &#39;<div>&#39; + i + &#39;</div>&#39;;
}

const parts = [];
for (let i = 0; i < 10; i++) {
  parts.push(&#39;<div>&#39;, i, &#39;</div>&#39;);
}
const html = parts.join(&#39;&#39;);

const items = [/*...*/];
for (let i = 0; i < items.length; i++) {
  // ...
}

const items = [/*...*/];  
const len = items.length;
for (let i = 0; i < len; i++) {
  // ...
}

const data = fs.readFileSync('file.json'); // blocks!

fs.readFile('file.json', (err, data) => {
  // ...
});

function countPrimes(max) {
  // Unoptimized loop
  for (let i = 0; i <= max; i++) {
    // ...check if prime...
  }
}
countPrimes(1000000); // Long running!

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();
}

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!

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';

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; 
}

// 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} 
});

function getUser() {
  return fetch('/user')
    .then(r => r.json()); 
}
getUser();

function getUser() {
  return fetch('/user')
    .then(r => r.json())
    .catch(err => console.error(err));
} 
getUser();

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 => {
    // ...
  });

const contents = fs.readFileSync('file.txt'); // blocks!

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(/*...*/);
  }
}

// profile.js
function processOrders(orders) {
  orders.forEach(o => {
    // ...
  });
}
processOrders(allOrders);

// 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;
}

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...
}