什么是 Vanilla JS
Vanilla JS（纯 JavaScript）是指不依赖任何第三方框架或库，只使用原生 JavaScript 的开发方式。与使用 jQuery、React 或 Vue 等框架相比，使用 Vanilla JS 可以获得更快的加载速度、更低的内存占用率以及更灵活的开发模式。
为什么要使用 Vanilla JS
使用 Vanilla JS 可以让我们更好地掌握 JavaScript 语言本身的特性，便于进行深度优化和性能提升。此外，使用原生 JavaScript 还能保持代码的纯净性和可读性，减少代码的冗余和维护成本。
如何进行性能优化
在使用 Vanilla JS 进行开发时，我们需要注意以下几个方面来进行性能优化。
减少 DOM 操作
DOM 操作是 HTML 文档和 JavaScript 代码之间的接口，而由于浏览器的限制，DOM 操作是 JavaScript 中最慢的操作之一。避免频繁修改 DOM，可以大大提高页面的性能。
比如我们可以在操作多个元素时，使用 document.createDocumentFragment() 方法来创建一个文档片段，然后将所有操作都在文档片段中进行，最后只需要一次性将文档片段添加到页面中，这样可以大大减少 DOM 操作的次数。
const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); li.textContent = 'item ' + i; fragment.appendChild(li); } document.getElementById('myList').appendChild(fragment);
避免重复计算
在编写程序时，可能会存在一些计算量比较大的代码块。如果在程序执行过程中这些代码块被重复执行，就会导致程序性能下降。
比如我们可以在循环代码块中，将需要重复计算的值计算出来，存放在一个变量中，然后在循环中直接使用这个变量，这样就可以避免重复计算的问题。
-- -------------------- ---- ------- --- ---- - - -- - - ----- ---- - ----- ------- - ------------------------------ ----- ----- - ------------- - ---- ----- ------ - ------------- - ---- -- ------------ ------------------- - ----- - ----- -------------------- - ------ - ----- ------------------- - ------- ----- - ------ -- ---- ----------------------------------- -展开代码
使用事件委托
事件委托是指将事件绑定在父元素上，利用事件冒泡机制来触发子元素的事件。这种方式可以大大减少事件绑定的次数，优化页面性能。
-- -------------------- ---- ------- -- ------- ----- ------- - ------------------------------------- --- ---- - - -- - - --------------- ---- - ------------------------------------ ---------- - ------------------- - --- --- - -- ------ -------------------------------------------------------------- ----------- - -- --------- -- -------------------------------------- - ----- ----------- - ------------------------------------------------------ ---------- ------------------- - ------------- - ---展开代码
示例代码
下面是一个使用 Vanilla JS 编写的一个简单的 TodoList 程序，其中运用了上述性能优化技巧。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------------- ------- -- - ------- -------- ------------ ----- - ---------- - ---------------- ------------- - -------- ------- ------ ----------------- ------ ------------- ------------ ------- -------------------------- --- ------------------- -------- ----- -------- - ------------------------------------ ----- --------- - ------------------------------------- ----- -------- - ------------------------------------ ----------------------------------- ---------- - ----- -------- - ---------------------- -- ---------- - ----- -------- - ----------------------------- -------------------- - --------- ---------------------------------- ---------- - ----------------------------------- --- ------------------------------- -------------- - --- - --- --------- ------- -------展开代码
总结
通过上面的实践，我们可以发现，在使用 Vanilla JS 进行开发时，避免频繁修改 DOM、避免重复计算、使用事件委托等优化方式，都可以有效提升程序性能。在编写代码时，我们需要注意性能优化方面的细节，才能编写出高效、优雅、易维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1c80cf6b2d6eab3b9eea0
