JavaScript初体验之基础学习（一）

最新推荐文章于 2024-06-10 22:18:41 发布

一个菜鸟测试

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量117

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_40205788/article/details/108147102

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript初体验之基础学习（一）

<script>元素

async：可选，表示应该立刻下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再之心。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
language：已废弃。原本用于表示编写代码使用的脚本语言，目前大多数浏览器会忽略这个属性，因此没有必要再用了
src：可选。表示包含要执行代码的外部文件。
type：可选：可以看成language的替代品；表示编写代码使用脚本语言的内容类型（也成为mime类型）。如果没有指定这个属性，默认值为text/javascript。

在HTML中使用Javascript

使用<script>元素的方式有两种：

直接在页面中嵌入JavaScript代码和包含外部JavaScript文件

<script type="text/javascript">
	function sayHi(){
		alert("Hi!")
	}

通过<script>元素来包含JavaScript文件

<script type="text/javascript" src="example.js"></script>

标签位置

按照惯例<script>元素都放在页面<head>元素，意味着必须等到JavaScript代码被下载、解析和执行完成以后，才能开始呈现<body>标签中的内容。这将导致浏览器出现明显的延迟、期间浏览器窗口是一片空白。为了避免这个问题，现代web应用程序一般把全部JavaScript引用放在<body>元素页面的内容后面。

<!DOCTYPE html>
<html>
	<head>
		<title>Exanple HTML Page</title>
	</head>
	<body>
		<!-- 这里放内容 -->
		<script type="text/javascript" src="example1.js"></script>
		<script type="text/javascript" src="example2.js"></script>
	</body>
</html>

defer标签的使用

在<script>元素中的defer只适用于外部脚本文件，设置它相当于告诉浏览器立即下载，但延迟到整个页面解析完毕后遇到</html>标签时执行。根据H5规范，先下载外部JavaScript文件，然后解析整个页面，再依次执行example1.js和example2.js，然后执行DOMContentLoaded事件。但现实中，延迟脚本并不一定会按照执行顺序，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。如下：

<!DOCTYPE html>
<html>
	<head>
		<title>Exanple HTML Page</title>
		<script type="text/javascript" defer src="example1.js"></script>
		<script type="text/javascript" defer src="example2.js"></script>
	</head>
	<body>
		<!-- 这里放内容 -->
	</body>
</html>

async属性

async属性与defer属性类似，用于改变处理脚本的行为。async只适用于外部脚本文件，与defer不同之处在于，标记为async的脚本并不保证按照指定它们的先后顺序执行。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他元素。因此，建议异步脚本不要再加载期间修改DOM。
异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

<!DOCTYPE html>
<html>
	<head>
		<title>Exanple HTML Page</title>
		<script type="text/javascript" async src="example1.js"></script>
		<script type="text/javascript" async src="example2.js"></script>
	</head>
	<body>
		<!-- 这里放内容 -->
	</body>
</html>

一个菜鸟测试

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript初体验之基础学习（一）

JavaScript初体验之基础学习（一）<script>元素async：可选，表示应该立刻下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再之心。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。language：已废弃。原本用于表示编写
复制链接

扫一扫