angularjs 和 JSON 数据加载缓慢 - 寻求更好的性能

Question

这是我正在尝试做的事情的背景。

我有一个 JSON 文件中我想要管理的大约 70 个产品的列表。该文件由图像数据、标题、副标题和简短描述组成。稍后还会有指向 PDF 文件的链接，因此它也会包含在 JSON 文件中。

这就是 JSON 文件现在的样子：

[
    {
        "category": "oil",
        "image": "/xps-product-list/img/2-STROKE_MINERAL_OIL_GROUP.jpg",
        "title": "Maintenance and Oil Change Kit Spyder",
        "subTitle": "Engine Oils",
        "description": "Complete maintenance right out of the box: O-Ring, XPS oil, Rotax oil filter and instruction sheet"
    },
    {
        "category": "fuel",
        "image": "/xps-product-list/img/2-STROKE_PREMIX_OIL.jpg",
        "title": "XPS Premix Oil",
        "subTitle": "Engine Oils",
        "description": "Superior performance 2-stroke oil developed especially for Rotax 2-stroke engines. Formulated for fast and easy mixing at very cold temperatures. Please contact your nearest dealer for suggested retail prices of oil based products."
    }
]

我正在使用 AngularJS 引入 JSON 数据并使用 ng-repeat 指令遍历数据并显示它：

function AlbumCtrl($scope, $http, $timeout) {
    $scope.url = 'images.json';



    $scope.handleImagesLoaded = function (data, status) {
        $scope.images = data;
        $scope.currentImage = _.first($scope.images);

    }

    $scope.fetch = function () {
        $http.get($scope.url).success($scope.handleImagesLoaded);
    }

    $scope.setCurrentImage = function (image) {
        $scope.currentImage = image;
    }

    $timeout ($scope.fetch, 1000);
}

那么这是带有 ng-repeat 的 HTML：

<div id="image-container" ng-controller="AlbumCtrl">
       <div id="header">
          <div class="product-info">
              <ul>
                  <li ng-repeat="image in images | filter:categories">
                      <img ng-src="{{image.image}}" id="small-prod-img"/>
                       <h2>{{image.title}}</h2>
                       <h3>{{image.subTitle}}</h3>
                       <h4>{{image.description}}</h4>
                  </li>
              </ul>
           </div>
       </div>
   </div>     

我觉得应该有一种更清洁的方法来做到这一点。我遇到的这个问题是图像需要很长时间才能加载。我一直在使用 Firebug 开发工具（网络选项卡）来查看数据的加载速度。加载数据和加载图像的时间之间存在一致的延迟，通常约为半秒左右。

我在想我应该创建两个角度部分，一个用于图像，一个用于数据（标题、副标题、描述），从而分离图像并希望加快加载时间。或者只是将图像编码到 HTML 中，然后将一部分用于其余数据。此外，这是我第一次在 JSON 文件中包含图像数据，所以我不确定这是一个好主意。我在网上找不到任何关于在 JSON 中保存图像数据的好坏建议。

任何建议将不胜感激。

皮特

编辑：忘了提到这将是一个页面，所有产品都加载在同一页面上。我还打算使用类别并创建一个下拉页面，以便用户也可以按类别过滤

编辑 #2 - 这是来自 firefox 开发工具的网络选项卡的图像，您可以清楚地看到加载图像的延迟：

Answer 1

这里有几个选项。评论中已经提到了不会改变站点/应用程序架构的更简单的方法：限制一次加载的图像/数据的数量。我猜你可以将 70 个产品分成每页 9 个（3 x 3 网格）。这样，你可以替换

<li ng-repeat="image in images | filter:categories">

与

<li ng-repeat="image in images | filter:categories | limitTo: 9">

您还必须处理显示下一组结果背后的逻辑，因为上述实现只会显示前 9 个。

改变应用程序架构的更难但更具可扩展性的方法是使用数据库来存储这些信息。我通常使用 MongoDB，因为它以 JSON 格式返回查询，与 Angular.js 很好地集成，并且它的 BSON 格式比 JSON 快得多。

最后，我意识到这条线可能是用于测试的，但如果您希望整体请求更快，您可能需要删除

$timeout ($scope.fetch, 1000);

然后直接调用 fetch 函数。可能会节省一秒钟:)