Что влияет на нагрузку на странице?

Question

[vladymyr_olegovich]

Клиент написан полностью на js. Запросов на сервер практически нет. Все страницы генерируются через js. Контент подгружается через VK API.
Заметил что в диспетчере задач в хроме на мою вкладку выделяется 300-400 мб памяти.
Много ли ее уменьшить?
Что может влиять на нагрузку? Верстка? JS? Стили?
Может статью по оптимизации подкинете?

В интернете нашел только что-то наподобие "меньше js и css, css сверху, js снизу и тд". Но стилей и скриптов только по 1 файлу.

Кстати все обработчики события прописывал в аттрибутах элемента (onclick="foo()"). Уменьшает ли это как-то нагрузку или разницы нет между таким подходом и прописыванием функции через addEventListener?

Comments

[Dark Hole]

А вы в курсе, что создание страниц через JS очень нагружает комп?

[Stalker_RED]

И в хроме и в фаерфоксе есть встроенный профайлер. Пробовали запускать?

[vladymyr_olegovich]

Stalker_RED: Пробовал, но не совсем понял как им пользоваться. Нужно разобраться будет.
А вообще проблема именно в js? Верстка и стили не могут влиять на это?

[evnuh]

vladymyr_olegovich: все ваши вопросы отпадут сами, когда разберётесь, как пользоваться профайлером. Он настолько крутой, что даже вам вплоть до сисколов всё может расписать.

[Stalker_RED]

vladymyr_olegovich: есть еще анализаторы типа yslow или google page speed, но онии в основном смотрят на скорость подгрузки ресурсов. можете их тоже погонять.

[Stalker_RED]

vladymyr_olegovich:

А вообще проблема именно в js? Верстка и стили не могут влиять на это?

Правильный ответ: откуда я знаю? Вы же ссылку не даете, а телепатия еще недостаточно прокачана.

Answer 1

[Кирилл]

хостинг, меньше анимации

Comments

[vladymyr_olegovich]

css3 анимации? А хостинг какую роль здесь играет?

Answer 2

[weredy]

Кстати по поводу (onclick="foo()") в элементе. Особенно если ты их генериш динамически, может случаться такое что после удаления из dom этого элемента его обработчик продолжает существовать: Продолжает ли листенер onclick (Который прям в тэге) висеть в памяти после удаление объекта?

Answer 3

[doctorcat]

Видеоурок, там же можно скачать оптимизированный шаблон под видео.
https://www.youtube.com/watch?v=p-Sdyj9qnmY
Сам инструмент от гугл, который подскажет где проблемы. И оценит Вашу работу:
https://developers.google.com/speed/pagespeed/insi...