10 个构建高性能网站的JavaScript 技巧

当前位置：点晴教程→知识管理交流 →『技术文档交流』

admin

2024年12月1日 8:9 本文热度 99

在构建高性能网站时，JavaScript 可能是你的好朋友，也可能是你的噩梦。一些精心选择的优化技术可以显著加快你的网站速度，从而带来更流畅的用户体验。

以下 10 条提示深入探讨了性能提升实践，分解了每条实践背后的“原因”和“方式”：

1. 尽量减少 DOM 操作

修改 DOM 就像每次需要一双袜子时重新整理整个衣柜一样，非常耗时！每次 DOM 操作都会触发重新渲染，这会降低你的应用速度，尤其是当你一次进行多项更改时。

相反，请尝试批量更新 DOM。

如果你必须操作 DOM，请尽量以尽量减少重排和重绘的方式进行，例如，使用 DocumentFragment 或在将其插入 DOM 之前构建 UI 结构。你的用户会感谢你多花几秒钟的注意力。

示例：

const fragment = document.createDocumentFragment();data.forEach(item => {    const element = document.createElement('div');    element.textContent = item.name;    fragment.appendChild(element);});document.body.appendChild(fragment);

2. 防抖和节流用户事件

你是否曾看到过网站在您尝试滚动时变得非常慢？这可能是因为每次您移动时，网站都会触发大量事件侦听器。

防抖和节流通过限制函数调用的频率来防止这种过载。节流允许操作以指定的间隔发生，而防抖则确保函数仅在上次事件发生后经过一定时间后触发。

节流示例：

const throttle = (fn, limit) => {    let lastFunc, lastRan;    return function(...args) {        if (!lastRan) {            fn.apply(this, args);            lastRan = Date.now();        } else {            clearTimeout(lastFunc);            lastFunc = setTimeout(function() {                if ((Date.now() - lastRan) >= limit) {                    fn.apply(this, args);                    lastRan = Date.now();                }            }, limit - (Date.now() - lastRan));        }    };};
// Usage with a scroll eventwindow.addEventListener('scroll', throttle(handleScroll, 200));

3. 延迟加载资源

Web 性能的一个关键方面是确保用户仅在需要时加载他们需要的内容。

延迟加载就是针对图像、脚本和其他重资源的。

例如，对屏幕外图像实施延迟加载不仅可以加快页面加载时间，还可以改善移动数据使用情况。

大多数浏览器现在都支持使用 loading="lazy" 实现图像的原生延迟加载，但您也可以使用 JavaScript 来实现此目的，以获得更多控制。

示例：

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

4. 使用 Web Workers 进行繁重计算

JavaScript 通常在主线程上运行，如果与繁重计算有关，则可能意味着用户的性能会很差。

Web Workers 允许您在主线程之外运行代码，让用户感觉繁重的任务变得轻松很多。

使用 Web Workers 的示例：

const worker = new Worker('worker.js');worker.postMessage('start');
worker.onmessage = (e) => {    console.log(`Worker said: ${e.data}`);};

5. 选择原生 JavaScript 而非库

虽然像 jQuery 这样的库让 JavaScript 更容易访问，但它们也有自己的负担。如今的原生 JavaScript 拥有库曾经添加的大部分功能。

这意味着您可以跳过加载整个库的过程，只需进行基本的 DOM 操作即可。

代码越少，加载时间越快 — — 这对用户来说是一种胜利。

// Instead of jQuery's $('#myElement').addClass('active')document.getElementById('myElement').classList.add('active');

6. 使用异步和延迟加载脚本

如果处理不当，JavaScript 文件可能会阻止网页的呈现。async 和 defer 属性可以通过加载 JavaScript 而不占用整个页面来防止这种情况。

async 在下载脚本后立即执行，而 defer 则等到 HTML 文档完全解析后再执行。

<script src="script.js" async></script><script src="script.js" defer></script>

7. 使用动态导入实现代码拆分

如果用户可能根本不需要，为什么要预先加载所有内容？代码拆分可让您将代码拆分为多个包，仅加载特定页面或组件所需的内容。

动态导入使此操作更加容易，允许您仅在需要时有条件地导入模块。

// Importing a module only when neededif (condition) {    import('./module.js').then(module => {        module.someFunction();    });}

8. 减少对全局变量的依赖

全局变量就像一个不断插话的家庭成员——它们可能会通过相互冲突和霸占主范围而导致意外问题。

使用局部变量或将功能封装在函数内以限制全局范围内的混乱，从而减少出错的机会并使您的代码更快。

function scopedFunction() {    let localVariable = 'This stays here';}

9. 优化循环和迭代

如果不进行优化，循环很快就会成为性能瓶颈。例如，如果您反复访问大型数组或对象的长度或其他属性，则循环速度会很慢。

通过缓存长度并避免在循环内进行过多的 DOM 查找，您可以节省宝贵的处理时间。

const array = [1, 2, 3, 4];for (let i = 0, len = array.length; i < len; i++) {    console.log(array[i]);}

10. 利用缓存的力量

Web 浏览器带有一个称为缓存的便捷功能。通过设置 HTTP 标头以鼓励缓存，您可以允许用户在本地存储您网站的部分内容。

这意味着后续访问的加载时间更快，对服务器的请求更少。这就像为用户提供您网站的 VIP 通行证，让他们无需排队。

Cache-Control: public, max-age=31536000

总结

以上就是今天这篇文章跟您分享的全部内容，希望对你有所帮助。

该文章在 2024/12/4 15:23:53 编辑过

关键字查询

网站

技巧

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。