Является ли использование встроенного JavaScript предпочтительнее внешнего включения, если скрипт действительно короткий?

Question

Я использую внешние JavaScripts на веб-сайте, поскольку я всегда стараюсь поддерживать JavaScript на низком и внешнем уровне.

Но Скорость страницы Google дает это предложение

Следующие внешние ресурсы имеют небольшие органы реагирования.Встраивание ответа в HTML может уменьшить блокировку рендеринга страницы.

http://websiteurl/ должен включать следующие небольшие ресурсы: http://websiteurl/script.js

Этот внешний файл js имеет только этоcontent

$(document).ready(function() {
    $("#various2").fancybox({
        'width': 485,
        'height': 691,
    });
});

Но в Yslow я получаю это предложение

Оценка отсутствует. Сделайте JavaScript и CSS внешним

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

There are a total of 3 inline scripts

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

Что правильно, Google илиYahoo

Answer 1

Это немного проблемный пример, по многим направлениям.

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

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

Почему Google предлагает включить этот крошечный скрипт?

• Поскольку 20% посещений страницы вы получаете незагрунтованный кеш
• Если у вас отсутствует кэш-память, вероятно, потребуется открыть новое соединение с вашим сайтом (1 поездка туда и обратно), а затем данные, доставленные во 2 поездке туда и обратно. (если вам повезет, вы можете использовать соединение keepalive, и оно сокращается до 1 поездки туда и обратно.
• Для обычного «глобального» веб-приложения на английском языке вы ищете типичное время прохождения сигнала в 110 мс для службы, размещенной в США. Если вы используете CDN, число, вероятно, будет вдвое меньше.
• Даже если ресурс локальный, веб-браузеру все равно может понадобиться доступ к диску, чтобы получить этот крошечный файл.
• Не асинхронные или отложенные теги JavaScript-скрипта блокируют , если этот скрипт находится где-то посередине вашей страницы, он будет зависать до тех пор, пока скрипт не загрузится.

С точки зрения производительности, если доступны только 2 варианта:

1. Поместить встроенный бит длиной 50 символов JavaScript
2. Поместите 50 символов в отдельный файл и подайте его.

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

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

Answer 2

Создание встроенных сценариев может иметь некоторые отрицательные последствия -

a) Организация кода - ваш код разбросан между вашей разметкой, что влияет на читабельность

b) Сокращение кода и запутывание становится затруднительным

Лучше всего хранить ваши js в отдельных файлах, а затем во время сборки интегрировать их все в один файл, минимизировать и скрыть это.

Answer 3

Это не совсем так. Вы можете настроить веб-сервер (по крайней мере apache), чтобы сделать scrips / ccs встроенными, когда они обслуживаются.

Вот полезная ссылка

http://www.websiteoptimization.com/speed/tweak/mod_pagespeed/

Answer 4

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

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

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

Answer 5

Доклад Аарона Питерса из прошлогоднего Velocity EU дает хорошее представление о вариантах, и курс, который вы должны выбрать, - http://www.slideshare.net/startrender/fast-loading-javascript

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

В зависимости от задержки это может стоить включить большие скрипты, например, Bind mobile загружает js на первой загруженной странице, которую затем кэширует в localalstorage для дальнейшего использования.страниц.

Адди Османи недавно собрал экспериментальную библиотеку, чтобы помочь людям поиграть со скриптами кэширования в локальном хранилище - http://addyosmani.github.com/basket.js/

Answer 6

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

Причина, по которой Йслоу дает следующее предупреждение:

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

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

Answer 7

Я обычно пишу встроенный JavaScript, особенно если скрипт такой маленький.Я бы сказал, просто вставьте его в свой код.Это не приведет к значительному увеличению размера http-документа.