前端渲染函数调用图工具的设计与实现  

Design and implementation of front-end rendering call graph tool

作　　者：孙卫真[1] 孙星 向勇[2] SUN Wei-zhen;SUN Xing;XIANG Yong(Information Engineering College,Capital Normal University,Beijing 100048,China;Department of Computer Science and Technology,Tsinghua University,Beijing 100084,China)

机构地区：[1]首都师范大学信息工程学院,北京100048 [2]清华大学计算机科学与技术系,北京100084

出　　处：《计算机工程与设计》2022年第1期277-286,共10页Computer Engineering and Design

摘　　要：针对内核在线分析工具,使用服务器计算函数调用图存在渲染时间长、网络传输数据量大等问题,基于Node.js的前端渲染函数调用图工具FRCG(front-end rendering call graph),使用前后端分离的方式,将数据处理与调用图渲染拆分到前后端分别进行。服务器异步处理请求,返回JSON数据,优化传输数据量。前端页面请求数据,动态渲染函数调用图,页面通过对数据的更新实现图的切换和操作功能,提高调用图的灵活性。对比测试表明,FRCG工具有效提高了函数调用图生成速度,减少了传输数据量。Aiming at the problems of the long rendering time and large amount of network transmission data when using the server to generate the function call graph for the kernel online analysis tool,a front-end rendering function call graph tool FRCG(fron-tend rendering call graph)based on Node.js was proposed.The front-end and back-end separation method was used to split data processing and call graph rendering into front and back ends.The server processed the request asynchronously and returned JSON data to optimize the amount of data transmitted.The front-end requested data and dynamically rendered the function call graph.The web page realized the switching and operation functions of the graph by updating the data,which improved the flexibility of the call graph.Comparative tests show that the FRCG can effectively increase the speed of function call graph generation and reduce the amount of transmitted data.

关 键 词：前后端分离 Node.js Vue.js 系统调用 函数调用图 

分 类 号：TP311[自动化与计算机技术—计算机软件与理论]