JavaScript基础学习（一）：HTML中的JavaScript

2021/5/4 12:26:43

编程Tag： javascript async 属性页面渲染 html 脚本学习 defer

本文主要是介绍JavaScript基础学习（一）：HTML中的JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

写在之前

defer和async的区别：

<script src="url1" defer="defer"></script>
<script src="url2" defer="defer"></script>

多个外部脚本在defer之后，执行顺序不变，保证第一个外部脚本在第二个外部脚本之前执行。

<script src="url1" async="async"></script>
<script src="url2" async="async"></script>

多个标记为async的外部脚本并不能保证它们按照出现的顺序执行，第二个脚本可能先于第一个脚本执行

type属性，这是一个可选的属性，用于表示代码块中脚本语言的内容类型(MIME类型)，按照惯例这个属性的值一般都是"text/javascript"，如果属性值是"module"，那么代表代码块会被当成ES6模块，只有在这时代码块中才能出现import和export关键字。

使用<script>的两种方式

<script>
	function sayHi()
	{
		alert("Hi");
	}
</script>

行内脚本就是直接把JavaScript代码放在<script>中，行内脚本不能设置async属性和defer属性，这就表示行内脚本在执行时会阻塞页面。

<script src=""></script>

使用src属性可以引入外部脚本，外部脚本如果没有设置defer属性和async属性，在外部脚本的下载和执行过程中都会阻塞页面。
如果在设置src属性的<script>元素中加入了行内脚本，浏览器会忽略行内脚本。

<script>位置对页面渲染速度的影响
把<script>标签放到<body>元素中其他所有元素的后面，可以使浏览器在处理JavaScript之前完成页面渲染。
浏览器在遇到<body>标签之后开始渲染，在完成渲染之前，浏览器窗口完全空白。

这篇关于JavaScript基础学习（一）：HTML中的JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！