Как оптимизировать события "Разбора HTML"?

При профилировании моего webapp я заметил, что мой сервер быстро освещен, и Chrome, похоже, является узким местом. Я запустил инструмент разработчика Chrome "timeline" и получил следующие номера:

Я также запускал несколько console.log(performance.now()) из основного файла Javascript, и время загрузки на самом деле ближе к 700 мс. Это довольно шокирует то, что я делаю (пустой стол и 2 кнопки).

Я продолжил свое исследование, сверлив в "Сценарии":

(Я не перечислял меньшие скрипты, но они учитывали оставшееся время). Я не знаю, что с этим делать.

Ответы

Ответ 1

Для всего цинизма, который получил этот вопрос, я удивлен, обнаружив, что все они неправы.

Я обнаружил, что вывод профайлера Chrome трудно интерпретировать, поэтому я перешел к console.log(performance.now()). Это привело меня к обнаружению, что на странице было загружено 1400 мс, чтобы загрузить файлы Javascript, прежде чем я даже вызову одну строку кода!

Это не имело большого смысла, поэтому пересмотренный инструмент профайлера Chrome Javascript. Порядок сортировки по умолчанию Heavy (Bottom Up) не показал ничего значимого, поэтому я переключился на режим Chart. Это показало, что многие плагины браузера загружаются, и они занимают гораздо больше времени, чем я ожидал. Поэтому я отключил все плагины и перезагрузил страницу. Угадай, что? Время загрузки сократилось до 147 мс.

Это право: плагины браузера отвечали за 90% времени загрузки!

Итак, чтобы заключить:

JQuery существенно медленнее, чем родные API, но это может быть неуместным в великой схеме вещей. Вот почему хорошие программисты используют профилировщики для поиска узких мест, а не для слепого слежения. Не доверяйте людям субъективную предвзятость или "ощущение кишки". Если бы я следовал за людьми, советуем оптимизировать JQuery, это не сделало бы заметной разницы (я бы сэкономил 100 мс).
Инструмент timeline не сообщает точное общее время. Пропустите красивые графики и используйте следующие инструменты...
Начните просто. Используйте console.log(performance.now()) чтобы проверить основные допущения.
Профайлер Javascript Chrome
- Chart предоставит вам хронологический обзор выполнения Javascript.
- Tree (Top Down) позволит вам развернуть методы, по одному уровню за раз.
Отключите все плагины браузера, перезапустите браузер и повторите попытку. Вы были бы удивлены, как много накладных плагинов вносит свой вклад!

Надеюсь, это поможет другим.

PS: Есть хорошая статья на http://www.sitepoint.com/jquery-vs-raw-javascript-1-dom-forms/, которая помогает, если вы хотите заменить jQuery на собственные API.

Ответ 2

Я думаю, что события Parse HTML происходят каждый раз, когда вы изменяете внутренний HTML элемента, например

$("#someiD").html(text);

Обычный стиль заключается в многократном добавлении элементов:

$.each(something, function() {
    $("#someTable").append("<tr>...</tr>");
});

Это проанализирует HTML для каждой добавленной строки. Вы можете оптимизировать это с помощью:

var tablebody = '';
$.each(something, function() {
    tablebody += "<tr>...</tr>";
});
$("#someTable").html(tablebody);

Теперь он анализирует всю вещь сразу, вместо того, чтобы повторно разбирать ее.