2016-04-03 42 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

我怎麼追加一些東西仍然阻塞。 ?謝謝 –