8 трюков для ускорения JavaScript


Содержание

12 хитростей JavaScript, которых вы не найдете в большинстве уроков

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

С тех пор я пополняю этот список, и в этой статье я поделюсь 12 советами, которые кажутся мне особенно умными или полезными.

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

Итак, вот 12 изящных способов написания более лаконичного и производительного кода.

1. Фильтр уникальных значений

Тип Set был введен в ES6, и наряду с оператором «spread» . мы можем использовать его для создания нового массива с уникальными значениями.

До ES6 фильтрация уникальных значений потребовала бы гораздо больше кода, чем сейчас!

Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!)

2. Кешируем длину массива в циклах

Когда нас учат циклам for, нам рекомендуется следовать этой стандартной структуре:

Однако, используя этот синтаксис, цикл for пересматривает длину массива при каждой итерации.

Иногда это может быть полезно, но в большинстве случаев лучше и эффективнее кэшировать длину массива, так что к ней нужно обратиться только 1 раз. Мы можем сделать это, определив переменную length

Этот код почти такой же лаконичный, как и приведенный выше, но он работает таким образом, что при увеличении размера массива мы не теряем время на перепроверку array.length .

3. Вычисление короткого замыкания

Тернарный оператор — это быстрый способ написать простые (а иногда и не очень простые) условные конструкции, например:

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

Как это работает

Допустим, мы хотим вернуть только один из двух или более вариантов.

Использование && вернет первое false или ‘ложноe’ значение. Если каждый операнд оценивается как true, будет возвращено последнее вычисленное выражение.

Использование || вернет первое true или ‘правдивоe’ значение. Если каждый операнд оценивается как false , будет возвращено последнее вычисленное выражение.

Пример 1

Допустим, мы хотим вернуть свойство length переменной, но мы не знаем её тип.

Мы можем использовать оператор if/else оператор для проверки, что foo это приемлемый тип, однако это может быть довольно долго. Короткое замыкание позволяет сделать это таким образом:

Если переменная foo имеет свойство length, оно будет возвращено. В противном случае вернется length пустого массива: 0.

Пример 2

Были ли у вас проблемы с доступом к вложенному объекту? Вы можете не знать, существует ли у объекта свойство или одно из под-свойств, и это может вызвать неприятные ошибки.

Допустим, мы хотели получить доступ к свойству data , которое находится внутри this.state , но data — undefined до тех пор, пока программа не вернет респонз.

В зависимости от того, где мы используем этот код, вызов this.state.data может помешать запуску нашего приложения. Чтобы обойти это, мы могли бы обернуть все в условное выражение:

Это кажется довольно скучным. Оператор «или» предоставляет более краткое решение:

Мы не можем изменить код выше, чтобы использовать && . Утверждение ‘Fetching Data’ && this.state.data вернется this.state.data независимо от того, равно оно undefined или нет. Это потому, что ‘Fetching Data’ «правдиво», и поэтому && всегда будет пропускать его, когда он указан первым.

Новая предлагаемая фича: опциональная последовательность

В настоящее время существует предложение разрешить «опциональную последовательность» при попытке вернуть свойство, находящееся глубоко в древовидной структуре. Согласно предложению, символ вопросительного знака ? может использоваться для извлечения свойства, только если оно не null

Например, мы могли бы привести свой пример выше к this.state.data?.() — вернет data, только если оно не null .


Или, если мы сомневаемся в переменной state , мы могли бы вернуть this.state?.data .

Предложение в настоящее время находится на Stage 1 в качестве экспериментальной функции. Вы можете прочитать об этом тут, и можете использовать его в своем JavaScript через Babel, добавив @babel/plugin-proposal-optional-chaining в ваш .babelrc файл.

4. Преобразование в Boolean

Помимо обычных логических значений true и false, JavaScript также обрабатывает все другие значения как «правдивые» или «ложные».

Если не указано иное, все значения в JavaScript являются «правдивыми» за исключением 0, «», null, undefined, NaN и, конечно false — которые являются «falsy».

Мы можем легко переключаться между true и false, используя отрицательный оператор !, который также преобразует тип в «boolean» .

Этот тип преобразования типов может быть полезен в условных выражениях, хотя единственная причина, по которой вы бы решили определить false как !1, это если бы вы играли в code golf!

5. Преобразование в String

Чтобы быстро преобразовать число в строку, мы можем использовать оператор конкатенации + , за которым следует пустой набор кавычек «» .

6. Преобразование в Number

Обратное можно быстро сделать с помощью оператора сложения + .

Это также может быть использовано для преобразования boolean в числа, как показано ниже:

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

Тильда, известная как «побитовый оператор НЕ», является оператором, эквивалентным -n — 1 . Так, например,

Использование двух тильд подряд отрицает операцию, потому что — ( — n — 1) — 1 = n + 1 — 1 = n . Другими словами,

Хотя я не могу придумать много вариантов использования, но побитовый оператор NOT также можно использовать в логических значениях:

7. Быстрое возведение в степень

Начиная с ES7 стало возможным использовать оператор возведения в степень ** как сокращение для степеней, что быстрее, чем запись Math.pow(2, 3). Это простой материал, но он попал в список, потому что не так много учебных содержит этот оператор!

Цукерберг рекомендует:  5 редакторов кода для JavaScript

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

До ES7 сокращение существовало только для степеней с основанием 2 с использованием оператора побитового сдвига влево FrontEndDev и Web Stack в Telegram, чтобы не пропустить самое интересное из мира Web!

Web notes

Ускорение кода на JavaScript

Оптимизация JavaScript — это один из важнейших пунктов разработки проекта. Иногда мы просто не задумываемся, что один и тот же код можно написать по разному, и скорость выполнения этого кода соответственно может быть разной!

1) Общеизвестный факт, что работа с DOM деревом — это очень трудоемкий процесс для браузера. Но не каждый знает, как можно уменьшить количество обращений к DOM . Просто сохраните нужный элемент в переменную и дальше работайте уже непосредственно с ней:

В предыдущем примере видно, что обращении к DOM будет происходить в каждой итераций цикла по два раза.

После оптимизации этого кода, получим:

Как видим, теперь обращений к DOM стало в 2 раза меньше. А прирост в скорости – больше!

2) Почти в каждом серьезном проекте есть работа с циклами, но мало кто задумывается, что и здесь можно написать код с меньшим числом вычислений, а значит и ускорить его работу. Например, есть массив:

Теперь пройдемся циклом по его элементам:

На первый взгляд все просто и обычно, но на самом деле, с каждой итерацией мы заново вычисляем длину массива names, тем самым тратим на это драгоценные микросекунды! Лучше сделать так:

Вычислив единожды размер массива names, заносим это значение в переменную nameslen и больше не тратить на это время.

Еще есть один способ избавиться от операции сравнения, и если логика работы скрипта позволят, то лучше делать так:

И это еще не все тонкости оптимизации.

Добавлено — Суббота, Ноябрь 28th, 2009, 13:26 Раздел — Заметки. Подписаться на RSS 2.0. Оставьте комментарий, или trackback с вашего сайта.


Как ускорить работу JavaScript?

08.07.2009, 10:58

JavaScript слайдера блокирует работу таймера
Здравствуйте! Подскажите, такая проблема: вставил на сайт javascript слайдера, после этого перестал.

Задачи на работу с элементами страницы в JavaScript
Задание №1. Составить программу вычисления функции с использованием методов объекта Math y=.

Задачи на работу с элементами страницы в JavaScript
Создайте два инпута, кнопку и спан. При нажатии на кнопку содержимое двух инпутов перемножается и.

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

Как ускорить работу?
Прога ещё не доработана, сейчас интересует именно графический режим, когда нажимается клавиша 1-4.

08.07.2009, 12:39 2

Я бы пытался бороться за скорость следующим образом: Комбобокс ведь заполняется в цикле. Если внутри цикла стоит document.all.box1.add() то я бы вынес из цикла нахождение объекта d1 = document.all.box1, а внутри цикла оставил бы d1.add(). Нахождение нужного объекта в структуре документа связано с просмотром всего файла, и естественно его выполнять только один раз. Другая мысль, это если нужно найти сразу много объектов (фиксированное число), то не искать их каждый по отдельности, а дать им общее имя и искать их получая коллекцию объектов при помощи метода document.getElementsByName, а потом с каждым объектов работать по соответствующему индексу. Но с точки зрения эффективности это дает не очень много. Наиболее плодотворная идея — это выносить всё что можно из внутренних циклов во внешние.

Возможно, я не один такой умный и у вас всё это уже оптимизировано, возможно, кто-то проводил исследования, делал замеры?

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Оптимизация Javascript-кода

Оптимизировать код javascript, конечно, надо не везде. Обычно — в ускорении нуждаются

  • интерфейсные компоненты
    • анимация
    • драг’н’дроп
  • обработчики частых событий
    • onmousemove
    • CSS expression (IE)

Основные узкие места — как правило, там, где javascript вызывается очень часто. Мы рассмотрим основные причины тормозов и то, как их преодолеть.

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

Обращения к DOM

Любое обращение к DOM — обычно тяжелее для браузера, чем обращение к переменной javascript. Изменение свойств, влияющих на отображение элемента: className , style , innerHTML и ряда других — особенно сложные операции.

Уменьшение их числа может ускорить скрипт.

Пример

Например, эта функция строит элементарный интерфейс:

Оптимизация по части доступа к innerHTML будет такая:

Нажатие на кнопку запускает многократный запуск функции и замер общего времени. В разных браузерах разница во времени выполнения будет разной.

Более сложный пример

Рассмотрим функцию, которая проходит всех детей узла и ставит им свойства:


Сколько в ней обращений к DOM ?

Правильный ответ — 4 обращения.

Первое — самое очевидное:

Функция getElementsByTagName() возвращает специальный объект NodeList , который похож на массив: есть длина и нумерованы элементы, но на самом деле это динамический объект DOM.

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

Поэтому следующие обращения — тоже работают с DOM, причем на каждой итерации цикла:

По возможности оптимизируем их:

Такая оптимизация полезна и в случае, когда elements — обычный массив, но эффект от уменьшения обращений к DOM NodeList гораздо сильнее.

Рассмотрим заодно еще небольшую оптимизацию. Функция, которая назначается onclick внутри цикла — статическая. Вынесем ее вовне цикла:

В этом тесте цикл пробегает по 30 элементам. Чем больше элементов — тем больше видна разница. Проверьте в разных браузерах.

Array.join вместо сложения строк

В Internet Explorer конкатенация строк реализована не совсем корректно. Особенно это видно на длинных строках.

Тормоза возникают, например, когда длинная строка конструируется из множества мелких.

Пример

Например, из массива данных делается HTML-таблица:

По-видимому, каждый раз при сложении строк:

  1. создается новая строка
  2. туда копируется первая строка
  3. далее копируется вторая строка

Хотя правильно было бы просто приписывать вторую строку к первой. Тут есть некоторые сложности на низком уровне — в работе с памятью и т.п, но они вполне преодолимы.

В некоторых языках предусмотрены специальные классы для сложения многих строк в одну. Например, в Java это StringBuilder.

Соответствующий прием в javascript — сложить все куски в массив, а потом — получить длинную строку вызовом Array#join .

Так будет выглядить оптимизированный пример с таблицей:

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

Тормоза на строках отчетливо видны в Internet Explorer.

В тех браузерах, где проблем со строками нет, заполнение массива является лишней операцией и общее время, наоборот, увеличивается.

Тем не менее, этот способ оптимизации можно применять везде, т.к он уменьшает максимальное время выполнения (IE).

И, конечно, конструирование через строки работает быстрее создания таблицы через DOM, когда каждый элемент делается document.createElement(..) .

Только вот таблицу надо делать целиком, т.к в Internet Explorer свойство innerHTML работает только на самом нижнем уровне таблицы: TD, TH и т.п, и не работает для TABLE, TBODY, TR.

Цукерберг рекомендует:  20 jQuery плагинов для создания модальных окон

CSS Expressions

В IE есть такая интересная штука как CSS-expressions.

Как правило они используются для обхода IEшных недостатков и багов в верстке. Например:

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

CSS expressions вычисляются при каждом событии, включая движение мыши, скроллинг окна и т.п.

Например, посмотрите эту страничку в Internet Explorer — полоса чуть ниже должна быть частично закрашена. Каждые 10 вычислений CSS expression меняют ее ширину на 1.


Клик на полоске покажет, сколько всего раз вычислилось CSS expression.

Если CSS-expression достаточно сложное, например, включает вложенные Javascript-вызовы для определения размеров элементов, то передвижение курсора может стать «рваным», как и при сложном обработчике onmousemove .

Vanilla JS

понедельник, 10 февраля 2014 г.

Ускорение работы циклов JavaScript на 50%

Данные примеры дают ускорение выполнения циклов JavaScript на 50%.

function process (value) <
console.log(value);
>

var values = new Array(1000000);

var len = values.length;

// for loop
for (var i = len; i—;) <
process(values[i]);
>

// do-while loop
var j = len — 1;
do <
process(value[j]);
> while (j—)

// while loop
var k = len;
while (k—) <
process(value[k]);
>

Ускоряем JavaScript

Кажется, всего несколько дней назад мы рассказывали вам об истории flickr, и вот — статья, написанная главным разработчиком этой компании Кэлом Хендерсоном. Статья довольно специфичная — это вполне конкретные советы по решению вполне конкретных проблем, с которыми может столкнуться практически любой веб-разработчик. Как правило, мы стараемся не публиковать материалы такого плана, однако и Веб 2.0 — штука довольно новая, и проблемы, которые поднимает Хендерсон, далеко не для всех очевидны (что уж говорить о способах их преодоления), и литературы, освещающей эти вопросы, тоже не очень много, — к сожалению, большинство авторов компьютерных книжек делает упор на подробное описание синтаксиса, избегая рассуждать о тонкостях применения тех или иных техник. Хендерсон на синтаксис не отвлекается. Не рассказывает он и о том, как делать приложения, активно использующие javascript и css. Его интересует другое — «как сделать эти приложения по-настоящему интерактивными и быстрыми». — В.Г.

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

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

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

Монолит

Раньше считалось, что максимальной производительности можно добиться, объединив многочисленные css- и javascript-файлы в более крупные блоки. Вместо десятка javascript-файлов по 5 Кбайт каждый мы делали один файл размером 50 Кбайт. Хотя общий размер кода при этом не менялся, мы сокращали накладные расходы на обработку http-запросов.

Также важен аспект распараллеливания. По умолчанию и ie и mozilla/firefox при использовании стабильного соединения загружают только два файла с одного домена (см. спецификацию http 1.1, секция 8.1.4). Это означает, что пока не загрузятся все скрипты, мы не загружаем картинки. Все это время пользователи видят страницу без изображений.

Однако у этого подхода есть и недостатки. Совмещая все наши ресурсы, мы заставляем пользователя загружать всё и сразу. Разделив содержимое между разными файлами, мы могли бы распределить тяжесть загрузки поверх нескольких страниц (или вообще избежать загрузки отдельных блоков — зависит от поведения пользователя). Если же мы замедлим загрузку первой страницы, чтобы ускорить загрузку всех остальных, то можем столкнуться с тем, что второй страницы многие пользователи просто не дождутся.

Исторически этот крупный недостаток такого подхода нечасто брался в расчет. Но для системы, в которой постоянные изменения содержимого статических файлов — обычное дело, это важно, поскольку любое изменение в большом едином блоке требует, чтобы клиент перегрузил себе полный рабочий набор css или javascript. Если приложение представляет собой монолитный исходник на javascript размером 100 Кбайт, значит, каждая мелочь приводит к принудительной загрузке лишних 100 Кбайт.

Один в поле не воин

В качестве альтернативного подхода постараемся придерживаться золотой середины. Разобъем наши css- и javascript-ресурсы на множество подфайлов, сохраняя в то же время количество этих файлов функционально невысоким. С одной стороны, нам удобно разрабатывать приложения, разбивая код на логические блоки. С другой стороны, для работы приложения важно, чтобы этих блоков было не слишком много (так что нам приходится объединять эти файлы). Компромисса можно добиться, сделав определенные добавления к системе сборки билдов (набор инструментов, превращающий «грязный» код разработки в рабочий, готовый для развертывания код).

Для прикладного окружения, в котором среда разработки и среда исполнения четко разделены, подойдут простые техники управления кодом. Пусть в среде разработки код для пущей ясности разбит на множество логических блоков. Создадим в smarty (язык шаблонов для php) простую функцию загрузки javascript:

php :
function smarty_insert_js ( $args )<
foreach ( explode ( ‘ , ’ , $args [ ‘files’ ]) as $file )<

2 Javascript функции для ускорения верстки

Недавно мы в команде задумались, что некоторые вещи мы делаем слишком часто и нам нужно оптимизировать эти процессы. Мы написали 2 функции, которые помогают нам верстать быстрее. Чтобы применить эти функции вам понадобится подключить jQuery(даже если вы отказались от неё, подключите временно).

Собираем классы со страницы по БЕМу в Sass

В разработке мы применяем следующий подход: у каждого элемента есть один основной класс, остальные классы являются модификаторами. Подробнее об этом можете прочитать в нашей статье КБЭМ — Контейнер, Блок, Элемент, Модификатор. Мы используем sass в качестве препроцессора с синтаксисом scss, и для того чтобы собрать все классы со страницы и вставить их в файлы стилей нам понадобится одна функция:

В качестве первого параметра мы указываем откуда собрать классы, во втором — куда положить результат.

Напишем небольшую разметку и соберем классы:

Вызываем функцию в вашем js-файле:


Функция соберет все классы со страницы и положит их в селектор с классом ‘elements_list’.Результат:

Далее мы копируем классы в редактор в scss, и он расставляет автоформатирование(например, в PHPStorm по комбинации клавиш Ctrl + Alt + L). И в итоге получаем удобный sass файл который можно использовать:

Обратите внимание, что модификаторы автоматически подставляются после основных классов.

Создание быстрой навигации по статичной верстке

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

Цукерберг рекомендует:  Css-3 - Как почистить CSS

В качестве аргументов передаем массив со страницами:

Расширение ‘.html’ указывать не нужно. После вызова этой функции в верхнем левом углу страницы появляется маленький квадрат, наведя на который выдвинется виджет со страницами:

8 приложений-клонов, которые стоит «создать», чтобы прокачать навыки программирования

Чтобы стать профессионалом в разработке, как и в любой другой сфере, нужно очень постараться, — пишет DEV.BY. Так же, чтобы накачать большие мышцы, мало просто читать о тренировках: нужно пойти в спортзал и часами вкалывать на тренажёрах. Разработчик и основатель Индрек Ласн предложил 8 отличных упражнений, которые помогут «прокачать» навыки программирования. Для создания приложений можно использовать любые удобные средства разработки.

Проект 1: клон Trello

Чему это научит:

  • роутинг; технология перетаскивания (drag and drop);
  • создание новых объектов (досок, списков, карточек);
  • обработка и валидация данных;
  • клиентская часть: как использовать локальное хранилище, сохранять данные в локальном хранилище, читать данные из локального хранилища;
  • серверная часть: как использовать базы данных, сохранять данные в базу, читать данные из базы.

Демо-версия клона Trello Индрека Ласна.

Проект 2: панель управления пользователями

Простое CRUD-приложение — отличное задание для старта. Чему это научит:

  • создание пользователей, управление пользователями;
  • взаимодействие с базами данных: создание, чтение, редактирование, удаление;
  • валидация входных данных и работа с формами.

Проект 3: трекер криптовалют

Это должно быть нативное мобильное приложение, написанное на Swift, Objective-C, React Native, Java или же Kotlin. Чему это научит:

  • как работают нативные приложения;
  • как извлекать данные из API;
  • как работают нативные раскладки;
  • как работать с мобильными эмуляторами.

Можно воспользоваться вот этим API и готовым руководством по созданию такого приложения.

Проект 4: самостоятельно настроить webpack-конфиг с нуля

Технически, это не приложение, но тем не менее очень поможет понять, как работает вебпак изнутри. Так этот «чёрный ящик» станет мощным инструментом в арсенале разработчика.

  • скомпилировать es7 в es5 (основа);
  • скомпилировать jsx в js или .vue в .js (чтобы познакомиться с загрузчиками);
  • настроить webpack-dev-server и горячую перезагрузку модулей (vue-cli и create-react-app используют и то, и другое);
  • научиться развёртывать вебпак-проекты на Heroku, now.sh или Github pages;
  • настроить в любимом препроцессоре компиляцию scss, less, stylus в простой css;
  • научиться использовать изображения и svg-файлы с вебпаком.

Дополнительный ресурс для тех, кто начинает «совсем» с нуля.

Проект 5: клон Hacker News

Многие рано или поздно строят свою версию этого новостного сайта. Чему это научит:

  • взаимодействовать с программными интерфейсами Hacker News;
  • как создавать одностраничные приложения;
  • как реализовывать такие функции, как просмотр комментариев, отдельных комментариев, профилей; роутинг.

Вот здесь — документация по API Hacker News.

Проект 6: список дел


Подобных приложений немало, и они неспроста так популярны. Небольшой менеджер задач поможет освоить самые азы. Построить его можно сначала на Javascript, а потом — с помощью любого фреймворка или библиотеки. Чему это научит:

  • создание новых задач;
  • валидация полей;
  • фильтрация задач: завершённые, активные, все (применять функции filter и reduce);
  • понимание основ Javascript.

Проект 7: сортируемый список с перетаскиванием элементов

Очень полезен, чтобы разобраться с API перетаскивания. Умение создавать более сложные приложения всегда выделяет разработчика на фоне остальных. Чему это научит:

  • понимание API перетаскивания;
  • создание насыщенных пользовательских интерфейсов.

Проект 8: клон мессенджера (нативное приложение)

Понимание принципа работы нативных и веб-приложений даст разработчику хорошее преимущество перед остальными. Чему это научит:

  • вебсокеты (мгновенный обмен сообщениями);
  • как работают нативные приложения;
  • как работают раскладки в нативных приложениях;
  • роутинг в нативных приложениях.

Реализовать увеличение скорости в простой игре (Snake)

Есть простая игра Змейка, написана на js c использованием canvas/ Нужно реализовать увеличение скорости игры каждые 10 съеденых точек.

Возможно это сделать в рамках текущего кода? Я имею ввиду что для обновления холста используеться SetInterval. И мне кажется что код с данными методом так не оптимизировать. :( Вообщем сам вопрос. Как это можно сделать? И можно пример. Спасибо

2 ответа 2

Для задержки требуются две переменные: defaultLoopDelay и currentLoopDelay . Одна для начальной скорости, вторая — для текущей.

Выносим таймер gameloop в глобальную область, чтобы можно было переустановить его из paint() с новой задержкой.

Определяем переменную speedBoost , содержащую значение, на которое будет уменьшаться задержка. Определяем переменную foodForBoost , содержащую количество еды необходимое съесть до каждого ускорения. Определяем переменную foodRemainForBoost , содержащую количество еды, которое осталось съесть до ближайшего ускорения, и инициализируем её значением foodForBoost .

После каждого приема пищи уменьшаем на единицу foodRemainForBoost . Если foodRemainForBoost становится 0 , то устанавливаем её в foodForBoost , уменьшаем currentLoopDelay на speedBoost , останавливаем текущий таймер и запускаем новый с обновленным интервалом.

При каждом вызове init() сбрасываем currentLoopDelay в defaultLoopDelay .

Ускорение Javascript?

Есть ли способ ускорить JS-скрипты (я имею в виду некоторые сложные манипуляции DOM, например игры или анимации)?

Theres действительно не способ действительно ускорить это. Вы можете сжать его, но это будет не так быстро.

Использовать движок JavaScript V8?: P

Единственный способ сделать это — уменьшить количество доступа к домену и области доступа в вашем коде. например при обращении к элементу в dom несколько раз вместо

Обратите внимание, что некоторые javascript-механизмы автоматически сделают эту оптимизацию для вас, но для старых браузеров последняя, ​​безусловно, будет быстрее, чем первая, потому что только один раз нужно пройти цепочку доступа, чтобы достичь myel

Взгляните на это видео для получения дополнительных методов оптимизации javascript http://www.youtube.com/watch?v=mHtdZgou0qU

Если вы имеете в виду вне браузера, вы должны использовать самый быстрый способ, т.е. движок Chrome V8 Java Script.

Внутри браузера есть множество методов оптимизации для более быстрой загрузки Java Script, здесь хорошее место для методов оптимизации Google.

  • Скомпилируйте свой Java Script с помощью инструмента, такого как компрессор YUI, чем его gzipped.
  • Загружайте только минимальный минимум
  • Комплексные анимации по-прежнему лучше всего использовать плагины Rich UI, т.е. Flash/Silverlight

Для анимации посмотрите на элемент HTML 5 Canvas для браузеров, которые его поддерживают, вернитесь к flash для тех, которые этого не делают.

Карты Google — хороший пример того, что возможно с чистой Java Script, хотя они потратили ресурсы богатства, оптимизируя производительность для каждого браузера. Как всегда лучший способ повысить скорость — это сравнить различные подходы. например div.innerHTML = «», в большинстве случаев быстрее, чем использование DOM для динамического добавления элементов и т.д.

Лучшее, что вы можете сделать, это оптимизировать свой код. Используйте profiler — для Firefox там Firebug, Safari и Windows IE 8 имеют встроенные JavaScript-отладчики и профилировщики (по крайней мере, я считаю, что IE 8, кто-то меня поправляет, если я ошибаюсь. ). Запуск профиля на вашем коде покажет вам, где самые медленные части, и это те разделы, которые вы можете сосредоточить на оптимизации. возможно, с большим количеством вопросов, которые являются более конкретными.

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих