19个常见的JavaScript和Node.js错误以及优化 19个常见的JavaScript和Node.js错误以及优化缓慢或卡顿的网站是业余爱好者的标志，而流畅、优化的体验会让用户感到高兴，并使专业人士脱颖而出。但创建真正高性能的网络应用程序充满了陷阱。错误比比皆是，它们可能会拖慢JavaScript的速度，而您甚至没有意识到这一点。微小的疏忽会让你的代码变得臃肿，并悄悄地一点一点地降低速度。这是怎么回事？事实证明，我们有很多常见的方式会无意中减慢 JavaScript 的速度。随着时间的推移，可能会阻碍网站性能。这些错误是可以避免的。今天，我们重点关注可能会悄悄减慢 JavaScript 和 Node.js 应用程序速度的 19 个性能陷阱。我们将通过说明性示例和可操作的解决方案来探索导致这些问题的原因，以优化您的代码。识别并消除这些危害是打造让用户满意的流畅网络体验的关键。那么，让我们深入了解一下吧！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 元素时，批量更改而不是一次操作一个节点。考虑这个例子：const ul = document.getElementById('list'); for (let i = 0; i < 10; i++) { const li = document.createElement('li'); li.textContent = i; ul.appendChild(li); }这将逐一附加列表项。最好先构建一个字符串然后设置.innerHTML：const ul = document.getElementById('list'); let html = ''; for (let i = 0; i < 10; i++) { html += `<li>${i}</li>`; } ul.innerHTML = html;构建字符串可以最大限度地减少回流。我们更新 DOM 一次而不是 10 次。对于多个更新，构建更改，然后在最后应用。或者更好的是，使用 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 上只有一个侦听器，更少的内存开销。事件委托利用事件冒泡。一个侦听器可以处理来自多个后代的事件。只要适用，就使用委派。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 等工具来监控生产中的错误。明确处理所有错误。11. 内存泄漏当内存被分配但从未释放时，就会发生内存泄漏。随着时间的推移，泄漏会累积并降低性能。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 更改、利用异步技术、消除阻塞操作、减少依赖性、利用缓存以及删除不需要的重复。

Js中var、let和const定义变量的区别是什么？ Js中var、let和const定义变量的区别是什么？在JavaScript中，我们经常使用var、let和const来声明变量。它们之间有一些重要的区别，本文将帮助你了解这些区别，并提供相应的代码示例。1. var关键字：var是在ES5中引入的变量声明关键字。使用var声明的变量是函数作用域的，这意味着它们在声明它们的函数内部可见。function example() { var x = 10; console.log(x); // 10 } console.log(x); // ReferenceError: x is not defined在上面的示例中，变量x在函数example的作用域内可见，但是在函数外部无法访问。var还存在变量提升的问题，即可以在声明之前访问变量。console.log(x); // undefinedvar x = 10;2. let关键字：let是在ES6中引入的新变量声明关键字。使用let声明的变量是块级作用域的，这意味着它们在最近的包含它们的块内可见。function example() { let x = 10; if (true) { let x = 20; console.log(x); // 20 } console.log(x); // 10 } console.log(x); // ReferenceError: x is not defined在上面的示例中，变量x在if语句块内部重新声明并使用，但在if语句块外部仍然保持原值。let的另一个重要特点是它不会存在变量提升的问题。console.log(x); // ReferenceError: x is not defined let x = 10;3. const关键字：const也是在ES6中引入的新变量声明关键字。使用const声明的变量是常量，它们是块级作用域的，并且不能重新赋值。const x = 10; console.log(x); // 10 x = 20; // TypeError: Assignment to constant variable 在上面的示例中，变量x被声明为常量，因此不能再次赋值。 需要注意的是，const声明的变量仍然是可变的，例如数组和对象。 const arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4] const obj = { name: "John" }; obj.age = 30; console.log(obj); // { name: "John", age: 30 } 通过上述示例可看出，尽管无法对const声明的变量进行重新赋值，但仍然可以对其进行修改。 ## 总结： - var是函数作用域，let和const是块级作用域。 - var存在变量提升的问题，而let和const没有。 - let和const具有相似的行为，但const声明的变量不能重新赋值。 根据你的需求，选择合适的变量声明关键字，可以有助于编写更可靠和可维护的代码。

引入JavaScript文件的4种方式 在HTML文件中，可以使用以下4种方式引入JavaScript文件：1.外部文件方式（External file）：将JavaScript代码保存为一个独立的文件，并通过src属性链接到HTML文件中。 示例：<script src="script.js"></script>2.内部文件方式（Internal file）：在HTML文件中使用<script>标签并将JavaScript代码放在其中，但不指定外部文件路径。 示例：<script type="text/javascript"> // JavaScript代码 </script>3.动态加载方式（Dynamic loading）：使用JavaScript的createElement和appendChild方法来动态创建和插入<script>标签。 示例：var script = document.createElement('script'); script.src = 'script.js'; document.body.appendChild(script);4.按需加载方式（Lazy loading）：使用defer或async属性来控制脚本的加载和执行时机。defer属性表示脚本将在文档解析完毕后执行，同时保持脚本的异步加载，多个延迟脚本按顺序执行。示例：<script src="script.js" defer></script>async属性表示脚本将在下载完成后立即执行，不会阻塞页面的解析和渲染。示例：<script src="script.js" async></script>请注意，以上引入方式可以单独使用，也可以组合使用，根据实际需求选择合适的方式。

js对象操作 JavaScript 和 HTML DOM 参考手册 js的变量类型有字符串,布尔等 在操作这些变量类型的时候,可以将他们看成是对象来操作 因为js 把一切都封装成对象来看 获取字符串的长度var str = 'hello world'; console.log(str.length); //11 console.log(str.substr(0,5)); // hello console.log(str); // hello world; var arr = \['a','b','c','d'\]; console.log(arr.join('~'));//将一个数组拆分为字符串 console.log(str.split(' '));// 将一个字符串分割为数组 String 字符串对象length属性: 长度indexOf(string) 返回出现字符串的位置substr(num1,[num2]) 截取字符串replace(str1,str2) 字符串替换var str = 'abcdef'; str.indexOf('d') //3 str.substr(0,3) //'abc' str.replace('a','f') //'fbcdef'Date 日期对象getFullYear() 返回年份（4位）getMonth() 返回月份 0-11getDate() 返回日期 1-31getHours() 返回小时数 0-23getMinutes() 返回分钟数 0-59getSeconds() 返回秒数 0-59var d = new Date(); d.getFullYear()+'-'+d.getMonth()+'-'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()+':'+d.getSeconds() //日期YmdHisMath 数学对象ceil(数值) 大于或等于该数的最小整数，即小数 做四舍五入 取整floor(数值) 小于或等于该数的最大整数 即小数 不做四舍五入 取整var num = 3.56; Math.ceil(num) //4 Math.floor(num) //3

JavaScript的64位浮点数 JavaScript的64位浮点数一、JavaScript的64位浮点数 JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。 所以，1与1.0是相同的，是同一个数。1 === 1.0 // true这就是说，JavaScript 语言的底层根本没有整数，所有数字都是小数（64位浮点数）。容易造成混淆的是，某些运算只有整数才能完成，此时 JavaScript 会自动把64位浮点数，转成32位整数，然后再进行运算。由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。0.1 + 0.2 === 0.3// false0.3 / 0.1// 2.9999999999999996二、IEEE754 浮点数标准的制定背景 早期人们提出浮点数定义时，每个计算机厂商会定义自己的浮点数规则，不同厂商对同一个数表示出的浮点数是不一样的。这就会导致，一个程序在不同厂商下的计算机中做浮点数运算时，需要先转换成这个厂商规定的浮点数格式，才能再计算，这也必然加重了计算的成本。于是，1985年，IEEE 组织推出了浮点数标准，就是我们经常听到的 IEEE754 浮点数标准，这个标准统一了浮点数的表示形式，并提供了 2 种浮点格式：单精度浮点数 float：32 位，符号位 s 占 1 bit，指数 e 占 8 bit，小数数 f 占 23 bit双精度浮点数 float：64 位，符号位 s 占 1 bit，指数 e 占 11 bit，小数 f 占 52 bit三、JavaScript浮点数在内存中的结构根据国际标准IEEE 754 ，JavaScript 浮点数的64个二进制位，从最左边开始，是这样组成的：第一部分（蓝色）：用来存储符号位（sign），第1位：符号位，0表示正数，1表示负数第二部分（绿色）：用来存储指数（exponent），第2位到第12位（共11位）：指数部分第三部分（红色）：用来存储小数（fraction），第13位到第64位（共52位）：小数部分（即有效数字） 符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。四、 64位浮点数表示数字的公式浮点数是采用科学计数法来表示一个数字的，它的格式可以写成这样：(-1)^s f 2^e符号部分 -1 or 1 f的范围为1<=f<2 使用52位表示指数有正有负，指数位长度为11比特，所以能表示的数字范围为0~2047假设我们将十进制数 25.125 转换为浮点数，转换过程就是这样的（D代表十进制，B代表二进制）：整数部分：25(D) = 11001(B)小数部分：0.125(D) = 0.001(B)用二进制科学计数法表示：25.125(D) = 11001.001(B) = 1.1001001 * 2^4(B)所以符号位 s = 0，小数 f = 1.001001(B) = 001001(去掉1，隐藏位)，指数 e = 4+1023(中间值) = 1027(D) = 10000000011(B)。按照内存结构中浮点数定义的规则，填充到 64 bit 上。五 、52位为什么可以表示53位小数（精度）IEEE754规定小数部分第一位隐含为1，不写，因为所有二进制第一个有效数字都是1。所以加上省略的1位，精度位数是 53 bit。所以在 0 ~ 2^53 内的整数都是有效数字，算上第1位符号位，就可以得到 -2^53 ~ 2^53 都是有效数字。六、浮点数能精确表示的范围Math.pow(2,53)  - 1 // 最大 Number.MAX_SAFE_INTEGER // 常数表示- (Math.pow(2,53)  - 1) // 最大 Number.MIN_SAFE_INTEGER // 常数表示七、Number的MAX_VALUE我们知道了 js 中数的表示方法，那么他能表示的最大的数是多少呢，聪明的你肯定会想到是下面这个数：0 11111111111 1111111111111111111111111111111111111111111111111111但是，这种情况在 IEEE754 标准中表示 NaN，最大的数其实是：0 11111111110 1111111111111111111111111111111111111111111111111111转换成二进制的科学计数法表示如下：1.1111111111111111111111111111111111111111111111111111 * 2^(2046 - 1023)= 1.1111111111111111111111111111111111111111111111111111 * 2^1023= 11111111111111111111111111111111111111111111111111111 * 2^971= (2^53 - 1) * 2^971= 1.7976931348623157e+308我们在浏览器调试窗口里面验证下：(Math.pow(2, 53) - 1) * Math.pow(2, 971) // 1.7976931348623157e+308(Math.pow(2, 53) - 1) * Math.pow(2, 971) === Number.MAX_VALUE // true八、Number的MAX_SAFE_INTEGERMAX_SAFE_INTEGER 表示在 JavaScript 中最大的安全整数。所谓的安全，就是大于这个数的整数不一定可以精确表示。他的值其实是 2^53 - 1，表示成二进制为：0 10000110100 1111111111111111111111111111111111111111111111111111表示成二进制的科学计数法为：1.1111111111111111111111111111111111111111111111111111 * 2^52= 11111111111111111111111111111111111111111111111111111比这个数大一的数为：100000000000000000000000000000000000000000000000000000= 1.00000000000000000000000000000000000000000000000000000 * 2^53在计算机中表示成:0 10000110101 0000000000000000000000000000000000000000000000000000 0注意到我们省去掉了一位，按照向偶舍入的规则，不会产生进位。所以这个数还是可以精确表示的，没有问题。我们再来看看比 MAX_SAFE_INTEGER 大二的数：100000000000000000000000000000000000000000000000000001= 1.00000000000000000000000000000000000000000000000000001 * 2^53在计算机中表示成:0 10000110101 0000000000000000000000000000000000000000000000000000 1注意到我们省去掉了一位，按照向偶舍入的规则，还是不会产生进位。这个时候就有问题了，这个数跟刚才那个数竟然是相等的，我们来验证下：const a = Number.MAX_SAFE_INTEGERa + 1 === a + 2 // true所以，在进行大数的相关运算的时候要小心了，最好是使用 BigInt 类型。