Существуют разные фреймворки JavaScript, такие как jQuery, Dojo, mooTools, Google Web Toolkit (GWT), YUI и т.д. Какой из них подходит для высокопроизводительных веб-сайтов?
Какая структура JavaScript обычно используется для высокопроизводительных веб-сайтов?
Ответ 1
(Полное опровержение: я разработчик Dojo, и это моя неофициальная перспектива).
Все основные библиотеки могут использоваться в сценариях с высокой нагрузкой. Есть несколько вещей, которые следует учитывать:
Начальная загрузка
Первоначальная нагрузка влияет на ваше время отклика: от запроса веб-страницы до реагирования и в рабочем режиме. Тривиальные вещи:
- объединить несколько файлов JavaScript вместе (также работает для файлов CSS)
- минимизировать и/или сжать ваш JavaScript
Идея состоит в том, чтобы отправить less — хорошо для сервера, и хорошо для клиента.
Менее тривиальная вещь:
- структурируйте свою программу таким образом, чтобы она работала без загрузки всех модулей.
Пример последнего: разделите ваши модули на существенные (например, основную логику) и несущественные (например, помощники: подсказки, подсказки, верификаторы, средства помощи, различные "постепенные энхансеры" и т.д.). Идея состоит в том, что часто есть вещи, которые не важны для частых пользователей, но приятны для случайных пользователей → они могут быть отложены.
Мы можем сначала загрузить необходимые модули и загрузить асинхронно. Пример: если пользователь хочет отредактировать объект, нам нужно его сначала показать, после чего у нас есть несколько сотен миллисекунд, чтобы загрузить остальные: таблицы поиска, подсказки и т.д.
Очевидно, что это помогает, когда асинхронная загрузка модулей поддерживается используемой инфраструктурой. Dojo имеет встроенный модуль.
Распространять файлы
Всем известно, что из-за ограничений браузера на количество параллельных загрузок с одного и того же сайта выгодно загружать ресурсы (изображения, CSS, JavaScript) из разных доменов:
- мы можем загружать больше в параллель, если пользовательская строка имеет достаточную пропускную способность и— в наши дни это почти всегда верно.
- мы можем настроить веб-серверы, оптимизированные для обслуживания статических файлов: огромный кеш диска, небольшие рабочие, keep-alive, асинхронная служба и т.д.
- мы можем удалить все ненужные функции, которые нам не нужны при обслуживании статических файлов: сеансы, файлы cookie и т.д.
Часто просматриваемая оптимизация в приложениях JavaScript заключается в использовании CDN:
- ваш веб-сайт может извлечь выгоду из географического распределения CDN (файлы могут обслуживаться с ближайшего/самого быстрого сервера)
- пользователь может иметь требуемые файлы в своем кеше, если они были использованы другим приложением
- промежуточные/корпоративные кэши увеличивают вероятность того, что требуемые файлы уже кэшированы.
- последнее, но не менее важное: это файлы, которые вы не используете — подумайте об этом
Опять же, Dojo долгое время поддерживает CDN и распространяется публично AOL CDN и Google CDN. Последний также содержит практически все популярные инструменты JavaScript. Очевидно, вы можете создать свой собственный CDN и свою собственную CDN- и app-specific конструкцию Dojo, если вы считаете, что вам это нужно -— это тривиально и хорошо документировано.
Полоса пропускания связи
Как это может быть разным для разных наборов инструментов? XHR является XHR.
Вам необходимо максимально снизить нагрузку на свои серверы. Проанализируйте трафик all и рассмотрите, сколько статического/неизменяемого материала отправляется по каналу. Например, обычно много HTML избыточно на нескольких страницах: заголовок, нижний колонтитул, меню и т.д. Вам действительно нужно, чтобы все они были отправлены каждый раз?
Одним из очевидных решений является переход от статических HTML + "постепенных улучшений" с JavaScript к реальным приложениям с одной страницей JavaScript. Опять же, это часто упускается из виду, но самая полезная оптимизация.
Хотя идея звучит просто, на самом деле это не так просто, как кажется. Как только мы переходим от однострочных приложений к приложениям, у нас есть множество вопросов, и самая большая из них - это упаковка: какие компоненты, какие компоненты предоставляются набором инструментов, и как их упаковывать и доставлять.
Dojo предоставляет модули, хороший ООП для общих классов, виджеты (комбинация необязательного HTML и связанного с ними поведения) и множество возможностей для работы с ними. Вы можете:
- загружать модули по требованию, а не в голову
- загружать модули асинхронно
- автоматически найти все зависимости между модулями и создать "build" — один файл в простых случаях или больше, если ваше приложение является большим и требует нескольких слоев
- при выполнении "сборки" он может встроить все фрагменты HTML для ваших виджетов, оптимизировать CSS и минимизировать/сжать JavaScript.
- Dojo может автоматически находить и создавать виджеты в HTML, сохраняя много шаблонов
- и многое другое
Все эти функции очень помогают при создании приложений на стороне клиента. Вот почему мне нравится Dojo.
Очевидно, что существует множество способов оптимизации веб-сайтов с высокой нагрузкой, но, согласно моей практике, они наиболее специфичны для фреймворков JavaScript.
Ответ 2
Довольно просто: все из них.
Все фреймворки построены таким образом, чтобы обеспечить максимально возможную производительность и предоставить разработчикам полезные функции и инструменты. Ваш выбор должен основываться на ваших требованиях.
JavaScript работает на стороне клиента, поэтому никто не повлияет на производительность вашего сервера. Единственная разница на стороне сервера - это пропускная способность, используемая для передачи файлов .js клиенту.
Я лично люблю MooTools, потому что он отвечает моим требованиям и также придерживается моих идеалов кодирования. Многие люди приняли jQuery (мне лично это не нравится, это не значит, что это не здорово). Я не использовал других.
Но никто не лучше другого, все это вопрос требований и личных предпочтений.
Ответ 3
Я действительно не думаю, что это немного изменяет. Большие, похоже, используют смесь JQuery и прототипа вместе с другими.
Совершенно откровенно, не имеет значения, что вы используете для сильно посещаемых веб-сайтов, поскольку мы говорим о клиентских технологиях. После загрузки файла на самом деле нет накладных расходов. Итак, если вы просто хотите сделать одну простую вещь, а несколько фреймворков поддерживают ее, используйте любой размер меньшего размера (конечно, если он работает очень плохо, используйте другой!)
Говоря об этом, в google размещается множество фреймворков, поэтому даже это не проблема. Я использую JQuery, размещенный Google, и я очень счастлив.
http://code.google.com/apis/ajaxlibs/
Backend и то, что сервер должен использовать, - это совсем другой вопрос, в котором вы получите тысячу разных ответов!
Ответ 4
Я бы порекомендовал вам заглянуть в Dojo.
Dojo 1.6 также является первой (и единственной) популярной библиотекой JavaScript, которая может быть успешно использована с расширенным режимом Closure Compiler, с огромными размерами, производительностью и преимуществами обфускации, приложенными к ней - кроме Google собственной библиотеки Closure, то есть.
Другими словами, программа, использующая Dojo, может быть на 100% запутана - даже сама библиотека.
Скомпилированный код имеет точно такое же поведение, как и обычный текстовый код, за исключением того, что он намного меньше (в среднем 25% по сравнению с minifiers), работает намного быстрее (особенно на мобильных устройствах) и практически невозможно перепрограммировать, даже после прохождения через косметолог, потому что вся база кода (включая библиотеку) обфускается.
Код, который только "минимизирован" (например, YUI-компрессор, Uglify), может быть легко реконструирован после прохождения через декоратор.
Ответ 5
Ну, как пример stackoverflow полагается на jQuery (и использует ссылку google apis) - это одна из самых быстрых и самых популярных библиотек, и не только это, но я бы сказал, что это проще всего использовать. Какое поведение вы будете иметь на сайте? Это действительно зависит от ваших потребностей.
Ответ 6
Ответ, как всегда, таков: это зависит. О какой производительности вы говорите? Скорость загрузки? Используйте минимизатор, и, вероятно, не так много разницы. Или производительность на стороне клиента, и что вы с ним делаете?
Но я бы предположил, что если вы после сырой производительности, я бы вообще не использовал фреймворк и создавал javascript с низким уровнем, который будет намного сложнее поддерживать.
Некоторая хорошая информация может быть найдена на сайте YUI.
Ответ 7
Как уже объяснили другие ответы, структура не будет узким местом в производительности вашего сайта - скорее, многие другие факторы. Если вы используете популярные фреймворки и загружаете их из популярных URL-адресов для них (например, AOL или Google), они, скорее всего, будут кэшироваться в браузерах ваших пользователей, поэтому вам также не придется беспокоиться об этом.
Если вы вообще не заботитесь о производительности, абсолютно НЕ проверяйте Steve Souders; работа - включая обе его книги, Высокопроизводительные веб-сайты "и" Даже более быстрые веб-сайты ".
Я предвзятый, поскольку Стив - друг и коллега (и мы также распространяем издателей), но я похвалил и восхищался его работой еще до того, как мы встретились лично и стали коллегами - я в основном - как и раньше, так что я просто не могу не восхищаться тем, кто, исходя из того же фона, имел целостность и смелость переключиться почти полностью на передний план, поскольку он понял, что это было узким местом для (т.е. кто-то, у кого было желание сначала поставить пользовательский опыт, то, что мы все воздаем должное, конечно, но не всегда практикуем, когда этот "главный приоритет" мешает нашим собственным специальностям, интересы и навыки...).