JavaScript性能优化

隐藏类

console.time('a');
for (let i = 0; i < 1000000; ++i) {
    const obj = {};
    obj['a'] = i;
}
console.timeEnd('a');

console.time('b');
for (let i = 0; i < 1000000; ++i) {
    const obj = {};
    obj[`${i}`] = i;
}
console.timeEnd('b');

1.比较主流的 JS 引擎是 v8，这里假设是跑在 chrome 或 node 上，用的是 v8 引擎V8 是一个 c++ 实现的 js 解析引擎，内部利用隐藏类(Hidden Class)的方式来存放 JS 对象。
2.隐藏类的特性是:多个属性顺序一致的 JS 对象，会重用同一个隐藏类，减少 new Class 的开销。
3.所以左边生成1个隐藏类，而右边生成3个隐藏类，因此左边代码性能更好
指导代码编写习惯:定义对象或类时，尽可能保证属性顺序一致。

快速模式/字典模式

console.time('a');
const arr1 = [];
for (let i = 0; i < 10000000; ++i) {
    arr1[i] = 1;
}
console.timeEnd('a');

console.time('b');
const arr2 = [];
arr2[10000000 - 1] = 1;
for (let i = 0; i < 10000000; ++i) {
    arr2[i] = 1;
}
console.timeEnd('b');

1.比较主流的 JS 引擎是 v8，这里假设是跑在 chrome 或 node 上，用的是 v8 引擎。

2.V8 是一个 c++ 实现的 js 解析引擎，内部有多种方式存放 JS 数组。

3.”数组从 0 到 length-1 无空洞”，会进入快速模式，存放为 array。

4.”数组中间有空洞”，会进入字典模式，存放为 HashMap。(这是 V8 的一个优化策略，保证用最合适的数据结构处理当下场景，如果遇到数据量过大或者是松散结构的话，就改变为HashMap，牺牲遍历性能，换取访问性能。)

指导代码编写习惯
从0开始初始化数组，避免数组进入字典模式。
让数组保持紧凑，避免数组进入字典模式。

内存泄漏

内存泄漏是指应用程序中的内存不再被使用但仍然被占用，导致内存消耗逐渐增加，最终可能导致应用程序性能下降或崩溃。内存泄漏通常是由于开发者编写的代码未正确释放不再需要的对象或数据而导致的。

**特征:**程序对内存失去控制
内存泄漏的案例:

意外的全局变量：

function someFunction() {
    // 这是错误注释示例，应改为正确的注释格式
    /*! 这个变量会变成全局变量，并可能导致内存泄漏 */
    myObject = { key: 'value' };
}

someFunction();
console.log(myObject); // 可以在全局作用域访问到 myObject，说明它成了全局变量

闭包:闭包可能会无意中持有对不再需要的变量或对象的引用，从而阻止它们被垃圾回收。

function createClosure() {
    const data = new Array(1000000).fill('大量数据');
    return function () {
        console.log(data);
    };
}

const closureFunction = createClosure();
// 使用闭包函数
closureFunction();

// 当不再需要闭包函数时，手动解除引用
closureFunction = null;

事件监听器: 忘记移除事件监听器可能会导致内存泄漏，因为与监听器相关联的对象将无法被垃圾回收.

function createListener() {
    const element = document.getElementById('someElement');
    if (element) {
        element.addEventListener('click', () => {
            console.log('Element clicked');
        });
    }
}

createListener();

循环引用:对象之间的循环引用会阻止它们被垃圾回收。

// 创建对象 obj1
const obj1 = {};
// 创建对象 obj2
const obj2 = {};

// obj1 引用 obj2
obj1.reference = obj2;
// obj2 引用 obj1
obj2.reference = obj1;

// 现在 obj1 和 obj2 形成了循环引用

setTimeout/setInterval: 使用 setTimeout 或 setInterval 时，如果没有正确清理，可能会导致内存泄
漏，特别是当回调函数持有对大型对象的引用时。

function doSomethingRepeatedly() {
    const data = new Array(1000000).fill('大量数据');
    setInterval(() => {
        // 闭包持有对 'data’的引用，即使它不再需要
        console.log(data);
    }, 1000);
}

doSomethingRepeatedly();

事件委托

事件委托是一种常见的 JavaScript 编程技巧，它的核心思想是将事件处理程序附加到一个祖先元素上，而不是直接附加到每个子元素上，当事件在子元素上冒泡时，祖先元素捕获事件并根据事件目标来确定如何处理事件。
1.性能优势: 事件委托可以减少事件处理程序的数量，特别是在大型文档中，因为您只需为一个祖先元素添加一个事件处理程序。这降低了内存消耗和提高了性能，因为不必为每个子元素都绑定事件。
2.动态元素: 事件委托适用于动态生成的元素，因为无需为新添加的元素单独绑定事件，而是在祖先元素上继续使用相同的事件处理程序。
3.代码简洁性: 通过将事件处理逻辑集中在祖先元素上，代码更加简洁和可维护，因为您不需要为每个子元素编了写相似的事件处理代码。
4.处理多个事件类型: 通过在祖先元素上处理多个事件类型，可以实现更多的灵活性。例如，您可以在祖先元素上处理点击事件、鼠标移动事件和键盘事件，而不必为每个事件类型创建单独的事件处理程序。

示例:假设您有一个无序列表(《u1>)中的多个列表项(《1i>)，您希望在点击任何列表项时执行某些操作。
您可以使用事件委托来处理这些点击事件，而不必为每个列表项单独添加事件处理程序。

const ulElement = document.querySelector("ul");
ulElement.addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
        // 在这里执行点击列表项时的操作
        console.log("点击了列表项: " + event.target.textContent);
    }
});

在上述示例中，事件委托将点击事件处理程序附加到了元素上，并使用 event.target 来确定被点击的列表项。这种方法使得单个事件处理程序能够处理整个列表的点击事件。

JavaScript 动画和 CSS3 动画有什么区别?

实现方式:
JavaScript 动画: JavaScript 动画是通过编写 ]avaScript 代码来操作 DOM 元素的样式和属性，从而实现动画效果。您可以使用 setTimeout、setInterval 或现代的动画库(如 GreenSock Animation Platform)来创建 JavaScript 动画，
CSS3 动画: CSS3 动画是使用 CSS3 的动画属性和关键帧动画来定义和控制动画效果。您可以通过在 CSS 中定义关键帧和过渡效果来创建 CSS3 动画。
性能:
JavaScript 动画可以在更复杂的动画场景下提供更多的控制和灵活性，但性能取决于代码的JavaScript动画:质量。不合理的 JavaScript 动画可能导致性能问题，因为它们通常需要大量的计算。
CSS3 动画: CSS3 动画通常更具性能优势，因为浏览器可以使用硬件加速来处理它们，而不需要 JavaScript 的运行时计算。CSS3 动画通常更流畅和高效，特别是在简单的过渡效果中。
适用场景:
JavaScript 动画: 适用于需要更多控制和互动性的场景，例如游戏、用户交互和需要基于条件的动画JavaScript 动画可以响应用户输入，并在运行时根据条件调整动画。

CSS3 动画: 适用于简单的过渡效果、页面加载动画、滑动效果、渐变等。CSS3 动画是为了更好的性能和可维护性而设计的，适合许多常见的动画需求。
可维护性:
JavaScript 动画: JavaScript 动画可能需要更多的代码和维护工作，尤其是对于复杂的动画效果。它们通常需要手动处理动画的每一帧。
CSS3 动画: CSS3 动画通常更容易维护，因为它们将动画效果与样式分开，可以在样式表中轻松修改动画的属性和参数。