Question

我正在尝试加载bootstrap.min.js文件。我有两个选择。第一个是从远程服务器加载它：

＆＃13;

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

＆＃13;

第二个是从我的服务器加载它：

＆＃13;

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

＆＃13;

在第一种情况下，脚本将异步加载，这意味着我的页面的呈现不会被阻止。在第二种情况下，脚本将阻止我的页面的呈现。我是对的吗？

如果我尝试执行此操作，将如何加载blootstrap.min.js（异步或同步）：

＆＃13;

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

＆＃13;

而且：

＆＃13;

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

＆＃13;

我有预感，在这两种情况下，渲染都不会被阻止。你怎么看？谢谢！

Answer 1

如果您将源代码加载代码放在<body>标记的末尾，则即使新的script标记附加到头部，渲染也不会被阻止。这是因为当你到达那个部分时，大部分渲染已经完成了。

In newer browsers，您可以向脚本标记添加async属性，该属性不会阻止渲染。所以我怀疑通过JS异步加载文件也不会阻止渲染，即使你在文件顶部附近也是如此。

加载脚本是否会动态阻止渲染？

1 个答案: