Меня очень заинтриговало чрезмерное количество "составных слоев", "пересчитать стиль" и затем "обновить дерево слоев" в одном из наших веб-приложений. Мне интересно, что их вызывает здесь.
Если вы укажете свой Chrome на один из наших быстро движущихся потоков, скажите https://choir.io/player/beachmonks/github и включите свой "счетчик FPS", вы увидите, что приложение может достигать около 60 кадров в секунду в большинстве случаев, когда мы находимся на вершине.
Однако, как только я прокручиваю несколько сообщений и оставляю экран таким, какой он есть, скорость FPS резко падает примерно до 10 или даже ниже. Что здесь делает код, так это то, что он отображает каждое входящее сообщение, добавляет его вверху и прокручивает список вверх по Npx, который является высотой нового сообщения, чтобы сохранить позицию просмотра в целости.
(Я понимаю, что scrollTop приведет к недействительности экрана, но я тщательно заказал операции, чтобы избежать разметки разметки. Я также знаю об синхронной перерисовке, которая происходит каждую секунду, вызванная jquery.sparkline, но это не имеет отношения к этому обсуждение.)
Вот что я вижу, когда пытаюсь его профилировать. .
Как вы думаете, может быть причиной большого количества операций с слоем?