性能优化-1. 分析

一切的优化都是为了提升终端设备的体验。

关于性能，前端呈现给用户的差体验：交互卡顿，页面加载时间长…
而深究原因，呈现给开发者的：就是页面资源加载过慢的结果。

一、window.performance

performance.toJSON().timing

1. 运行上述代码后，得到如下结果

2. 计算时间

通过上述时间，可以计算出FCP，FP，DCL等指标数据，具体计算方式可参考指标计算方式。

二、Chrome devTools的performance面板

如下图所示，当调整计算机参数后，红点表示有性能问题

三、性能监视器

如下这段代码，我们很容易发现内存泄漏-只赋值，未调用也未删除，且定时器没有中断运行

setInterval(() => {
    const a = []
    for (let i = 0; i < 100000; i++) {
        a.push(Math.random() * i)
    }
}, 100)

那这段代码，在性能监视器中是如何呈现的呢？以下面两张图为例

1. 页面性能无异常

从上图中，我们可以得知，JS堆大小没有变化，对应的曲线图也是一条平稳的直线。

2、页面发生内存泄漏

当引用上述代码后，可以看到JS堆大小的曲线发生了明显变化，且是增加的趋势。

---

上面是我们工作中常用的分析性能点的方式，当然还有其他，就不一一例举了。下一节将会针对performance面板中的性能点进行优化。