Как предотвратить блокировку JavaScript HTML

Как предотвратить блокировку JavaScript от блокировки других JavaScript от начала загрузки?Как предотвратить блокировку JavaScript HTML

У меня есть следующие на моем веб-сайте:

<html> 
<body> 
.... 
<script type="text/javascript" src="http://example.com/ex.js"></script> 
<script type="text/javascript" src="http://google.com/google-maps.js"></script> 
</body> 
</html>

Когда я использую YSlow Firefox дополнение, я могу увидеть на закладке сетевого трафика, что google.com/google-maps.js JavaScript не начнется не загружая до ex.js имеет заканчивает загрузку.

Вопрос Как я могу иметь как ex.js и google-maps.js начинаются сразу и параллельно загрузке?

источник

2010-01-26 Teddy

Файлы JavaScript всегда будут загружены в том порядке, в котором они указаны.

источник

2010-01-26 17:34:32 Trevor

Как я могу загрузить файлы JS параллельно? – Teddy

@ Тедди: Вы не можете. Это функция браузера, а не разметка. IIRC, Chrome и Safari 4 будут выполнять параллельную загрузку внешнего JavaScript, но вы не можете заставить другие браузеры вести себя таким образом. –

@ Эрик Колб, посмотрите @womp - он, похоже, имеет небольшой скрипт, который заставляет другие браузеры загружаться параллельно. – Teddy

Это некрасиво, но вы можете получить скрипты для загрузки параллельно, введя элементы DOM ... используя javascript.

Отъезд this blog post для рабочего примера.

источник

2010-01-26 17:35:12 womp

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

<script type="text/javascript"> 
    var head = document.getElementsByTagName("head")[0]; 
    var sTag1 = document.createElement("script"); 
    var sTag2 = document.createElement("script"); 
    sTag1.type = sTag2.type = "text/javascript"; 
    sTag1.src = "http://example.com/ex.js"; 
    sTag2.src = "http://google.com/google-maps.js"; 
    head.appendChild(sTag1); 
    head.appendChild(sTag2); 
</script>

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

Если вы хотите, чтобы ваш HTML-код загружался до загрузки скриптов, сохраните их последовательно и поместите их внизу вашего HTML-файла, а не в тег заголовка. Это загрузит страницу перед загрузкой и анализом сценария. См. http://developer.yahoo.net/blog/archives/2007/07/high_performanc_5.html.

источник

2010-01-26 17:38:54

Что такое pro/con's от использования этого в сравнении с тем, что рекомендует @womp. Код выглядит радикально другим. – Teddy

@ Teddy - глядя на ссылку womp, они функционально одинаковы, но в блоге используется цикл для итерации по нескольким источникам сценариев, а затем создаются элементы в виде simlar для моего собственного кода выше. Похоже, что это только для Firefox и Opera, но не Internet Explorer или других, для которых он пишет HTML напрямую с помощью 'writeLn'. –

Используйте <script> элемента async or defer attribute:

Оба async и defer скрипты начинают загрузки сразу без паузы синтаксического анализатор и одновременно поддерживает дополнительный onload обработчик для решения общей необходимости выполнения инициализации , который зависит от скрипта. Разница между async и defer сосредотачивается вокруг, когда сценарий исполняется . Каждый скрипт async выполняет при первой возможности после того, как он закончил загрузку и до windowload событие. Это означает, что возможно (и, вероятно), что async скрипты не выполняются в заказе , в котором они встречаются на странице. С другой стороны, скрипты defer являются , которые должны быть выполнены в порядке , они встречаются на странице. Это выполнение начинается после разбора полностью , но до document DOMContentLoaded событие.

defer поддерживается IE4 +, Firefox 3.5+ Chrome 2+ и Safari 4+.
async поддерживается Firefox 3.6+, Chrome 7+ и Safari 5+. (Нет IE поддержки!)

defer это ваш лучший выбор. Сценарии будут скачать параллельно и выполнить синхронно (в порядке). Он также лучше поддерживается и более предсказуем, чем async. (См. Также this very detailed analysis of async/defer.)

<script defer type="text/javascript" src="script.js"></script>

источник

2011-05-13 02:48:50 josh3736

Как предотвратить блокировку JavaScript HTML

ответ

Смежные вопросы