全栈表格技术轻松应对复杂公式计算场景（三）：功能扩展&性能篇

功能扩展&性能篇

葡萄城推出的类 Excel全栈解决方案主要用于应对复杂公式的计算场景，可帮助开发者搭建前后端负载均衡的Web应用程序。该方案以纯前端表格控件 SpreadJS 为视图层，可在浏览器中直接编辑表格数据；以GcExcel为后端逻辑层，在服务端解析Excel 文档，无需依赖 Office 软件和 POI组件，即可实现更为高效的电子表格功能。

在前两篇文章中，我们介绍了全栈表格技术在应对复杂公式计算场景时的设计思路和示例代码，本期我们将对该代码进行调优，并借助 SpreadJS 和 GcExcel 的API实现功能扩展。

功能调优 & 扩展

待优化项目：由于SpreadJS会默认开启公式自动计算的功能，因此该示例会在每次切换sheet的时候自动更新公式的计算结果。为了进一步提升性能，我们需要关闭该功能，即当我们输入一个新的公式，或者去修改已有公式引用导致公式发生变化时，公式不会进行计算或重算。除此之外，我们还需自行设置一个强制计算的按钮，当点击该按钮时，GcExcel会在服务端执行公式计算，并将计算后的结果返回前端页面渲染，效果类似于Excel的“开始计算功能”。

优化思路：通过强制计算按钮来避免前端无意义的公式计算过程，然后利用GcExcel在后端执行更高性能的公式计算，从而达到最合理的资源分配。

示例代码：

document.getElementById("calc").onclick = function(){
                    var currentSheet = spread.getActiveSheet();
                    var spreadDirtyCells = {};
                    for(var i=0;i<spread.getSheetCount();i++){
                            var sheet = spread.getSheet(i);
                            var sheetName = sheet.name();
                            spreadDirtyCells[sheetName] = sheet.getDirtyCells();

                    }
                    var calc = {
                                    currentSheet:currentSheet.name(),
                                dirtyCells:spreadDirtyCells
                }

                    $.ajax({
                            url: "getCalcResult",
                            type:"POST",
                            data:JSON.stringify(calc),
                            contentType: 'application/json',
                            async:false,
                            success: function (data) {
                                    if (data != null) {
                            var json = ungzipString(data);
                            json = JSON.parse(json);
                            currentSheet.fromJSON(json);
                        }
                            }
                    });

            }

当用户在前端页面点击计算按钮后，可以获取当前sheet中所有的dirtyCells并传给后端，后端拿到dirtyCells之后在GcExcel解析并填入：

@RequestMapping(value = "/getCalcResult", method = RequestMethod.POST)
        @ResponseBody
        public String getCalcResult(@RequestBody Calc calc) {
                IWorksheet currentSheet = workbook.getWorksheets().get(calc.getCurrentSheet());
                Map<String,Object> map = calc.getDirtyCells();
                for (Map.Entry<String, Object> entry : map.entrySet()) {
                        String key = entry.getKey();
                        IWorksheet dirtySheet = workbook.getWorksheets().get(key);
                        List<Map<String,Object>> sheetDirtys = (List<Map<String, Object>>) entry.getValue();
                        for(int i=0;i<sheetDirtys.size();i++) {
                                Map<String,Object> dirtyCell = sheetDirtys.get(i);
                                int row = (int) dirtyCell.get("row");
                                int col = (int) dirtyCell.get("col");
                                dirtySheet.getRange(row, col).setValue(dirtyCell.get("newValue"));
                        }
                }
                workbook.setEnableCalculation(true);
                String result = null;
                if(currentSheet!=null) {
                        result = currentSheet.toJson();
                        result = GZip.compress(result);        
                }
                return result;
        }

填入计算结果后，GcExcel还会通过设置workbook.setEnableCalculation(true) ，让整个workbook重新计算一遍以获取正确的结果，最后通过sheet.toJson() 将结果返回给前端。

性能测试：下面我们来测试一下优化后的程序性能。这里随机选取了一份测试文件，该文件包含了很多复杂公式 (测试文件会在下方提供）。

1、用SpreadJS直接导入该文件，测试一下花费的时间（作者的测试机器大约需要花费12s左右）。