Pagination's在AngularJS应用中的性能

Pagination's performance in AngularJS applications

本文关键字：应用 性能 AngularJS Pagination      更新时间：2023-09-26

我写了一个AngularJS应用程序，它从数据库中列出了几千条记录。然后我使用limitTo过滤器创建前端分页。

因此，我一次加载所有记录并动态分页，因此结果是: 
DOM loading ~5s
page loading ~5.2s

DOM加载时间太长，我能做些什么?

我正在考虑后端分页，但后来我不能做动态搜索与所有记录，我不能做动态排序等，因为我切片的列表在PHP级别之前javascript加载。

还有其他解决方案吗?

view.tpl: 

some HTML
<script type="text/javascript">
   var data = {$data};
</script>
<script src="controller.js">

这就是我如何将变量从PHP控制器传递到AngularJS控制器。因此，页面源包含庞大的数据数组。

您是否尝试在后端格式化SQL结果(紧凑json响应)?也许你可以使用webstorage存储所有的结果，并使一次请求得到它。https://github.com/fredricrylander/angular-webstorage

DOM加载时间仅取决于(或至少应该)所显示的元素。如果你有5000个对象，但只显示10个-它应该工作得很快。

  • 你应该尝试使用引导分页:https://angular-ui.github.io/bootstrap/

  • 或者你可以手动完成-在html中使用过滤器对于大数组通常是坏主意，只需在控制器中创建filteredArray并在需要时更新它

如果你在页面上固定项目的数量(即你想要200)，使后端分页不会改善你的DOM渲染时间

相关文章：