主流时间库的比较与性能评估

lcccccccccx
852 阅读4分钟

在开发需求的过程中，发现一个项目里面引入了多个时间库，但是不清楚为什么引入了多个，他们有什么区别吗？所以去学习了解了一下主流时间库。

在现代前端开发中，日期和时间的处理是一个常见的任务。随着应用程序复杂性的增加，开发者需要依赖于不同的时间库来满足各种需求，从简单的日期显示到复杂的时区转换和日期操作。接下来深入探讨四种主流时间库的性能和功能特点：原生的 Date 对象、Moment.js、dayjs 和 date-fns。通过实际性能测试数据和功能比较，帮助开发者在选择合适的时间库时做出明智的决策。

时间库性能和功能比较表格

时间库总耗时（毫秒）主要优势适用场景
原生 Date 对象3简单直接，性能较高简单的日期操作和对性能要求高的场景
Moment.js18功能丰富，时区处理和本地化支持强大复杂的日期逻辑、时区处理和本地化需求，功能和灵活性要求高的项目
dayjs6Moment.js 的轻量级替代品，加载快，API 设计类似现代应用，对体积和性能有较高要求的项目
date-fns6模块化设计，按需加载，性能优化按需加载和优化性能的项目，静态类型支持的需求

通过10000次获取年月日的计算得出需要的时间：

var COUNT = 10000;

// 测试使用原生 Date 对象的性能
function testNativeDatePerformance() {
    const startTime = new Date();

    for (let i = 0; i < COUNT; i++) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth();
        const day = date.getDate();
    }

    const endTime = new Date();
    const totalTime = endTime - startTime;
    console.log("使用原生 Date 对象总耗时（毫秒）:", totalTime);
}

// 测试使用 Moment.js 的性能
function testMomentPerformance() {
    const startTime = new Date();

    for (let i = 0; i < COUNT; i++) {
        const date = moment();
        const year = date.year();
        const month = date.month();
        const day = date.date();
    }

    const endTime = new Date();
    const totalTime = endTime - startTime;
    console.log("使用 Moment.js 总耗时（毫秒）:", totalTime);
}

// 测试使用 dayjs 的性能
function testDayjsPerformance() {
    const startTime = new Date();

    for (let i = 0; i < COUNT; i++) {
        const date = dayjs();
        const year = date.year();
        const month = date.month();
        const day = date.date();
    }

    const endTime = new Date();
    const totalTime = endTime - startTime;
    console.log("使用 dayjs 总耗时（毫秒）:", totalTime);
}

// 测试使用 date-fns 的性能
function testDateFnsPerformance() {
    const startTime = new Date();

    for (let i = 0; i < COUNT; i++) {
        const date = new Date();
        const year = dateFns.getYear(date);
        const month = dateFns.getMonth(date);
        const day = dateFns.getDate(date);
    }

    const endTime = new Date();
    const totalTime = endTime - startTime;
    console.log("使用 date-fns 总耗时（毫秒）:", totalTime);
}

// 执行测试
testNativeDatePerformance();
testMomentPerformance();
testDayjsPerformance();
testDateFnsPerformance();

在进行了对比性能测试后，可以得出结论：尽管在执行 10000 次计算时，不同时间库的性能表现存在一定差异，但这些差距并不会对页面的实际展现产生显著影响。因此，在选择合适的时间库时，开发者更应该考虑库的功能和体积，而不必过分关注计算速度的微小差异。

原生的 Date 对象在简单日期操作上性能优异，适合对性能要求较高的场景。Moment.js 提供了丰富的功能和强大的时区支持，适合复杂的日期逻辑处理；dayjs 则是一个轻量级的 Moment.js 替代品，具有类似的 API 设计和快速的加载速度；而 date-fns 则通过模块化设计和优化的性能，适合需要按需加载和静态类型支持的项目。

因此，开发者在选择时间库时，应该根据项目的具体需求来权衡功能、体积和性能。对于大多数应用来说，即使在大量数据操作的情况下，时间库的微小性能差异也不太可能产生明显的用户体验影响。因此，优先考虑功能需求和库的大小，可以更好地满足项目的实际需求，而无需过度担心计算速度的细微差异。

横向对比

image.png

  • Native Date 无法直接解析自定义格式的时间字符串，且容易引入时区问题。
  • Moment.js 包体积过大，且时间对象存在 mutable 问题，源代码也早已停止维护。
  • Day.js 克服了 moment.js 的缺陷，且 api 与 moment.js 高度吻合，从 moment.js 迁移成本低。但是部分功能需要通过插件引入。推荐在不涉及 UTC 时间的情况下使用，具体说明请看原文。
  • Date-fns 同样克服了 moment.js 的缺陷，并支持 tree-shaking，单独使用某些功时，引入的包体积甚至小于 day.js。但需要从目标目录导入所需的工具函数，上手难度大。在引入了多种工具函数或涉及解析时间字符串时，还会导致包体积过大。推荐存在轻度需求时使用。
avatar
文章
阅读
粉丝