📌  相关文章
📜  javascript normal vs async vs defer - Javascript(1)

📅  最后修改于: 2023-12-03 15:16:05.908000             🧑  作者: Mango

Javascript Normal vs Async vs Defer

当浏览器解析HTML时，遇到<script>标签时，它会立即暂停HTML解析，然后执行<script>中的Javascript代码，这意味着在Javascript执行期间，HTML解析将停止。这可以导致网页的渲染速度明显变慢。但是有两种解决方案：

  1. 把所有Javascript代码写在HTML底部，这样整个HTML页面可以被解析完成，然后再开始执行Javascript代码。
  2. 使用async或defer属性。这些属性允许Javascript代码异步加载，不会暂停HTML解析。
Normal JavaScript

普通的Javascript代码是没有async或defer属性的。默认情况下，代码会按顺序执行，并阻塞HTML页面的渲染。例如，以下代码会阻塞HTML页面的渲染：

<!DOCTYPE html>
<html>
<head>
	<title>Normal Javascript</title>
	<script>
		function sleep(milliseconds) {
    		const date = Date.now();
    		let currentDate = null;
    		do {
        		currentDate = Date.now();
    		} while (currentDate - date < milliseconds);
		}

		sleep(5000); // Blocks page rendering for 5 seconds
	</script>
</head>
<body>
	<p>This is a sample HTML paragraph</p>
</body>
</html>
Async JavaScript

使用async属性可以异步加载Javascript代码。这意味着HTML页面不会等待Javascript代码执行完成，可以继续渲染页面，而Javascript代码会在后台异步执行。例如：

<!DOCTYPE html>
<html>
<head>
	<title>Async Javascript</title>
	<script async>
		alert('Hello from Async script tag!');
	</script>
</head>
<body>
	<p>This is a sample HTML paragraph</p>
</body>
</html>

在这个例子中，Javascript代码的弹出窗口会在HTML页面加载完成后出现。这也意味着，Javascript代码的执行顺序不能被保证。

Defer JavaScript

使用defer属性可以异步加载Javascript代码，并且保证执行顺序。这意味着HTML页面不会等待Javascript代码执行完成，可以继续渲染页面，但Javascript代码会在HTML解析完成后立即执行。例如：

<!DOCTYPE html>
<html>
<head>
	<title>Defer Javascript</title>
	<script defer>
		alert('Hello from Defer script tag!');
	</script>
</head>
<body>
	<p>This is a sample HTML paragraph</p>
</body>
</html>

在这个例子中，Javascript代码的弹出窗口会在HTML解析完成后出现。此外，在<script>标签中可以定义多个具有defer属性的Javascript代码，这些代码将根据它们在HTML中的位置依次执行。

总结：

  1. 默认情况下，Javascript代码是阻塞的，会暂停HTML解析。
  2. 使用async属性可以异步加载Javascript代码，但执行顺序不能保证。
  3. 使用defer属性可以异步加载Javascript代码，并保证执行顺序。