LINUX.ORG.RU

Что быстрее?

 , , ,


1

2

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

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

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

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

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

Основной поинт жквери в том, что оно обеспечивает переносимость между разными браузерами. С нативным js-кодом надо быть готовым всё это взять на себя.

На сколько сильным будет прирост в производительности «рутинных» операций, например

Чтобы устранить проблему, надо её сначала понять. Поэтому профайлер в руки и вперед!

yoghurt ★★★★★ ()

хорошие приросты можно получить на операциях с DOM. остальное - в пределах погрешности.
а вообще - google://jquery+vs+vanilla+benchmark и все увидишь сам.

dib2 ★★★★ ()

Самые большие тормоза с жквэрей случаются когда ты начинаешь бездумно юзать селекторы. Почитай как они работают и станет понятно, что и где может тормозить. В общем случае старайся юзать id там где это возможно. Избегай селекторов типа '.classname a' - оно найдет сначала все <a> а потом будет проверять какой из них вложен в .classname. А если до .classname у тебя десяток родителей то вообще здец. В таких случаях доставай сначала classname, а потом ищи в нем <a> ну и так далее короче... Погугли статьи по оптимизации - тыщи их.

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

удобные селекты

Не, полезного то, конечно, хватает, но document.querySelector() и document.querySelectorAll() пора бы для себя открыть.

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

Это смотря надо ли ему поддерживать старьё или не надо. Но да, лорчую.

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

Они не во всех браузерах работают - жкверя обеспечивает работу и без их поддержки. Хотя браузеры где они не работают уже и не нужны наверно, но есть одно НО - они не спасают если ты пишешь что-то вроде:

$('.mt40 .field2 a.btn-black.underline').on('click',function(){

Если трудно догадаться, то mt40 - это стиль для задания элементу margin-top в 40px, .field2 - input'ы с выравниваинем по правому краю, btn-black - кнопка черного цвета, а underline внезапно текст без подчеркивания. И вот это селектор кнопки Оформить в корзине. Пример из реального проекта.

Вот это говно абсолютно не поддерживаемо и будет тупить хоть жкверей хоть без нее.

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

я отсылаю код обратно разработчикам кода на основе либы jquery, где задача позволяет писать нативно
бил бы таких по рукам, пропади они пропадом эти jкверисты!

reprimand ★★★★★ ()

Тормозит, потому что скорее всего быдлокод. Смотри на предмет утечек, некорректных обработчиков, селекторов, уборки мусора, ущербной архитектуры.

anonymous ()

Использую jQuery, кучу плагинов, Require.js, Angular, Knockout и много чего еще — у меня не тормозит :)

Анимации лучше делать средствами CSS, и лучше использовать аппаратно-ускоренные свойства. Нативный JS ты задолбаешься делать кросбраузерным и в итоге напишешь свою тормозную jQuery. Селекты и правда медленные, поэтому сохраняй DOM объекты в переменные, вместо того чтобы каждый раз их дергать.

.my-widget {
  opacity: 1;
  transition: all 1s;
}
.my-widget.hide { opacity: 0 }
var $widget = $('.my-widget');
$widget.on('click', function() {
  $widget.addClass('hide');
}

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

Сделай мне аналог

$(document).ready(function() {});
с поддержкой IE 8 и выше. А парсинг JSON?

Black_Roland ★★★★ ()

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

Это все на гране суеверий. Больше всего тормозят операции с DOM. Там где ты получаешь кучу данных с сервера после получения выводи их не по 1 строчке в таблицу а собирай все в переменную и добавляй в DOM за 1 раз.

TDrive ★★★★★ ()

Ну и поиск DOM элементов вынеси из циклов, создавай в начале скрипта переменные с нужными DOM элементами и юзай их.

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

Не, полезного то, конечно, хватает, но document.querySelector() и document.querySelectorAll() пора бы для себя открыть.

Кстати, раз уж в этом треде пошла речь про селекты jQuery, то у меня вопрос: jQuery использует querySelectorAll или нет? А если я напишу так?

var $one = $('.one');
var $two = $one.find('a:first');
А если без :first? querySelectorAll вообще быстрее работает чем селекторы jQuery или нет?

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

Те браузеры уже мёртвые.

Что касается второго пункта, ты наркоман что ли? querySelectorAll() умеет такие селекторы. Любые селекторы, которые понимает браузер.

var buttons = document.querySelectorAll('.mt40 .field2 a.btn-black.underline');
for(var i = buttons.length - 1; i >= 0; --i) buttons[i].addEventListener('click', function(){}, false);
anonymous ()
Ответ на: комментарий от Black_Roland

IE 8

Товарищ некрофил, виндус икспэ уже мёртвое и нафиг никому не упёрлось, даже гуглу и майкрософт.

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

XP это IE 6, Vista — IE 7, 7 — IE 8. Не путай. И некрофил не я, а пользователи.

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

на гране суеверий

Что за гран то?

Тормозить, к слову, может создание большого количества jquery объектов.

anonymous ()

В общем, ТС, выкладывай код :) Так мы не поймем что у тебя тормозит.

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

IE 8 еще жив.

jQuery 2.x поддерживает ие начиная с 9

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

Что за гран то?
Тормозить, к слову, может создание большого количества jquery объектов.

Может но в 99% случаев тормозят селекторы в циклах и добавение кучи данных в таблицу по одному tr

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

jQuery 2.x поддерживает ие начиная с 9

Это отдельная ветка, 1.x еще поддерживается.

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

Некрофилы, попрошу больше двух не собираться, а запустить виндовс апдейтер.

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

Некрофилы, попрошу больше двух не собираться, а запустить виндовс апдейтер.

Кому? Пользователям сайта? Мне к ним домой сходить?

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

Это отдельная ветка, 1.x еще поддерживается.

Я так понимаю это новая версия, а 1.x тихо доживает свой срок. Да и не только jQuery, очень многие js библиотеки отказываются от поддержки ie 8

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

Перевожу для наркоманов: единственная версия винды, которая не может бесплатно поставить себе IE9 — икспэ. Пираты должны страдать.

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

Да и не только jQuery, очень многие js библиотеки отказываются от поддержки ie 8

O_o а можно примеры? Еще от IE 7 не все отказались, а IE 8 в основном поддерживается.

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

Перевожу для наркоманов: единственная версия винды, которая не может бесплатно поставить себе IE9 — икспэ. Пираты должны страдать.

Исчезни, толстячок. Страдают не пираты, а разработчики. У тебя данные реальной статистики браузеров есть? Видимо нет, иначе бы ты не писал чушь.

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

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

Ты, кстати, пропустил пост, где говорилось, что на IE8 положили большой и толстый болт?

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

Разработчики не страдают, они не пишут под это говно. Не считая махровых необновляющихся энтерпрайзеров, да и то те, небось, под IE6 пишут.

Твоя то статистика будет?

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

O_o а можно примеры? Еще от IE 7 не все отказались, а IE 8 в основном поддерживается.

Ну вот в бутстрапе ие8 поддерживается с ограничениями и костылями http://toster.ru/q/67732 в фондейшене таже ситуация http://foundation.zurb.com/forum/posts/241 И это крупные проекты.

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

Конечно умеет. Но работать они будут медленно так же как и в жквери.

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

Сделай мне аналог

// если без очереди ивентов то так
window.onload = function() { ... };

А парсинг JSON?

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

Жквери использует движок селекторов http://sizzlejs.com/

Явно авторы не дебилы и если браузер позволяет юзать нативные, то и в либе юзаются нативные. Оверхед тут будет только за счет всяких «лишних» фич, которые в твоем проекте совершенно не надобны.

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

Ну вот в бутстрапе ие8 поддерживается с ограничениями и костылями http://toster.ru/q/67732

Ну это мелочи, можно сказать поддерживается. Главное работает, а не шашечки :) Тем более мы про JS же.

в фондейшене таже ситуация http://foundation.zurb.com/forum/posts/241

К сожалению не знаю про них ничего, но поверю что крупные.

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

Тормозить, к слову, может создание большого количества jquery объектов.

Плюсую

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

Я так понимаю это новая версия, а 1.x тихо доживает свой срок.

Нет, версию 2 сделали спецом для тех кому по ТЗ не надо пилить поддержку кала мамонтов. Ну и себя избавили от кучи костылей, что положительно сказалось на производительности.

deep-purple ★★★★★ ()

Начали про оптимизацию, но всё кончилось ie 6,7,8. Вот где тормоза. Если бы не эти поделия, то давно бы летало всё. Хочешь скорости - забей на ишака. Используй современные технологии мозиллы, хрома и всё будет ок, поддерживай ишака в урезанном варианте: статика, простой интерактив.

Какая версия jquery? Кажется там после 1.8 надо использовать для скорости. Не забудь внимательно перечитать гайд по миграции со старых версий на новые.

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

Жквери использует движок селекторов http://sizzlejs.com/
Явно авторы не дебилы и если браузер позволяет юзать нативные, то и в либе юзаются нативные. Оверхед тут будет только за счет всяких «лишних» фич, которые в твоем проекте совершенно не надобны.

Это все понятно. Просто в jQuery есть еще всякие .find и :first и не понятно как jQuery с ними поступает, может в таких случаях не используются нативные фичи браузера.

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

всякие .find и :first и не понятно как jQuery с ними поступает

Можно открыть исходники и глянуть, я не смотрел, скорее всего наколдовали чего-нибудь боле-мене нормальное.

deep-purple ★★★★★ ()

Небось в коде сплошные двойные кавычки.

anonymous ()

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

да, в разы.

upd: уточнение — использовать jquery вполне допустимо, но нужно понимать где он тормозит, и использовать менее тормозные вещи, где необходимо. например, для конструирования dom — тот же crel всего в ~3 раза тормознее, чем готовая строка с html, тогда как jquery тормознее раз в 10.

вот тут, например, есть прикольное сравнение производительности http://jsperf.com/dom-creation-libs/10

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

сплошные двойные кавычки

На скорость влиять не должно.

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