此前，该公司已经在内部生产系统上进行了两年的研究。 随着生产数据的增加，页面操作速度迅速下降。 我花了一些时间优化一些页面，现在我总结一下工作。

前台优化

（1）能本地调用的地方，不要全局刷新。

例如。 我的页面上有一个“接收”按钮。 如果尚未采集样本，则会显示“接收”按钮。 如果样本已采集，则会显示“已接收”按钮； 单击“接收”按钮后，将更改为“已接收”按钮。

JSP 页面也会根据示例的状态显示。 如下。

“接收”按钮实际完成的工作是在后台更改数据库中样本的状态，然后查询更改页面上的所有信息，然后重新渲染页面。 JS脚本如下：

function recBloodSample(sampleId, orderId, index){
	$.post("../sample/recBloodSample", {
		"sampleId": sampleId,
		"orderId": orderId
	}, function(data) {
		$("#recOrgSampleListInfo").html($("#recOrgSampleListInfo", data).html());
	});
}

由于更改的页面要再次查询，且数据量较大，因此更改按钮的响应极其缓慢。 那么如何修改呢？

考虑到实际上只要样本的状态发生变化，页面上的其他信息就保持不变，所以我们可以在成功更改样本状态后返回前台，直接将按钮替换为“已接收”按钮。 去掉了对整个页面信息的查询后台代码，提高了速度。

JS脚本如下：

function recBloodSample(sampleId, orderId, index, obj){
	$.post("../sample/recBloodSample", {
		"sampleId": sampleId,
		"orderId": orderId
	}, function(data) {
		if(data==''){
			var div = $(obj).closest("div");
			$(div).empty();
			$(div).append('');
		}
	});
}

效果对比：

修改前： 耗时：

修改后： 耗时：

总结：速度提升近4倍。 虽然不是特别明显，但当页面信息较少时，响应速度会更快。 这是真实的。 因此，减少后台工作可以有效提升用户体验。

其他内容，下次继续。 还请其他人提出更有效的方法。