Как читать и оптимизировать профиль Javascript?

Question

У меня есть процесс, который обновляет сотни строк в сетке через jQuery. Это занимает слишком много времени, поэтому я пытаюсь выяснить, где в первую очередь узкое место, чтобы я мог работать там. Я попробовал инструмент профилирования Chrome, но мне трудно понять его (см. Скриншот). Как мне выяснить, в чем проблема, так как я и тотал совершенно разные?

Answer 1

Узким местом здесь почти наверняка является DOM (методы, встроенные в браузер), а не какой-либо конкретный код JS.

Если вы отображаете достаточно данных, чтобы обновить его, браузер блокируется на несколько секунд,вы должны рассмотреть возможность использования виртуальной сетки прокрутки.Мой любимый SlickGrid .

Вместо того, чтобы просто рендерить гигантскую таблицу, вы сохраняете свой набор данных в гораздо более легких JS-объектах в памяти.(Который, следовательно, может быть изменен и отсортирован на порядок быстрее, чем обновления, основанные на DOM, которые вы в настоящее время делаете.) SlickGrid отображает элементы DOM только для той части таблицы, которую вы просматриваете, так что нагрузка на них намного меньшев браузере.

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

Answer 2

self - сколько времени было потрачено на выполнение работы непосредственно в этой функции.

total - это сколько времени было потрачено на эту функцию и на вызываемые ею функции.