Оптимизация Javascript с помощью функции `new Function()`. Javascript оптимизация
optimization - Javascript: оптимизация деталей для критического/высоко обрабатываемого кода Javascript
После просмотра нескольких хороших ответов людей здесь я сделал еще несколько поисков и нашел несколько, чтобы добавить:
Это советы по оптимизации Javascript, когда вы хотите перейти к очень маленьким деталям, вещи, которые в большинстве случаев не имеют значения, но некоторые из них будут иметь значение:
Switch vs. Else Если
Обычно используемая тактика для изгибания любые накладные расходы могут быть исключены из большая группа простых условных заявления заменяют If-Then-Else's с операторами Switch.
Просто вы можете увидеть бенчмаркинг, вы можете найти его здесь.
Loop Unrolling
Чтобы развернуть цикл, у вас есть больше чем один из того же итерация и увеличение счетчика соответственно. Это очень помогает потому что вы затем уменьшаете число раз, когда вы проверяете условие для петли в целом. Вы должны быть осторожны при этом, хотя потому что вы можете закончиться перерегулированием границы.
Подробнее и сравнительный анализ здесь.
Подсчет обратного цикла
Обрати свой цикл так, чтобы он подсчитывал вниз, а не вверх. Я также видел в различных документах о оптимизация, которая сравнивает число к нулю намного быстрее, чем сравнение это к другому номеру, так что если вы уменьшается и сравнивается с нулем должен быть быстрее.
Подробнее и сравнительный анализ здесь.
Duff Device Это просто, но сложно понять сначала. Подробнее об этом здесь. Не забудьте проверить улучшенную версию далее на этой странице.
Большая часть этой информации была приведена непосредственно здесь: Оптимизация JavaScript. Это интересно, так как это такой старый сайт, он смотрит на оптимизацию с точки зрения вычислительной мощности браузера, которую они тогда имели. Хотя те тесты, которые они записали для IE 5.5 и Netscape 4.73, их инструменты для сравнения дают точные результаты для используемого вами браузера.
Для людей, которые думают, что эти детали не имеют значения, я думаю, что он немного говорит о том, как люди воспринимают власть в продвигающихся технологиях, которые у нас есть. Просто потому, что наши браузеры обрабатываются во много раз быстрее, чем то, что они используют, не обязательно означает, что мы должны злоупотреблять этой вычислительной мощностью.
Я не предлагаю потратить часы, оптимизируя две строки кода за 0,005 мс, но если учесть некоторые эти методы и реализовать их там, где это необходимо, это будет способствовать созданию более быстрой сети. В конце концов, есть еще много людей, использующих IE 6, поэтому было бы неправильно предполагать, что все браузеры могут обрабатывать одну и ту же обработку.
qaru.site
Оптимизация запросов javascript и css Engine.JS
Обычно вы можете использовать следующий шаблон:
- Main.js – свяжите все сценарии здесь, которые используются несколькими страницами на веб-сайте.
- Page.js – все j специфичные для страницы. Это означало бы объединение js всех виджетов на странице.
С этой практикой у вас просто есть 2 запроса для вашего JS на каждой странице, и вы получаете четкое разделение / структуру в своей JS. Для всех страниц, кроме первого, это будет только один запрос, поскольку main.js будет кэшироваться.
Вы можете использовать тот же принцип для CSS. Это эффективно, но, как уже упоминалось в другом ответе, вы можете принять это дальше и расслоить все только на 1 js. Это предпочтение или стиль. Мне нравится разбивать его на 2, поскольку это заставляет меня логично.
Убедитесь, что следующее:
- Пространство имен вашего JS еще может привести к ошибкам при их объединении.
- Сделайте ваши страницы в пользу и нажмите их внизу страницы.
EDIT: Я думал, что буду обновлять ответ, чтобы ответить на некоторые ваши вопросы.
Пункт 2: лучше ли комбинировать только те файлы, которые всегда используются вместе?
Ans: Лично я так не думаю. Если вы обслуживаете все файлы, которые используются вместе, не имеет значения, к какой группе они принадлежат или как они попадают на страницу. Это связано с тем, что мы объединяем JS-файлы для уменьшения количества запросов HTTP.
Как только ваш JS будет объединен и проинструктирован & в PROD, вы не ожидаете отладки или смысла в нем. Таким образом, для связывания логически связанных файлов JS стоит спорный вопрос. Его в среде DEV, где вы хотели бы иметь все эти логически связанные файлы кода вместе.
Пункт 3: Как насчет того, чтобы иметь один файл для всех javascripts, которые должны загружаться в голове и один файл для всех javascripts, которые должны загружаться в конце тела?
Ans: Есть определенные случаи, когда вы каким-то образом вынуждены вводить JS в HEAD . В идеале вы не должны делать это, поскольку метки SCRIPT блокируют природу. Поэтому, если вам действительно не нужно, поместите все свои JS (1 или несколько файлов) в конец тега BODY .
Пункт 4: Как получить один файл для общих функций и один для административных функций, который загружается, если у пользователя есть определенные разрешения?
Ответ: Это похоже на разумный подход для разделения вашего JS-кода. В зависимости от пользовательских привилегий вы можете разветвлять свой JS-код.
Пункт 6: Какое рекомендуемое количество запросов javascript и css для страницы?
Ans: Это очень субъективный вопрос. Это зависит от того, что вы строите. Если вас беспокоит слишком большое количество JS, загружаемое при загрузке страницы, вы всегда можете разбить его и использовать методы инъекции SCRIPT по требованию для разделения нагрузки.
ru.javascriptes.com
Оптимизация JavaScript
5 апреля 2011 г.
Из множества идей касательно темы для своей статьи я решил выбрать довольно баянную, но раскрытую для себя именно «опытным путем» тему об оптимизации клиентского JavaScript’а уже для сайта в бою.
Переходим к делу
К детальному изучению этого вопроса я пришел давно, когда создавалось собственное AJAX приложение. А правильное для себя решение было найдено относительно недавно, с ним и хочу поделиться с вами. В приложении применялась так-же технология flash и присутствовало изобилие .gif картинок, а база данных хранилась в массивах. Что ставило вопрос об оптимизации javascript ребром. В довесок ко всему перечисленному приложение размещалось на не дорогом хостинге, который при больших нагрузках вел себя не предсказуемо.
После готовности приложения и оптимизации в непосредственно самом JavaScript у меня оставалось несколько подключаемых к страничке скриптов:
- Библиотека jQuery 1.5.1 (83.2 кб)
- Плагин jQuery Cookie (732 б)
- Плагин jQuery haschange (16.4 кб)
- Плагин jQuery Ui Custom (20.2 кб)
- база данных в виде массивов (155.3 кб)
- functions приложения (63.1 кб)
Вопрос стоял в том, что-бы объединить все вышеперечисленные скрипты в один и при-этом минимизировать их. В довесок в базах данных было много текста кириллицей.В поле моего зрения попало два хороших сервиса: Closure Compiler и bananascript.
В каждом из них на первый взгляд я нашел свои минусы:Первый приводит кириллицу в юникод NFC, что резко увеличивает объем файла с кириллическими данными, но с объединением всех файлов скриптов в один данный сервис справляется на ура.Второй же не воспринимает кириллицу, но значительно уменьшает объем файлов скриптов.
Применение
Для примера я взял файл баз данных размером в 155.3 кб, пропустил его через Closure Compiler, на выходе получил примерно 400 кб. Затем полученный файл пропустил через сервис bananascript, на выходе получилось около 20 кб. Что уменьшило исходный размер файла на 135 кб. А самое главное тестовый, скрипт подключенный с кодировкой ISO-8859-1, что требуется после сжатия скрипта в сервисе bananascript для его работоспособности — стал корректно отображать кириллицу.
После тестов я проделал то-же самое со всеми библиотеками и скриптами подключаемыми к приложению. Их исходный суммарный размер был равен 338.9 кб, после один файл на выходе стал весить 84.5 кб, а после gzip сжатия 63 кб.
Плюсы:1. Уменьшается размер подключаемых скриптов.2. Уменьшается кол-во http запросов.3. Хорошее дополнение к защите от «любителей реализовать чей-либо сервисов в своих проектах».Минусы:1. Процесс такой компиляции занимает время.2. Скрипты скомпилированные таким способом должны подключаться с кодировкой ISO-8859-1.3. Не дай бог утратить исходные скрипты ;))
Пошаговая инструкция:
1. Заходим на Closure Compiler2. Выстраиваем там все файлы скриптов в нужном порядке, должно получиться что-то похожее на:// ==ClosureCompiler==// @compilation_level SIMPLE_OPTIMIZATIONS// @output_file_name default.js// @code_url site.ru/src1.js// @code_url site.ru/src2.js// @code_url site.ru/src3.js// ==/ClosureCompiler==Где @compilation_level — уровень оптимизации скрипта, @output_file_name — имя файла скрипта, который будет получен на выходе, @code_url — ссылка на компилируемый скрипт (их может быть несколько).3. Полученный файл компилируем в сервисе bananascript и там же смотрим на разницу его размера «до» и «после».4. При подключении скрипта указываем для него charset=«ISO-8859-1».
korzh.net
Глава 7. Оптимизация JavaScript. Разгони свой сайт
Глава 7. Оптимизация JavaScript
7.1. Кроссбраузерный window.onload
Отложенная загрузка скриптов волнует общественность уже давно, почти 10 лет, — атрибут defer, призванный ее обеспечить, был добавлен в спецификацию еще в прошлом столетии. Однако проблема так и остается актуальной.
Событие window.onload используется программистами для старта их веб-приложения. Это может быть что-то довольно простое, например выпадающее меню, а может быть и совсем сложное — скажем, запуск почтового приложения. Суть проблемы заключается в том, что событие onload срабатывает только после того, как загрузится вся страница (включая все картинки и другое бинарное содержимое). Если на странице много картинок, то можно заметить значительную задержку между загрузкой страницы и тем моментом, когда она начнет фактически работать. На самом деле, нам нужен только способ определить, когда DOM полностью загрузится, чтобы не ждать еще и загрузку картинок и других элементов оформления.
Следующая глава >
it.wikireading.ru
optimization - Оптимизация Javascript с помощью функции `new Function()`
Разница в том, что вы используете только forEach для конструировать оптимизированную функцию. После создания функции внутри цикла нет цикла: цикл развернут, а имена столбцов жёстко. Затем метод eval ed превращается в рабочую функцию, которая даже может быть скомпилирована в машинный код в зависимости от движка. Это приводит к двум улучшениям производительности:
- Полностью удалив проверку состояния цикла for (i < columns.length), нет ветвления, а
- По значениям жесткого кодирования column[i].name в несколько операторов вы удалили оценку column[i] и поисков на column.name на каждом шаге.
Итак, после вызова new Function(...) с кодом, переданным как String, ваша переменная parseRow получает ссылку на следующую функцию:
function parseRow(columns, parser) { return { "columnOne": parser.readColumnValue(), "columnTwo": parser.readColumnValue(), "columnThree": parser.readColumnValue(), ... }; }Почему это возможно в JavaScript?
Причина, по которой это так эффективно работает в JavaScript, заключается в том, что исходный код JavaScript на любой веб-странице должен быть интерпретирован или скомпилирован JS-движком в любом случае. Вы не отправляете свою веб-страницу с скомпилированными исполняемыми файлами или даже (несколько) предварительно скомпилированным байт-кодом (например, Java или .NET). Каждый раз, когда загружается новый файл .js, ваш браузер скомпилирует его с нуля перед его запуском (ну, точнее, в современных машинах это что-то между интерпретацией и компиляцией, т.е. JITting).
Это означает, что создание рабочей функции из строки (например, компиляция кода) во время выполнения не менее эффективно, чем чтение рукописного кода из .js файла. Сравните это с программой на C/С++, которая (во всех разумных случаях) скомпилирована в машинный код (т.е. исполняемый файл, который как можно ближе к CPU) до того, как он достигнет клиента.
Если вы хотите сделать это в С++ (своего рода самомодифицирующийся код), вам придется связать компилятор с вашим приложение для создания кода, а затраты на создание этой функции будут иметь избыточный вес для преимуществ, которые вы получите, когда сможете начать его. Например, в .NET также необычно для программы испускать методы или даже сборки во время выполнения, которые затем получают JIT, скомпилированные для машинный код, позволяющий повысить производительность, например, в вашем вопросе.
qaru.site
Про оптимизацию javascript кода (часть 1)
Нижеследующее — размышления после профилирования нескольких скриптов, и поисков быстрого кода.
Все больше статей по клиентской оптимизации появляется. Но проблема в том, что практики из статей начинают применять молодые разработчики без понимания причин. Зачастую авторы статей рассказывают как они решили свою проблему.
Видел людей, которые всерьез спорят про быстрые и медленные циклы, и использование бинарных операторов для ускорения. На практике потребность в подобных манипуляциях встречается очень редко. Эти споры процветают, пишутся тесты. Правда ребята забывают, что самым узким местом клиентского JS является DOM.
При переписывании цикла на более быструю версию, кеширование переменных (для более быстрого поиска по областям видимости) скрипт можно ускорить на 5%, ну на 10%. При этом произойдетпотеря в читаемости исходного кода, его понимании.
Но ситуация с оптимизацией — палка о трех концах. Второй конец: браузерная оптимизация. Например пример двух циклов:
// 1 for (var i = 0; iВторая версия чуть более многословна, но быстрее первой. Третья менее многословна, но не совсем понятна слету (проход по массиву в обратном порядке не естественен для понимания).
На практике интерпретаторы сами оптимизируют код циклов, и большой разницы в скорости отработки в современном браузере профилирование не покажет, не говоря уже о пользовательских ощущениях. Какая разница, скрипт выполнится за 10мс или 9мс.
Подобные оптимизации сработают для старых браузеров. Но тут возникает вопрос целесообразности: надо ли держать такое количество непонятного кода только для оптимизации (еще не понятно необходимой ли) работы старых браузеров. Намного лучше оставить код многословным и однозначным. Пусть оптимизируют интерпретаторы.
А вот третий конец — это DOM. Обновление одного узла в DOM-e ведет за собой каскад телодвижений со стороны браузера: обновление свойств children, parentNode, nextSibling у нод, которые «цепляются» этим изменением, обновление liveCollections, триггер repaint и reflow, очистка памяти, если использован innerHTML, то еще дополнительный парсинг текста в DOM модель. На фоне такого количества действий низкоуровневые оптимизации меркнут. Слишком просто одним лишним обращением к DOM-у свести все оптимизации на нет.
Узких мест в DOM-е множество. Самые тяжелые — обновление: добавление и удаление узлов. При том время отработки одного и того же кода зависит от общей сложности DOM дерева, максимальной вложенности, количества таблиц стилей и количества правил. Это означает, что один и тот же способ оптимизации даст различный прирост, в зависимости от сложности страницы.
Браузерные производители понимают, и со своей стороны стараются оптимизировать код движков. И тут мы наблюдаем другую интересную ситуацию: разные подходы к оптимизации дают разный прирост в разных браузерах. Чем древнее браузер, тем вероятнее, что хитрые манипуляции дадут преимущество.
Снова повторяется история с циклами: не стоит усложнять исходны код, подстраивая его под браузер. Пусть этим занимаются браузеростроители.
Я к чему веду: смысла в особой оптимизации кода нет. Самый разумный подход — написать код как есть, структурировать и сделать его читаемым и понятным. И только если профилирование покажет необходимость оптимизаций, начать именно с оптимизации работы с DOM.
blog.dmitrypodgorniy.com
