Передовая практика Javascript/jQuery для веб-приложения: централизация и спецификация

Представьте себе веб-приложение, в котором есть десятки групп страниц (pg1, pg2,...), и некоторым из этих групп страниц нужен только код JavaScript, специфичный только для них, но не для всего приложения. Например, некоторые визуальные исправления для window.resize() могут иметь отношение только к pg2, но нигде больше.

Вот несколько возможных решений:

1/Централизованный: наличие одного файла script для всего приложения, которое касается всех групп страниц. Очень легко узнать, присутствует ли соответствующий объект DOM, и поэтому все нерелевантные страницы просто выполняют незначительные дополнительные if(). Самое большое преимущество в том, что все JS загружается один раз для всего веб-приложения, и никакая модификация HTML-кода не требуется. Недостатком является то, что дополнительные дополнительные проверки добавляются к нерелевантным страницам.

2/Смешанный: централизованный script проверяет наличие конкретной функции на странице и запускает ее, если она существует. Например, мы могли бы добавить

if (typeof page_specific_resize === 'function') page_specific_resize();

Определенная группа страниц в этом случае будет иметь:

<script>
function page_specific_resize() {
    //....
}
</script>

Преимущество в том, что код существует только для релевантных страниц и поэтому не проверяется на каждой странице. Недостатком является дополнительный размер для результатов HTML во всей группе страниц. Если существует несколько строк кода, группа страниц может загружать дополнительный script, специфичный для него, но затем мы добавляем http-вызов, чтобы, возможно, сохранить несколько килограммов в централизованном script.

Какая практика? Просьба прокомментировать эти решения или предложить собственное решение. Добавление некоторых ресурсов для поддержки ваших заявлений о том, что лучше (рассмотреть производительность и простоту обслуживания), было бы замечательно. Будет отображен наиболее подробный ответ. Спасибо.

Ответ 1

Немного сложно подумать о лучшем решении, поскольку это гипотетический сценарий, и мы не имеем числа, чтобы хрустнуть: какие самые загружаемые страницы, сколько их там, общий размер script и т.д....

Тем не менее, я не нашел конкретного ответа, "Лучшая практика" ^TM но общих пунктов, где люди соглашаются.

1) Cacheing:

В соответствии с этим:

https://developer.yahoo.com/performance/rules.html

"Использование внешних файлов в реальном мире, как правило, потому что файлы JavaScript и CSS кэшируются браузером"

2) Минимизация

Все еще согласно ссылке Yahoo:

"[minification] улучшает производительность отклика, поскольку размер загруженного файла уменьшается

3) Запросы HTTP

Лучше всего сократить HTTP-вызовы (на основе ответа сообщества).

Один большой файл javascript или несколько меньших файлов?

Лучшая практика оптимизации загрузки javascript

4) Нужен ли вам этот конкретный scritp?

В соответствии с: https://github.com/stevekwan/best-practices/blob/master/javascript/best-practices.md

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

Это зависит от ресурсов, которые вы должны загрузить. Зависит от того, как часто загружается определенная группа страниц или насколько часто вы ожидаете ее запроса. Веб-приложение является одной страницей? Что делает каждый конкретный script?

Если script загружает форму, пользователю не нужно будет посещать страницу более одного раза. В любом случае пользователю потребуется подключение к Интернету, чтобы позднее публиковать данные.

Но если это script для изменения размера страницы, и у пользователя есть некоторые икоты подключения (например: посещение вашего веб-приложения на мобильном устройстве, когда вы принимаете метро), может быть, лучше, чтобы код уже загрузился так пользователь может свободно перемещаться. Согласно ссылке Github, которую я опубликовал ранее:

"События, которые срабатывают все время (например, изменение размера/прокрутка)"

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

Минимизация всего кода в одном JS файле, который будет кэшироваться раньше, уменьшит количество выполненных запросов. Кроме того, для установления соединения может потребоваться несколько секунд, но требуется миллисекунды для обработки кучи операторов "if".

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

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

Ответ 2

Это святой Грааль JS и, надеюсь, какие модули в ECMA6/7 будут решать!

На клиенте есть модули-загрузчики, такие как JSPM, и теперь есть компиляторы JS-кода с горячей заменой в node.js, которые могут использоваться на клиенте с помощью кусков через webpack.

Я успешно экспериментировал в прошлом году с созданием простого приложения, которое загружало требуемый фрагмент кода/файла по мере необходимости во время выполнения:

Это был простой тестовый проект, который я назвал praetor.js на github: github.com/magnumjs/praetor.js

В ветке gh-pages-code вы можете показать, как это работает: https://github.com/magnumjs/praetor.js/tree/gh-pages-code

В основном файле js вы можете увидеть, как это делается с помощью webpackJsonp после компиляции:

JS:

 module.exports = {
    getPage: function (name, callback) {
        // no better way to do this with webpack for chunk files ?
        if (name.indexOf("demo") !== -1) {
            require(["./modules/demo/app.js"], function (require) {
                callback(name, require("./modules/demo/app.js"));
            });
        }
 .....

Чтобы увидеть, как он работает вживую, перейдите в http://magnumjs.github.io/praetor.js/ и откройте панель сети и просмотрите куски, загружаемые во время выполнения, при навигации по выберите меню слева.

Надеюсь, что это поможет!

Ответ 3

Как правило, лучше иметь меньше HTTP-запросов, но это зависит от вашего веб-приложения.

Я обычно использую requirejs, чтобы включить нужные модели и представления, которые мне нужны в каждом файле.

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

Поэтому я использую r.js, который специально предназначен для requirejs, для компиляции моих JS файлов, когда это время для развертывания.

Надеюсь, что это поможет