前端性能分析

简单用Performance 工具做性能分析

背景

性能优化是前端开发一个非常重要的组成部分，如何更好地进行网络传输，如何优化浏览器渲染过程，来定位项目中存在的问题。Chrome DevTools给我们提供了2种常用方式 Audits和Performance，Audits可以对页面进行性能评分，同时，还会给我们提供一些优化建议。而Performance提供了非常多的运行时数据，能让我们看到更多细节数据。下面主要介绍一下如何使用DevTools中的Performance来进行性能分析。*

一、Performance

我们先通过一个小案例来用测试一下，先写一个函数，让它执行一亿次的累加，接着我们需要开启一台静态服务器

npx http-server .

终端输出这个说明启动i成功

二、用Chrome Devtools 的 Performance 工具做性能分析

点击performance选项卡，然后点击reload

等它录制结束,我们可以得到它的一些性能数据

我们主要分析Main线程

我们可以查看a、b、c、d的耗时

三、解决方案 — Worker

用worker开启多个线程来处理，把耗时的任务放到worker线程里面

worker.js / worker2.js

最后我们再一次运行我们的程序，打开网址就发现不会有卡顿现象了。