Когда мне следует использовать Inline vs.Внешний Javascript?

https://stackoverflow.com/questions/138884

02-07-2019
|

Вопрос

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

Какова общая практика для этого?

Реальный сценарий. У меня есть несколько HTML-страниц, которым требуется проверка формы на стороне клиента.Для этого я использую плагин jQuery, который включаю на все эти страницы.Но вопрос в том, могу ли я:

написать фрагменты кода, которые настраивают этот скрипт в режиме онлайн?
включить все биты в один файл, который используется всеми этими html-страницами?
включить каждый бит в отдельный внешний файл, по одному для каждой HTML-страницы?

Спасибо.

Решение

На момент первоначальной публикации этого ответа (2008 г.) правило было простым:Все скрипты должны быть внешними.Как по обслуживанию, так и по производительности.

(Почему производительность?Потому что, если код отдельный, браузерам будет легче его кэшировать.)

JavaScript не принадлежит HTML-коду, и если он содержит специальные символы (например, <, >) это даже создает проблемы.

Сегодня масштабируемость веб-сайтов изменилась.Сокращение количества запросов стало обоснованным решением из-за задержки выполнения нескольких HTTP-запросов.Это усложняет ответ:в большинстве случаев внешний JavaScript является все еще рекомендуемые.Но в некоторых случаях, особенно при очень небольших фрагментах кода, имеет смысл встроить их в HTML-код сайта.

Другие советы

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

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

Экстернализация javascript — одно из правил производительности Yahoo:http://developer.yahoo.com/ Performance/rules.html#external

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

Если вас волнует только производительность, большинство советов в этой теме совершенно неверны и становятся все более и более неправильными в эпоху SPA, когда мы можем предположить, что страница бесполезна без кода JS.Я потратил бесчисленное количество часов на оптимизацию времени загрузки страниц SPA и проверку этих результатов в разных браузерах.В целом повышение производительности за счет реорганизации вашего HTML может быть весьма значительным.

Чтобы добиться максимальной производительности, вы должны воспринимать страницы как двухступенчатые ракеты.Эти два этапа примерно соответствуют <head> и <body> фазы, но думайте о них как о <static> и <dynamic>.Статическая часть — это, по сути, строковая константа, которую вы отправляете в канал ответа так быстро, как только можете.Это может быть немного сложно, если вы используете много промежуточного программного обеспечения, которое устанавливает файлы cookie (их необходимо установить перед отправкой http-контента), но в принципе это просто очистка буфера ответа, надеюсь, прежде чем переходить к некоторому шаблонному коду (razor, php, и т. д.) на сервере.Это может показаться трудным, но я просто объясняю это неправильно, потому что это почти тривиально.Как вы уже догадались, эта статическая часть должна содержать весь встроенный и минимизированный JavaScript.Это будет выглядеть примерно так

<!DOCTYPE html>
     <html>
         <head>
             <script>/*...inlined jquery, angular, your code*/</script>
             <style>/* ditto css */</style>
         </head>
         <body>
             <!-- inline all your templates, if applicable -->
             <script type='template-mime' id='1'></script>
             <script type='template-mime' id='2'></script>
             <script type='template-mime' id='3'></script>

Поскольку отправка этой части по сети практически ничего не стоит, вы можете ожидать, что клиент начнет получать ее где-то через 5 мс + задержка после подключения к вашему серверу.Если предположить, что сервер находится достаточно близко, эта задержка может составлять от 20 до 60 мс.Браузеры начнут обрабатывать этот раздел, как только они его получат, и время обработки обычно превышает время передачи в 20 или более раз, что теперь является вашим амортизированным окном для обработки на стороне сервера. <dynamic> часть.

Браузеру (хром, остальные, возможно, на 20% медленнее) требуется около 50 мс для обработки встроенного jquery + signalr + angular + ng animate + ng touch + ng routers + lodash.Это само по себе удивительно.Большинство веб-приложений имеют меньше кода, чем все эти популярные библиотеки вместе взятые, но, скажем, у вас его столько же, поэтому мы выиграем задержку + 100 мс обработки на клиенте (эта задержка достигается за счет второго фрагмента передачи).К моменту прибытия второго фрагмента мы уже обработали весь js-код и шаблоны и можем приступить к выполнению dom-преобразований.

Вы можете возразить, что этот метод ортогонален концепции встраивания, но это не так.Если вы вместо встраивания ссылаетесь на cdns или свои собственные серверы, браузеру придется открыть другое соединение (соединения) и отложить выполнение.Поскольку это выполнение в основном бесплатное (поскольку серверная часть общается с базой данных), должно быть ясно, что все эти переходы будут стоить дороже, чем полное отсутствие переходов.Если бы существовала особенность браузера, говорящая, что внешний js выполняется быстрее, мы могли бы измерить, какой фактор доминирует.Мои измерения показывают, что дополнительные запросы снижают производительность на этом этапе.

Я много работаю над оптимизацией SPA-приложений.Люди часто думают, что объем данных имеет большое значение, хотя на самом деле часто доминируют задержка и исполнение.Минимизированные библиотеки, которые я перечислил, добавляют до 300 КБ данных, и это всего лишь 68 КБ в сжатом виде или загрузка 200 мс на 2-мегабитном телефоне 3G/4G, что является именно той задержкой, которая потребовалась бы на том же телефоне, чтобы проверить, есть ли на нем те же данные. уже в своем кеше, даже если он был кэширован через прокси-сервер, поскольку налог на мобильную задержку (задержка между телефоном и вышкой) все еще применяется.Между тем, соединения с настольными компьютерами, которые имеют меньшую задержку первого перехода, в любом случае обычно имеют более высокую пропускную способность.

Короче говоря, прямо сейчас (2014 год) лучше всего инлайнить все скрипты, стили и шаблоны.

РЕДАКТИРОВАТЬ (МАЙ 2016 ГОДА)

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

я думаю специфично для одной страницы, короткий сценарий это (единственный) оправданный случай для встроенного скрипта

На самом деле, есть довольно веский аргумент в пользу использования встроенного JavaScript. Если js достаточно мал (однострочный), я предпочитаю встроенный JavaScript по двум причинам:

Местонахождение.Нет необходимости перемещаться по внешнему файлу, чтобы проверить поведение некоторых JavaScript.
АЯКС.Если вы обновляете какой-либо раздел страницы через AJAX, вы может потеряйте все обработчики DOM (onclick и т. д.) для этого раздела, в зависимости от того, как вы их привязали.Например, используя jQuery вы можете либо использовать live или delegate методы, чтобы обойти это, но я считаю, что если js достаточно мал, предпочтительнее просто поместить его в строку.

Еще одна причина, по которой вам всегда следует использовать внешние скрипты, — это упрощение перехода к Политика безопасности контента (CSP).По умолчанию CSP запрещает все встроенные скрипты, что делает ваш сайт более устойчивым к XSS-атакам.

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

Тогда при разработке сайта на каждую html-страницу вы включаете только те, которые необходимы.Когда вы запустите свой сайт, вы можете оптимизировать его, объединив каждый js-файл, необходимый странице, в один файл.

Единственная защита, которую я могу предложить для встроенного javascript, заключается в том, что при использовании строго типизированных представлений с .net MVC вы можете ссылаться на переменные C# в середине javascript, которые я нашел полезными.

Три соображения:

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

Внешние скрипты также легче отлаживать с помощью Firebug.Мне нравится проводить модульное тестирование моего JavaScript и использовать все это для внешней помощи.Я ненавижу видеть JavaScript в PHP-коде и HTML, мне кажется, это большой беспорядок.

Что касается сохранения внешнего JavaScript:

В ASP.NET 3.5SP1 недавно появилась функция создания ресурса составного сценария (объединение нескольких js-файлов в один).Еще одним преимуществом этого является то, что когда сжатие веб-сервера включено, загрузка одного файла немного большего размера будет иметь лучшую степень сжатия, чем многие файлы меньшего размера (также меньше накладных расходов HTTP, обратного пути и т. д.).Я предполагаю, что это экономит начальную загрузку страницы, а затем включается кеширование браузера, как упоминалось выше.

Помимо ASP.NET, в этом скринкасте более подробно объясняются преимущества:http://www.asp.net/learn/3.5-SP1/video-296.aspx

Еще одним скрытым преимуществом внешних скриптов является то, что их можно легко запустить с помощью средства проверки синтаксиса, например jslint.Это может уберечь вас от множества душераздирающих и трудно обнаруживаемых ошибок IE6.

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

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

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

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

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

Всегда старайтесь использовать внешние Js, поскольку встроенный JS всегда сложно поддерживать.

Более того, профессионально необходимо использовать внешний js, поскольку большинство разработчиков рекомендуют использовать внешний js.

Я сам использую внешний js.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow