Что происходит с таблицей в ui-view при изменении состояния ui-view?

Question

У меня есть UI-вид внутри начальной загрузки Nav вкладок:

<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> 

keywordlist.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> 

Каждый вид отображает около десятков тысяч данных. Для загрузки каждого представления требуется время. Но когда данные для каждого уже загружены, изменение вкладок также потребует времени. А иногда (обычно на 3-й смене вкладки) мой браузер аварии из-за нехватки памяти:

Что происходит за стол в Ui-зрении, когда приложение изменяет состояние? Похоже, что данные все еще там. Но продолжает ли ng-repeat срабатывать?

Каков наилучший способ для этого? Должен ли я очищать другую таблицу, когда меняю состояние?

Является ли ngRoute лучшим выбором для этого случая?

Answer 1

Каждый вид отображает около десятков тысяч данных.

Скорее всего, это ваша проблема.

С точки зрения UX, как пользователь может управлять элементами экрана 10k +? Этот тип данных должен использовать разбиение на страницы и фильтры, на мой взгляд, не задумываясь о вашем конкретном прецеденте.

Далее, производительность углов действительно начинает деградировать выше около 2k наблюдателей (это произвольно, но хорошее эмпирическое правило).

Пока ui-view будет очищен при каждом изменении вида, вы также должны знать, что данные могут оставаться «живыми» в ваших службах. Кроме того, может быть момент, когда новое представление добавляется до уничтожения старого представления.

Вы должны начать проверку своей страницы, чтобы получить контрольные цифры — память, # наблюдателей, время рендеринга —, чтобы узнать, как ваши изменения кода улучшат ваш дизайн.