likes
comments
collection
share

nodejs性能测试生成火焰图

作者站长头像
站长
· 阅读数 18

nodejs性能测试生成火焰图

前情提要

前段时间，公司的js脚本性能不好，导致车机端端侧性能很差，需要较长时间才能反馈。但是 由于卡顿问题 可能涉及到各方面，端侧、js脚本等，就需要性能测试，后续优化代码。我们是前端只能看看js能不能优化了。

在调研工具的时候发现好多资料都是很老的，包括gpt、豆包等各种大模型查出来也是，或者是需要侵入式代码的，局限性很强。如：Node.js 内置的 Profiler结合flamebearer插件去看的火焰图，又或者Node.js内置的Tracing API需要侵入代码。

最佳实践

查了很久资料终于查到了更好用的工具，以下是最佳实践。

搭建项目

1.安装Koa框架等各种依赖

npm i koa koa-body koa-router @koa/cors -d

2.安装自动重启服务

安装 nodemon 工具

npm i nodemon -d

编写package.json脚本

"scripts": {
    "dev": "nodemon --inspect ./src/main.js"
}

完整package.json如下

{
    "name": "performance-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "dev": "nodemon --inspect ./src/main.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@koa/cors": "^5.0.0",
        "koa": "^2.15.3",
        "koa-body": "^6.0.1",
        "koa-router": "^12.0.1",
        "nodemon": "^3.1.4"
    }
}

3.编写基础服务

创建src/main.js

const Koa = require('koa');
const Router = require('koa-router');
const KoaBody = require('koa-body');
const cors = require('@koa/cors');

const app = new Koa();
const router = new Router();

const { getArg0 } = require('./controller');
app.use(cors()); //解决跨域
app.use(KoaBody.koaBody({
    multipart: true,
    parsedMethods: ['POST', 'PUT', 'PATCH', 'DELETE'] //设置将这些请求方式挂载到body里
}))

router.post('/', getArg0)

app.use(router.routes())

app.listen(3000, () => {
    console.log('server is running on http://localhost:3000')
})

创建 src/controller.js

let skill = require('./script'); // 需要进行测试的脚本
const getArg0 = async (ctx, next) => {
    const params = JSON.stringify(ctx.request.body)
    ctx.set('Access-Control-Allow-Origin', '*')
    ctx.set('Access-Control-Allow-Headers', 'Content-Type,Content-Length,Authorization,Accept,X-Requested-With')
    ctx.set('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS')
    ctx.body = JSON.parse(skill(params))
}

module.exports = {
    getArg0
}

4.编写页面代替postman使用

创建src/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>压测</title>
    <style>
        .container {
            display: flex;
        }

        #inputDom {
            width: 40%;
            min-width: 500px;
            height: 500px;
            top: 0px;
            padding: 0px;
            box-sizing: content-box;
            font-size: inherit;
            line-height: inherit;
            resize: none;
        }

        .rightBox {
            margin-left: 10px;
        }

        #responseDom {
            width: 40%;
            min-width: 500px;
            height: 500px;
            top: 0px;
            padding: 0px;
            box-sizing: content-box;
            font-size: inherit;
            line-height: inherit;
            resize: none;
        }

        .mt10 {
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        <div class="container">
            <div>
                <textarea id="inputDom" placeholder="输入"></textarea>
                <div>
                    <button onclick="handleFormat()">格式化数据</button>
                </div>
            </div>
            <div class="rightBox">
                <textarea id="responseDom" placeholder="输出"></textarea>
            </div>
        </div>

        <div class="mt10">
            <button id="clickBtn" onclick="handleClick()">测试</button>
        </div>
    </div>

    <script>
        // 获取结果
        function getResult(params) {
            fetch('http://localhost:3000', {
                method: 'post',
                headers: {
                    "Content-Type": "application/json",
                },
                // mode: 'cors',
                body: params
            })
                .then(response => response.json())
                .then(data => {
                    setOutput(JSON.stringify(data));
                }).
                catch(error => console.error('Error:', error));
        }
        // 点击调用接口
        function handleClick() {
            let inputElement = document.getElementById('inputDom');
            let inputValue = inputElement.value;
            getResult(inputValue);
        }
        // 格式化返回结果
        function setOutput(value) {
            let responseDom = document.getElementById('responseDom');
            responseDom.value = JSONFormat(value);
        }
        // 格式化入参
        function handleFormat() {
            let inputDom = document.getElementById('inputDom');
            let responseDom = document.getElementById('responseDom');
            if (isJSON(inputDom.value)) {
                inputDom.value = JSONFormat(inputDom.value);
            }
            if (isJSON(responseDom.value)) {
                responseDom.value = JSONFormat(responseDom.value);
            }
        }

        function isJSON(str) {
            try {
                JSON.parse(str);
                return true;
            } catch (e) {
                return false;
            }
        }
        /*
            param1 JSONstr 未格式化的JSON字符串
            return 去【类空格字符】后的JSON字符串
        */
        function JSONTrim(JSONstr) {
            try {
                JSONstr = JSONstr.replace(/'/g, '"');
                JSONstr = JSON.stringify(JSON.parse(JSONstr));
            } catch (error) {
                // 转换失败错误提示
                console.error("json数据格式有误...");
                console.error(error);
                JSONstr = null;
            }
            return JSONstr;
        }

        /**
         * 格式化json
         * @param {*} JSONstr
         */
        const JSONFormat = (JSONstr) => {
            JSONstr = JSONTrim(JSONstr); // 初步格式化json

            let re = new RegExp("\\{|\\}|,|:", "g"); // 匹配格式化后的json中的{},:
            let exec = null;
            let InvalidFs = 0;
            let InvalidBs = 0;
            while ((exec = re.exec(JSONstr))) {
                // 找{},:
                let frontToCurrent = exec.input.substr(0, exec.index + 1); // 匹配开头到当前匹配字符之间的字符串
                if (frontToCurrent.replace(/\\"/g, "").replace(/[^"]/g, "").length % 2 != 0) {
                    // 测试当前字符到开头"的数量，为双数则被判定为目标对象
                    if (exec[0] === "{") InvalidFs++;
                    else if (exec[0] === "}") InvalidBs++;
                    continue; // 不是目标对象，手动跳过
                }
                let keyTimesF = frontToCurrent.replace(/[^\{]/g, "").length - InvalidFs; // 找出当前匹配字符之前所有{的个数
                let keyTimesB = frontToCurrent.replace(/[^\}]/g, "").length - InvalidBs; // 找出当前匹配字符之前所有}的个数
                let indentationTimes = keyTimesF - keyTimesB; // 根据{个数计算缩进

                if (exec[0] === "{") {
                    JSONstr = JSONstr.slice(0, exec.index + 1) + "\n" + "\t".repeat(indentationTimes) + JSONstr.slice(exec.index + 1); // 将缩进加入字符串
                } else if (exec[0] === "}") {
                    JSONstr = JSONstr.slice(0, exec.index) + "\n" + "\t".repeat(indentationTimes) + JSONstr.slice(exec.index); // 将缩进加入字符串
                    re.exec(JSONstr); // 在查找目标前面插入字符串会回退本次查找，所以手动跳过本次查找
                } else if (exec[0] === ",") {
                    JSONstr = JSONstr.slice(0, exec.index + 1) + "\n" + "\t".repeat(indentationTimes) + JSONstr.slice(exec.index + 1);
                } else if (exec[0] === ":") {
                    JSONstr = JSONstr.slice(0, exec.index + 1) + " " + JSONstr.slice(exec.index + 1);
                } else {
                    console.log(`匹配到了来路不明的${exec[0]}`);
                }
            }
            if (JSONstr === null) {
                ElMessage.error("请输入正确格式的json");
                return;
            }
            return JSONstr;
            // return JSONstr === null ? "Invalid value" : JSONstr;
        };
    </script>
</body>

</html>

开始使用

执行npm run dev启动服务

打开 src/index.html 页面

nodejs性能测试生成火焰图

收集数据

1.打开chrome浏览器，直接输入 chrome://inspect ，如下图的地方选择 inspect,可能会比较慢，需要等待十秒钟左右

nodejs性能测试生成火焰图

2.点击如下图所指后就可以对node项目进行压测了。

nodejs性能测试生成火焰图

3.这时候可以使用页面调用接口，或者postman去调用接口进行测试。建议使用页面，可以根据自身需求对页面修改，比如循环去调用接口一定次数。使用 stop可以停止测试。

nodejs性能测试生成火焰图

4.压测成功后，导出文件CPU-xx.cpuprofile

nodejs性能测试生成火焰图

分析数据

推荐使用 speedscope 来分析火焰图的趋势，打开官网，选择刚才本地保存的文件，支持在线分析也可以安装speedscope到本地。

nodejs性能测试生成火焰图

参考文章

转载自:https://juejin.cn/post/7387309614793162792
评论
请登录