JS script标签位置、defer、async属性

最新推荐文章于 2024-04-19 20:26:02 发布

CxZzzE

最新推荐文章于 2024-04-19 20:26:02 发布

阅读量472

点赞数

分类专栏：笔记 JavaScript HTML 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/CxZzzE/article/details/128500630

版权

笔记同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

JS script标签位置、defer、async属性

常规script标签

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		/** 
		 ** 位置1. script 标签在 head 中
		 ** 由于 html 代码是同步按顺序执行的，意味着必须把所有的 script 加载解析执行完成后，再继续渲染页面
		 ** 在多文件时，页面可能出现长白屏时间的问题
         **/
		<script src="test1.js"></script>
		<script src="test2.js"></script>
	</head>
	<body>
	</body>
	/** 
	 ** 位置2. script 标签在 body 之后
	 ** script 标签中的代码不会阻塞 html 解析，但部分需求可能会遇到部分数据必须在 html 渲染完成前准备完毕，因此此方法也不是万能的
     **/
	<script src="test1.js"></script>
	<script src="test2.js"></script>
</html>

使用 defer 属性的script标签（推迟执行脚本）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		/** 
		 ** 浏览器解析到 script 标签时，如果标签带有 defer 属性，浏览器会另外开辟一个进程来加载 js 资源，而不会阻塞 html 加载
		 ** 注：带有 defer 属性的 script 资源加载完成后不会立即执行，而是等待 html 渲染完成后执行
         **/
		<script src="test1.js" defer></script>
		<script src="test2.js" defer></script>
	</head>
	<body>
	</body>
</html>

使用 async 属性的script标签（异步执行脚本）

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		/** 
		 ** 浏览器解析到 script 标签时，如果标签带有 async 属性，浏览器会另外开辟一个进程来加载 js 资源
		 ** 资源加载完成后会暂停 html 渲染，并执行 script 脚本
         **/
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
	<body>
	</body>
</html>