JavaScript是一种基于ECMAScript标准的编程语言，由核心、DOM和BOM三部分组成。通常通过<script>标签内嵌或引入外部文件使用。推荐将js文件放在页面底部以提高性能，并利用defer或async属性优化加载。defer保证脚本按顺序执行，而async则不保证执行顺序，适用于非依赖性脚本。
JavaScript是什么？
简单来说，JavaScript是一种以ECMAScript作为语言标准的编程语言，通常我们讲的ECMAScript更多被等同于JavaScript，但完整JavaScript实际上有三部分：ECMAScript+相关扩展
完整的JavaScript包含以下内容
- ECMAScript（核心）
- DOM（文档对象模型）
- BOM（浏览器对象模型）
HTML中JavaScript的使用方法
JavaScript有两种使用方法
- 直接将js代码嵌入网页的
<script>标签之中 - 通过
<script>标签引入外部JavaScript文件（推荐使用)
推荐使用外部文件原因：
- 可维护性：js代码若分散到不同的html页面中，后期维护困难
- 性能提升：浏览器会根据特定设置缓存js文件，若多个页面引用同一个js脚本，那么该只需下载一次，这意味着页面的加载速度会变得更快。
不管以哪种方法编写JavaScript，浏览器都会按照<script>标签在页面中出现的顺序依次解析它们
<script>标签的使用规则
标签位置
过去人们习惯将<script>标签放置在页面的<head>标签中
-
目的：将外部的css和js文件集中放到一起
-
缺点：页面将在所有js代码下载、解析和解释完成后才能开始渲染页面（页面在浏览器解析到body标签时开始渲染），在此期间浏览器窗口完全空白。
-
解决方法：现代WEB应用程序通常将js文件及相关代码放在
<body>元素的末尾位置
标签属性
1.推迟执行脚本：defer属性
//使用方法
<script defer src=""></script>
给<script>标签添加defer属性
- 目的：告诉浏览器立即开始下载js文件，但推迟执行该脚本。
- 原因：添加defer属性表示该脚本的执行不会影响页面结构，完全可以在页面解析完成之后再执行脚本内容。
2.异步执行脚本：async属性
//使用方法
<script async src=""></script>
给<script>标签添加async 属性
- 目的1：告诉浏览器不必等脚本下载、执行完毕后再加载页面（与defer属性目的相同）
- 目的2：同时也告诉浏览器不必等该异步脚本下载和执行后再加载其它脚本
defer和async的比较
- 相同点：从脚本处理方式上看，两者作用类似，都是告诉浏览器页面解析不需等待脚本的下载执行，而且两者都只适用于外部引入的脚本。
- 不同点：添加async属性的脚本不能保证执行顺序为
<script>标签的放置顺序
注意：在实际情况中，推迟执行的脚本并不一定会按照顺序执行，因此最好的方法是只包含一个带有defer属性的脚本，而且考虑到不同浏览器对defer属性的支持程度不一致，最好还是把推迟执行的脚本放到页面底部。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
