| __он_самый__ | 28.11.2014 00:47 |
AnglarJS это здорово!
Но при работе с большими списками, содержащими сложной структуры данных, он может начать работать очень медленно! Мы столкнулись с этой проблемой при переносе нашей административной панели на AngularJS. Она должна была работать без задержек при отображении около 500 строк. Но на первое отображение уходило до 7 секунд. Ужасно!
Мы обнаружили два узких места в нашей реализации. Одно было связано с директивой ng-repeat, а другое с применением фильтров.
Эта статья рассказывает о результатах наших опытов с различными подходами по решению, или смягчению, возникшей проблемы с производительностью. Это даст вам идеи и советы, куда вы можете приложить свои силы, а какие подходы все-таки не стоит использовать.
Почему директива ng-repeat медленно работает с большими списками?
Директива ng-repeat начинает работать медленно, если осуществляется двусторонняя привязка к спискам, имеющим более 2500 элементов. Вы может почитать об этом подробнее в посте Misko Hevery. Это объясняется тем, что в AngularJS отслеживаются изменения способом «грязной проверки». Каждое отслеживание изменений будет занимать некоторое время, что для больших списков со сложной структурой данных выливается в замедление работы вашего приложения.
==========================================
Я просто оставлю это здесь. сколько занимает времени обсервинг массива из 100к элементов репитером. к слову, в кадре 16 миллисекунд.
в хроме используются обсерверы по этому моментально
в осталных используется грязная проверка используя хитромудрые алгоритмы по этому так быстро
в ватчер приходит список минимальных сплайсов чтобы получить из исходного массива измененный, короче список изменений.
Но при работе с большими списками, содержащими сложной структуры данных, он может начать работать очень медленно! Мы столкнулись с этой проблемой при переносе нашей административной панели на AngularJS. Она должна была работать без задержек при отображении около 500 строк. Но на первое отображение уходило до 7 секунд. Ужасно!
Мы обнаружили два узких места в нашей реализации. Одно было связано с директивой ng-repeat, а другое с применением фильтров.
Эта статья рассказывает о результатах наших опытов с различными подходами по решению, или смягчению, возникшей проблемы с производительностью. Это даст вам идеи и советы, куда вы можете приложить свои силы, а какие подходы все-таки не стоит использовать.
Почему директива ng-repeat медленно работает с большими списками?
Директива ng-repeat начинает работать медленно, если осуществляется двусторонняя привязка к спискам, имеющим более 2500 элементов. Вы может почитать об этом подробнее в посте Misko Hevery. Это объясняется тем, что в AngularJS отслеживаются изменения способом «грязной проверки». Каждое отслеживание изменений будет занимать некоторое время, что для больших списков со сложной структурой данных выливается в замедление работы вашего приложения.
==========================================
Я просто оставлю это здесь. сколько занимает времени обсервинг массива из 100к элементов репитером. к слову, в кадре 16 миллисекунд.
в хроме используются обсерверы по этому моментально
в осталных используется грязная проверка используя хитромудрые алгоритмы по этому так быстро
в ватчер приходит список минимальных сплайсов чтобы получить из исходного массива измененный, короче список изменений.