Question

我在我的应用程序中有一个购物车，它目前适用于我，虽然我的同事所遇到的问题是它太慢＆＃34;慢＆＃34;。我一直在考虑一种更好的方法来实现它，以使其更快更有效。

目前这是我的页面加载方式：

每个产品都有一个这样的购买按钮：

<button ng-click="buyTicket(id)" class="btn">Buy Ticket</button>

这就是买入的工作方式：

我将产品/票证的ID传递给我的函数。

AJAX功能将id发布到服务器。
服务器运行数据库查询以根据ID检索产品/故障单信息。
产品/票证信息保存在＆＃34; cart＆＃34;表
AJAX函数返回数据＆＃34; true＆＃34;作为回应。
我播放了这个：

$ rootScope。$ broadcast（＆＃39; TICKET_ADDED＆＃39;，true）;
购物车指令收听广播并向服务器发出AJAX调用以获取购物车数据：

$ scope。$ on（＆＃39; TICKET_ADDED＆＃39;，function（response）{ $ scope.loadCart（）; }）
返回的数据被分配到一个数组并显示在购物车中。

每个用户购物车由随机生成的长度为25的字符串标识。

这就是我的购物车目前的工作原理，我希望有更快，更好的方式来做到这一点。

编辑:(使用调试栏获取这些统计信息）

加载页面时 查询次数：1 内存使用量：12.25 MB 请求持续时间：1.04秒 AJAX请求数量：3

点击购买机票功能时 查询数量：5 内存使用量：12.75 MB 请求持续时间：934.41毫秒 AJAX请求数量：2

Answer 1

您正在使用的方法很好，只是您可能没有使用过缓存。使用缓存＆amp;你将获得良好的速度。还可以在Google Speed Insights上查看服务器响应时间，速度等。它会告诉你如何让它变得更加事实。希望它有所帮助。

VJ

Answer 2

您可以通过引入服务器端和客户端的缓存来提高性能。

服务器端缓存：不是每次都进行数据库查询，而是将对象保留在内存中一段时间。您可以定义“生存时间”。对于一个对象，如果该对象已经过期，则重新查询该数据库。

可能有很多库支持这种功能，但我只是自己构建它，因为它并不复杂。最棘手的部分是确保当多个线程试图修改缓存对象集合时没有任何故障。

使用angular时，客户端缓存是轻而易举的。这来自$http的文档：

要启用缓存，请将请求配置缓存属性设置为 true（使用默认缓存）或自定义缓存对象（使用 $ cacheFactory）。启用缓存后，$ http将存储响应来自指定缓存中的服务器。下次同样的请求如果生成，响应将从缓存中提供而不发送请求服务器。