角度2性能問題在IE瀏覽器

我的角度2應用程序下拉菜單在Chrome中反應良好，但它在IE.I切換到prod模式非常緩慢，我用core-js而不是es6-shim.js但仍然IE下拉速度太慢。請幫助我如何提高IE中角度2下拉的性能。角度2性能問題在IE瀏覽器

2016-12-07 Pavan Jois

你在說哪個版本的IE？ – lin

幾乎是這個版本，如果在加載應用程序或用戶交互時表現較差，您能否精確定位？ –

IE 11.我正在使用ui-select下拉菜單（與搜索過濾器一起下拉菜單）。它需要花費很長時間才能在IE中加載，但在Chrome中速度足夠快。 –

我遇到過同樣的問題，在拋出所有我能想到的東西之後，我得出結論：IE只是不想在使用選擇時處理更新過濾器。

我的解決辦法是改變你的選擇看起來像這樣：

<select class="selectList" ng-model="selectedIds[$index]" ng-options="sample.id as sample.value for sample in samples | myfilter:selectedIds:$index" data-ng-change="fixIE()"></select>

他們現在有一個類，並在他們的NG-變化。然後在你的控制器做代碼這個有趣的一點：

$scope.fixIE = function(){ 
    //here write code to check if IE so the other browsers don't get this ugly hack. 
    var selectLists = document.querySelectorAll(".selectList"); 
    for(var x = 0;x < selectLists.length; x++){ 
     selectLists[x].parentNode.insertBefore(selectLists[x], selectLists[x]); 
    }  
};

同樣可以在angular2做，希望這有助於。只要試一試。同樣的事情也到這個..

@Component({ 
    (...) 
    template: ` 
    <select [ngModel]="selectedIds[$index]" (ngModelChange)="onChange($event)"> 
     <option *ngFor="#sample of samples">{{sample}}</option> 
    </select> 
    `) 
    export class SomeComponent { 

    onChange(newValue) { 
     console.log(newValue); 
     // ... do other stuff here ... 
    } 
    }

來源

2016-12-07 14:51:54 Varsha

對不起。解決方案不適合我。請給我建議替代解決方案。 –

如果你正在使用angular1.x，我會給你我的指令代碼，你可以試試這個 - var selectPicker = $ timeout（function（）{ $（element）.find（'。bs select'）。selectpicker（{iconBase：'fa'， tickIcon：'fa-check' }）; $（element）.find（'。bs-select'）。selectpicker（'render'）; $（element）.find（'。bs-select'）。selectpicker（'val'，listOfItems）; $（element）.find（'.bs-select'）。selectpicker（'refresh'）; } ，0）;' – Varsha

我正在使用Angular 2.我沒有得到如何解決這個問題。 –

1）這不是一個永久性的修復，但你可以做一些像創建一個NG：如果殘疾人所在角UI的選擇如果對象是空的（例如，沒有選項）。所以對於渲染用戶的指令必須按下一個按鈕然後用戶界面呈現。這可以防止在頁面上呈現大約80％的UI選擇。

下面是一些示例代碼

<ui-select ng:if="user.hasExtensions" 
/// 
</ui-select> 
<span ng:if="!user.hasExtensions" 
     ng:click="user.hasExtensions = true; refreshPlaceholder();" 
     class="btn-info-callinize"> 
    <i class='icon-plus-sign icon-white'</i> 
</span>

2）這個黑客其他如果是你LISTOFITEMS太大..你可以使用| limitTo: 100

3）要激活下拉列表中選擇只有在輸入x字母后纔有選擇：

<ui-select-choices refresh="checkList($select.search)" refresh-delay="400" repeat="item.id as item in listOfItems | filter: {list: $select.search} | limitTo: limitlistsearch">

In contr oller

$ scope.limitlistsearch = 100; //初始化沒有限制：看到先前選定值

$scope.checkList = function (stringTyped) { 
     if (stringTyped.length >= 2) { 
      $scope.limitlistsearch = 50; 
     } 
     else { 
      $scope.limitlistsearch = 0; 
     } 
    }

4）請參閱本鏈接（威力幫助）https://github.com/inetsys/ng-formalizer/commit/e18630297a50efaf0bb629cb26cfc6eea1d841d5

5）切換到另一個組件https://github.com/machineboy2045/angular-selectize

缺點是它是基於Jquery的組件的包裝，並且不提供所有主題選項。

優點是 - 指令非常小，配置大多不在HTML中，但在控制器中，所以HTML更容易閱讀，配置和重用。它也不會繼承Angular性能問題。

來源

2016-12-08 22:56:39 Varsha

角度2性能問題在IE瀏覽器

回答

相關問題