2016-04-03 2 views
1

Я пытаюсь загрузить файл bootstrap.min.js. У меня есть два варианта. Первый, чтобы загрузить его с удаленного сервера:Выполняет ли загрузка скриптов динамически блокировать рендеринг?

<!DOCTYPE html> 
 
<html lang='ru'> 
 
\t <head> 
 
\t \t <meta charset='utf-8'> 
 
\t \t <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> \t \t 
 
\t </head> 
 
\t <body> 
 
\t \t ... 
 
\t </body> 
 
</html>

Второй должен загрузить его с моего сервера:

<!DOCTYPE html> 
 
<html lang='ru'> 
 
\t <head> 
 
\t \t <meta charset='utf-8'> 
 
\t \t <script src="js/bootstrap.min.js"></script> \t \t 
 
\t </head> 
 
\t <body> 
 
\t \t ... 
 
\t </body> 
 
</html>

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

Как blootstrap.min.js быть загружен (асинхр или синхронизации), если я пытаюсь сделать это:

<!DOCTYPE html> 
 
<html lang='ru'> 
 
\t <head> 
 
\t </head> 
 
\t <body> 
 
\t \t <script> 
 
\t \t \t var bootstrap = document.createElement('script'); 
 
\t \t \t \t bootstrap.src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"; 
 
\t \t \t var head = document.getElementsByTagName('head')[0]; 
 
\t \t \t \t head.appendChild(bootstrap); 
 
\t \t </script> 
 
\t \t ... 
 
\t </body> 
 
</html>

И это:

<!DOCTYPE html> 
 
<html lang='ru'> 
 
\t <head> 
 
\t </head> 
 
\t <body> 
 
\t \t <script> 
 
\t \t \t var bootstrap = document.createElement('script'); 
 
\t \t \t \t bootstrap.src = "js/bootstrap.min.js"; 
 
\t \t \t var head = document.getElementsByTagName('head')[0]; 
 
\t \t \t \t head.appendChild(bootstrap); 
 
\t \t </script> 
 
\t \t ... 
 
\t </body> 
 
</html>

У меня есть догадка, что в обоих случаях рендеринг не будет заблокирован. Как вы думаете? Благодаря!

+0

Это будет асинхронным ... – Rayon

+0

попробуйте использовать атрибут асинхронного для сценария http://www.w3schools.com/tags/att_script_async.asp –

ответ

0

Если вы поместили код загрузки источника в конец вашего тега <body>, рендеринг не будет заблокирован, хотя новые теги script добавляются к голове. Это потому, что большая часть рендеринга уже выполняется, когда вы попадаете в эту часть.

In newer browsers, вы можете добавить атрибут async к тегу скрипта, который не будет блокировать рендеринг. Поэтому я подозреваю, что загрузка файла асинхронно через JS также не будет блокировать рендеринг, даже если вы делаете это в верхней части файла.

+0

, как я могу добавить что-то и по-прежнему блокировать. ? благодаря –

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