用 3 个简单的 JavaScript 性能优化技巧来加速你的网站

在我们的数字世界中，速度不仅仅是一种便利……而是一种必需品。
我们都知道页面加载缓慢会带来多么令人沮丧的体验，而在当今的网络环境中，即使是多几秒钟的时间，也能对用户满意度和业务成果产生巨大的影响。

如果您使用 JavaScript，则可以采用几种简单的策略来增强网站的性能。

在本文中，我将向您介绍一些简单但有效的调整方法，这些调整可以帮助加快您的网站速度，让您的用户更满意，并可能提高您的搜索引擎排名。

准备好升级你的网站了吗？🚀🚀🚀 快来开始吧！

最小化 DOM 操作

文档对象模型 (DOM) 在 Web 开发中至关重要，但过度或不正确的 DOM 操作会严重影响性能。

优化选择器：使用尽可能高效的选择器来操作或查询 DOM。例如，getElementById() 比 querySelector() 更快。
批量修改 DOM：通过批量修改 DOM 来最大程度地减少回流和重绘。只需一次操作即可在屏幕外修改 DOM 并附加更改。

const fragment = document.createDocumentFragment();

for  (let i =  0; i <  100; i++)  {

    const element = document.createElement('div');

    fragment.appendChild(element);

}

document.body.appendChild(fragment);

使用虚拟 DOM 或 Web 组件：像 React 这样的库使用虚拟 DOM 来最大限度地减少直接 DOM 操作，这可以大大提高性能。

喜欢这篇文章吗？
订阅我们的新闻通讯，获取每周更新！

高效的事件处理

事件处理不当，尤其是在复杂的应用程序中，会导致性能缓慢和界面无响应。

- 事件委托：不要将事件附加到单个元素，而是使用事件委托在更高级别管理事件。

document.getElementById('parent').addEventListener('click',  function(event)  {

    if  (event.target.tagName ===  'BUTTON')  {

        console.log('Button clicked!');

        }

});

- 节流和去抖动：对于频繁触发的事件（例如调整大小或滚动），节流或去抖动处理程序以限制执行事件处理程序的速率。

// 节流阀示例

function  throttle(func, limit)  {

    let lastFunc;

    let lastRan;

    return  function()  {

        const context =  this;

        const args = arguments;

        if  (!lastRan)  {

            func.apply(context, args);

            lastRan = Date.now();

        }  else  {

        clearTimeout(lastFunc);

        lastFunc =  setTimeout(function()  {

            if  ((Date.now()  - lastRan)  >= limit)  {

            func.apply(context, args);

            lastRan = Date.now();

        }

    }, limit -  (Date.now()  - lastRan));

}

}

}

window.addEventListener('resize',  throttle(function()  {

    console.log('Resize event');

},  200));

你学到新东西了吗？
订阅我们的新闻简报，每周获取学习资讯🍪！

优化循环和逻辑

JavaScript 的性能常常会因低效的代码结构（尤其是循环和复杂的逻辑）而受到瓶颈限制。

- 优化循环性能：减少循环内的工作量，缓存循环内的长度，避免循环内高成本的操作。

const items =  getItems();  // Assume this returns an array

const length = items.length;  // Cache the length

for  (let i =  0; i < length; i++)  {

    process(items[i]);  // Minimize what happens here

}

- 避免不必要的计算：尽可能存储计算值，而不是重新计算它们。

在当今的网络世界中，速度至关重要。

提升 JavaScript 性能并不需要重写整个应用程序。实施这些技巧可以提升您网站的响应速度和用户满意度。
先从一个方面入手，观察改进效果，然后根据需要逐步应用更多优化。

在下面的评论中分享您的结果或其他提示。

感谢阅读，

Pachi💚

PS：你给我们 GitHub Star 了吗？ ⭐

链接：https://dev.to/buildwebcrumbs/speed-up-your-site-with-3-simple-javascript-performance-optimization-tips-4gc2