LINUX.ORG.RU

Что быстрее?

 , , ,


1

2

Всем доброго времени суток!

Так уж получилось, что в последнее время много приходится писать на стороне клиента (javascript). До сегодняшнего дня активно использовал библиотку jquey и горя не знал. Тут тебе и удобные селекты, и $.ajax(), и $.each(), и куча визуальных эффектов и много всего другого.

Не так давно я стал замечать некоторые тормоза своего приложения. Мало того, что приходится часто обращаться к серверу и вытягивать огромные коллекции данных, так еще интерфейс еле ворочается! Но если с оптимизацией серверной логики все более-меннее понятно, то как можно оптимизировать клиентскую часть мне пока еще не очень ясно.

Немного погуглив, узнал, что многие веб-девелоперы, если того не требуют обстоятельства, стараются использовать нативный javascript-код, вместо каких-либо библиотек, подобных jquery. Посему, у меня вопрос, так сказать, к знатокам «клиентского веба», сильно ли можно выйграть в производительности, использую средства «чистого» js, без использования сторонних оберток наподобие JQuery?

На сколько сильным будет прирост в производительности «рутинных» операций, например: селектов, отправки ajax-запросов, парсинга json, обход свойств объектов, поиск в массиве и т.д. ?

Ответ на: комментарий от Black_Roland

Перезапишется

Ну яш написал что «если без очереди», а так тоже - написать одну обертку (или стырить где-то удобное решение) строк в 10-30 и юзать везде.

deep-purple ★★★★★
()
Ответ на: комментарий от anonymous

Давай уже свою статистику, где к тебе ходят с IE8.

Подтвержденной статистики скриншотами не будет, у меня доступа нет, но я ее видел. Что-то около 5-10% в сентябре.

Black_Roland ★★★★
()
Ответ на: комментарий от Black_Roland

Ко мне и с ИЕ7 ходят, некрофилы всякие, или корпоративная политика их заставляет сидеть на этих мамонтах.

deep-purple ★★★★★
()
Ответ на: комментарий от deep-purple

Ко мне и с ИЕ7 ходят, некрофилы всякие, или корпоративная политика их заставляет сидеть на этих мамонтах.

Ну на этих мы уже забили, таких уже совсем мало. И то наверное боты.

Black_Roland ★★★★
()

Скорее всего прирост будет незаметен. А вот прирост количества кода и багов будет заметен.

Legioner ★★★★★
()

Почему б не запустить профайлер? Небось какую-нибудь тупую ошибку сделали типа обработчика скроллера без тротлинга, а теперь жикваери виновата.

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

Есть много статей, как использовать devtools для отладки поизводительности.

Vit ★★★★★
()
Ответ на: комментарий от terminator-101

успокоил себя? я рад
давай еще реплику, вдруг тебе еще лучше станет

reprimand ★★★★★
()
Ответ на: комментарий от Deleted

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

Black_Roland ★★★★
()
Ответ на: комментарий от theNamelessOne

Его то через window, то через document, то attachEvent, то window.load. Не всеми браузерами поддерживается и разные события по разному вешаются (не помню какие как и в каких браузерах). Гемор в общем, jQuery стирает различия. https://github.com/requirejs/domReady/blob/master/domReady.js

Black_Roland ★★★★
()
Последнее исправление: Black_Roland (всего исправлений: 1)

Всем спасибо за советы, дельные и не очень:).

Поддрежка IE до 9 версий не нужна, ибо в проекте активно используется canvas, а IE <= 8 без сторонних костылей канвас не поддерживает.

Переписал все DOM-манипуляции с JQuery на нативный JS, без каких-либо «оберток», заменил $.ajax() его нативным аналогом, $.each() на for и т.д. А там где уж очень хотелось поюзать JQuery'вские функции заюзал Zepto.js (http://zeptojs.com/). Вобщем, после такой нехитрой оптимизации, время работы некоторых функций, судя по выводам профайлера, уменьшилось раз в 5 - 10, а некоторых функций еще больше)!

Я понимаю, что в моем случае виноват был не столько Jquery, сколько мой говнокод), но и библиотека привносила свои «5 копеек».

KernelPanic
() автор топика
Ответ на: комментарий от KernelPanic

IE <= 8 без сторонних костылей канвас не поддерживает

Используй SVG/VML, бери raphaeljs и работай спокойно.

deep-purple ★★★★★
()
Ответ на: комментарий от Black_Roland

IE9+ addEventListener, так что на сегодня не актуально. Если меньше, то просто «прошиваешь» старым addEventListener на IE'шном attachEvent'е, благо условные комментарии старые версии умеют.

Deleted
()
Ответ на: комментарий от deep-purple

Если бы да кабы, да во рту росли грибы. Некрофилия оплачивается по отдельному тарифу и затыкается полифиллами.

Deleted
()
Ответ на: комментарий от Deleted

И все же некрофилия имеет место быть. Вот ты докопалсы до того как я написал тот кусок кода - да, правильно было бы вот так написать:

function parseJSONstring(str) {
    var data;
    try {
        data = (JSON && JSON.parse)
            ? JSON.parse(str)
            : eval('(' + str + ')');
    } catch (err) {
        data = null;
    }
    return data;
}
deep-purple ★★★★★
()
Ответ на: комментарий от deep-purple

Кого имеет, тем и страдать :) Просто eval() это та ещё дырень. А JSON уж больно часто извне получают…

Deleted
()

Сомневаюсь что шибко быстрее, памяти кушает да, меньше. Не нужно кучу объектов создавать.
У себя потихоньку выпиливаю jquery(уже выпилил) и вовсю юзаю querySelector. Главное ж кешировать результаты, юзать делегирование там где оно нужно и ничего тормозить не будет.

ritsufag ★★★★★
()
Ответ на: комментарий от deep-purple

В каком смысле как? Если ты получаешь JSON извне, то eval() выполнит любой код, который найдёт.

Deleted
()
Ответ на: комментарий от Deleted

Инлайновый говнокод, использующий jQuery. Если jQuery подключить внизу, то говнокод не работает.

Нет никакого смысла не использовать jQuery, это удобно и не тормозит.

Black_Roland ★★★★
()
Последнее исправление: Black_Roland (всего исправлений: 1)
Ответ на: комментарий от Black_Roland

Инлайновый говнокод

А, героически создаём себе проблемы :}

Нет никакого смысла не использовать jQuery, это удобно и не тормозит.

Да ты упоротый. Бывает смысл использовать jQuery, но использовать всегда смысла никакого нет. А потом у них браузеры память жрут. Большое количество создания и удаления объектов jQuery у тебя тоже «не тормозит»? Видимо люди, которые для критичных участков обходятся DOM функциями, просто хернёй занимаются :} Also, на мобильных устройствах твоё «не тормозит» может, внезапно, оказаться совсем другим.

Deleted
()
Последнее исправление: Mystra_x64 (всего исправлений: 2)
Ответ на: комментарий от Deleted

А, героически создаём себе проблемы :}

Нравится переписывать многолетнее гавно? Фетиш?

Большое количество создания и удаления объектов jQuery

А кто сказал что это так? А с чего ты решил что эта операция требует больших ресурсов? Можно вообще создать только $('html') и вешать события через него:

var $html = $('html');
$html.on('click', '#button', function() {});
Может мне jQuery надо для AJAX запросов, $.each или еще чего-нибудь кроме DOM? Предлагаешь все на нативе писать? А сколько времени на это уйдет? А зачем тогда по твоему вообще нужны библиотеки?

но использовать всегда смысла никакого нет

Отлично, а что делать когда сначала jQuery вроде был не нужен, а потом понадобился? Если писать только hello world'ы, то конечно jQuery не нужен.

А потом у них браузеры память жрут

Я на это не жаловался.

Also, на мобильных устройствах твоё «не тормозит» может, внезапно, оказаться совсем другим

У современных телефонов хорошая производительность. Всякие Firefox OS, Tizen даже на слабом железе бегают.

Black_Roland ★★★★
()
Последнее исправление: Black_Roland (всего исправлений: 4)
Ответ на: комментарий от Black_Roland

что делать когда сначала jQuery вроде был не нужен, а потом понадобился?

Подключить и использовать. Искренне ваш, вр.и.о. К.О.

heilkitty ★★
()
Последнее исправление: heilkitty (всего исправлений: 1)
Ответ на: комментарий от Black_Roland

Можно вообще создать только $('html') и вешать события через него

Ну во-первых тогда уж $(document), а во вторых ты в курсе что клик будет срабатывать при любом клике на документе? Т.е каждый раз будет проверка на #button?
Для современных браузеров достаточно написать парочку хелперов и не париться http://youmightnotneedjquery.com/

ritsufag ★★★★★
()
Последнее исправление: ritsufag (всего исправлений: 2)
Ответ на: комментарий от Black_Roland

Я на это не жаловался.

Ты — нет, а вот у пользователей потом стулья горят. По остальным пунктам тебе уже заметили :}

У современных телефонов хорошая производительность.

Это такой тонкий намёк, что заряжать каждый день телефон нормально и хорошо, а лучше 2 раза в день? :}

Deleted
()
Ответ на: комментарий от deep-purple

вот живой пример

> eval('(console.log(1),  console.log(2))');
1
2
undefined

Можно в eval зафигачить, например, document.location = "http://мой-фишинговый-сайт.рф/"

heilkitty ★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.