当 ui-view 更改状态时，ui-view 中的表格会发生什么情况？

Question

我在引导导航选项卡中有一个 ui 视图：

  <div class="container-fluid">
          <ul class="nav nav-tabs">
              <li ng-class="{ active: isActive('/product/list') }"><a data-toggle="tab" ui-sref="productList" ng-click="getProductsList()">Products</a></li>
              <li ng-class="{ active: isActive('/product/keywords') }"><a data-toggle="tab" ui-sref="productKeywordList" ng-click="getProductKeywordsList()">Keywords</a></li>
          </ul>
          <div class="tab-content">
              <div ui-view="productDetails"></div>
          </div>
  </div>

下面的每个选项卡都有单独的视图：

productlist.html

  <div class="jumbotron">
      <div class="tablescroll">
          <img ng-if="dataLoading || !productHasData || !isDataTable" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
          <table ng-show="!dataLoading && productHasData && isDataTable" id="productTable" class="table table-hover">
              <thead>
                    <tr>
                       <th>Product Name</th>
                       <th>Product Description</th>
                       <th>Product Type</th>
                   </tr>
              </thead>
              <tbody>
                   <tr ng-repeat="product in productsList" on-finish-render="ngRepeatFinished">
                      <td>{{ product.productName }}</td>
                      <td>{{ product.productDescription }}</td>
                      <td>{{ product.productType }}</td>
                   </tr>
             </tbody>
           </table>
       </div>
   </div>

关键字列表.html

 <div class="jumbotron">
      <div class="tablescroll">
          <img ng-if="dataLoading || !productKeywordHasData || !isDataTable" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
          <table ng-show="!dataLoading && productKeywordHasData && isDataTable" id="productKeywordTable" class="table table-hover">
               <thead>
                  <tr>
                      <th>Product Name</th>
                      <th>Keyword</th>
                      <th>Comments</th>
                  </tr>
              </thead>
              <tbody>
                  <tr ng-repeat="productKeyword in productKeywordsList" on-finish-render="ngRepeatFinished">
                      <td>{{ productKeyword.productName }}</td>
                      <td>{{ productKeyword.keyword }}</td>
                      <td>{{ productKeyword.comments }}</td>
                 </tr>
              </tbody>
         </table>
     </div>
 </div>

每个视图呈现大约数万条数据。最初加载每个视图需要时间。但是，当每个数据都已加载时，更改选项卡也需要时间。有时（通常在第三个选项卡更改时）我的浏览器由于内存不足而崩溃：

当应用程序更改状态时，ui-view 中的表会发生什么情况？看起来数据仍然存在。但是 ng-repeat 还会被触发吗？

最好的方法是什么？当我改变状态时，我应该清理另一个表吗？

对于这种情况，ngRoute 是不是更好的选择？

Answer 1

每个视图渲染大约数万条数据。

这很可能是你的问题。

从用户体验的角度来看，用户如何能够管理 10k+ 屏幕元素？在我看来，这种类型的数据应该使用分页和过滤器，而无需考虑您的确切用例。

接下来，当观察者超过 2k 时，Angular 的性能确实开始下降（这是任意的，但一个好的经验法则）。

虽然ui-view 将在每次视图更改时被清理，但您还必须注意数据可能仍然在您的服务中“活动”。此外，在销毁旧视图之前，可能会附加新视图。

您应该开始检查您的页面以获取一些基准（内存、# watchers、渲染时间）以了解您的代码更改将如何改进您的设计。