javascript - 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 开发工具(网络选项卡)来查看数据加载的速度。数据加载时间和图像加载时间之间存在一致的延迟，通常约为半秒左右。

我想我应该创建两个 Angular 部分，一个用于图像，然后一个用于数据(标题、副标题、描述)，从而分离出图像并希望使加载时间更快。或者只是将图像编码到 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函数即可。可能会节省一秒钟:)