Веб-производительность, встроенные вопросы сценария

Question

Кто-нибудь может объяснить производительность в сети, загрузить внешний CSS (комбинированный CSS), загрузить внешний Javascript (комбинированный Javascript), встроенный CSS / встроенный JavaScript <- заблокирует загрузку других ресурсов, рекомендуется поместить JavaScript перед внешним CSS </p>

Как я могу поставить JavaScript перед внешним CSS, когда я объединил JavaScript?Есть ли способ не блокировать загрузку изображений, не делая встроенный JavaScript-код внешним скриптом?

Обновление Чтобы уточнить, в соответствии с блогами / статьями о производительности в сети, мы должны сначала загрузить внешний материал, сначала загрузить внешний css перед javascript.Затем выполните встроенный стиль / javascript, но есть встроенный javascript, потому что, как только мы сделаем это после загрузки внешних ресурсов, другие ресурсы под стеком (изображения) будут заблокированы.

Скажем, в Firefox, где у вас есть 6 соединений (предположим), вы открываете 2 соединения на внешнем CSS / внешнем JavaScript, поэтому у вас еще осталось 4 соединения, теперь вы хотите использовать эти открытые соединения, но проблема в том,есть встроенный JavaScript, который блокирует загрузку других ресурсов и будет продолжать загружаться только после выполнения встроенного JavaScript.

Некоторые говорят, что вам нужно поместить встроенный JavaScript перед внешним, чтобы открытые соединенияиспользуются, но проблема в том, что вам нужны некоторые ссылки из внешних источников, что делает невозможным поместить его перед внешними ресурсами.В других блогах / статьях говорилось, что мы должны поместить встроенный javascript во внешний и объединить их, создав один внешний javascript (на бэкенде, кэшированный), но это похоже на большую работу на текущем сайте, который я делаю.

Есть ли способ использовать производительность в сети, если у вас есть встроенный JavaScript, который требует / зависит от ваших внешних JavaScript?Спасибо

Answer 1

при использовании jquery, вы можете попробовать: http://code.google.com/p/rloader/

Answer 2

ну, в общем, вы хотите:

• ваш внешний javascript, который будет загружаться асинхронно (и, если возможно, в одном файле, минимизироваться и сжиматься вашим веб-сервером вне курса)
• вашвстроенный javascript должен быть неблокирующим

, если вы хотите достичь этого, вы можете изучить labjs , который:

все-целевой загрузчик JavaScript по требованию [который] уменьшает блокировку ресурсов при загрузке страницы [...], загружая (и выполняя) все сценарии параллельно, насколько позволяет браузер.Вы можете легко указать, какие сценарии имеют зависимости порядка выполнения, и LABjs обеспечит правильный порядок выполнения.

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

Answer 3

Когда вы, например, ссылаетесь на файл javascript в своем заголовке, как конструкция DOM, так и рендеринг откладываются до завершения загрузки файла скрипта и также запускаются.

Самый эффективный способ - переместить внешний файл JS в конец вашего элемента и добавить встроенный скрипт, на который он опирается, сразу после него.

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

Если вы хотите перейти на следующий уровень, переместив их в конец своего тела, вы можете использовать атрибут defer на теге внешнего скрипта: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer Чтобы избежать каких-либо потенциальныхпроблемы зависимостей, вы можете поместить свой встроенный скрипт в отдельный файл, загруженный из вашего собственного домена, и загрузить его после этого внешнего скрипта, используя тот же атрибут defer для него.

Defer поддерживает выполнение файлов JS вв порядке их появления в исходном коде, не блокируя рендеринг.