Вы знаете, что работа по программированию означает - время от времени - вы сталкиваетесь с ошибкой, которую я называю ошибкой Mirage. И решение таких ошибок на самом деле является одной из радостей устранения неполадок при программировании - интересным путешествием по устранению всех ложных срабатываний и поиску истинного виновника.

Мне посчастливилось натолкнуться и решить одну такую ​​ошибку миража сегодня .. Так что я подумал, что поделюсь с вами этим путешествием.

Сегодня один из членов моей команды связался со мной и сказал, что их приложение, использующее PrimeNg Datatables, работает нерационально медленно в IE11 после отображения таблицы данных!

Он представил мне свой анализ, который включал ссылку на ряд проблем с github, в которых утверждалось, что PrimeNg Datatable имеет проблемы с производительностью (даже при меньшем количестве строк и столбцов). Это сезон проблем с производительностью IE11 Angular, и этот конкретный анализ меня обеспокоил. Мне очень понравилась библиотека PrimeNg и ее простота. И это было большим ударом по моей вере в эту библиотеку!

Во время сеанса демонстрации экрана разработчик показал мне невероятное положение своего окна IE ... буквально пошатываясь от нагрузки от рендеринга простой таблицы данных ... и ... и я был убежден в том, что ошибка действительно существует с таблицей данных и каким-то образом PrimeNg - очень хорошая библиотека - каким-то образом проделала супер дрянную работу по разработке своей таблицы данных - которая не может даже загрузить таблицу с 20 строками на 6 столбцов, не загромождая браузер !!

Пока он демонстрировал проблему, я игнорировал другие признаки, на которые мне следовало обратить внимание. например Ему пришлось выбрать пару раскрывающихся списков, прежде чем нажать кнопку, которая выводит данные для Datatable ... и приложение казалось немного вялым, когда он попытался открыть раскрывающийся список, чтобы выбрать из него один элемент. Если бы я поставил под сомнение такое поведение - я бы сэкономил 3–4 часа своей жизни ... но, думаю, в конце я бы не был так взволнован, как сейчас!

Итак ... так как я не мог найти никаких проблем / причин для такого поведения Datatable в IE ... я попросил своего разработчика разрешить мне выполнить мою собственную отладку в моем маленьком уголке. Потратив 2–3 часа на чтение различных описаний проблем на github для PrimeNg datatable и анализ проблем с производительностью таблиц данных ... все проблемы, казалось, были исправлены с помощью v4.1.0, и мы уже были на v4.1.2, и это сбивало меня с толку .

Наконец, я взял последний инструмент в своем арсенале - Раздели и властвуй. Я знал, что если это не сработает, ничего не выйдет! Я начал убирать все особенности DataTable, столбца флажков, встроенного редактирования, выбора ... подозревая, что одно из них вызывает отключение IE! Но независимо от того, что я делал, IE зависал, а загрузка ЦП на моей машине резко возрастала. Даже когда я даже не трогал IE! Да да! И через несколько минут меня осенило ... Что, если я смотрю не на то место, не на то человека? Что, если высокая загрузка ЦП IE (по какой-то другой причине) была THE причиной, влияющей на рендеринг Datatable в IE?

Теперь я начал проверять точное событие, которое запускает IE для высокой загрузки ЦП, и я был напуган, увидев, что IE имеет высокую загрузку ЦП прямо после рендеринга домашней страницы - у которого едва ли было 2 кнопки вместе с кучей статического текста и изображений (кроме заголовка и нижний колонтитул). Забудьте о PrimeNg Datatable, я действительно начал сомневаться в производительности самого Angular на IE11 !!

Опять же, я продолжил свою стратегию разделяй и властвуй, чтобы окончательно изолировать проблему в самом слабом компоненте во всем моем приложении - компоненте нижнего колонтитула, в котором было всего 4–5 ссылок! Если я закомментирую этот компонент ... мир снова станет счастливым местом!

Боже, что происходит в мире! Что, черт возьми, мы могли бы написать в безобидном нижнем колонтитуле, который заставляет все приложение останавливаться !! С тревогой я начал просматривать код шаблона и компонента для нижнего колонтитула ... и вот он ... терпеливо сидел, чтобы я обнаружил, что его реализация ngAfterViewChecked() смеется надо мной.

ngAfterViewChecked автоматически вызывается механизмом рендеринга Angular при изменении свойств компонента. И эта конкретная реализация изменяла одно из свойств компонента через setTimeout(), тем самым инициируя другой вызов ngAfterViewChecked .. который снова вызывал другой вызов ngAfterViewChecked и так далее ... в бесконечном цикле!

Я просто настроил реализацию, чтобы она работала без ngAfterViewChecked и бум, мы были в деле! Мир снова стал счастливым местом! Приложение Angular отлично работало в IE без сбоев! PrimeNG Datatable был высококачественным компонентом без проблем с рендерингом для простого варианта использования, такого как наш! Наши собственные 6 строк кода делали нашу жизнь несчастной!

Мне было весело разобраться в этом, и я надеюсь, что вам тоже!

Я вернусь с другими историями об улучшении производительности / исправлениях для Angular App .. Продолжайте читать. Подпишитесь на мой канал, чтобы получать уведомления о новых историях с моей стороны!

Да, и нажимайте хлопки столько раз, сколько сможете, чтобы побуждать меня писать больше!