第二章：在html中使用javascript-Toy模板网

这篇具有很好参考价值的文章主要介绍了第二章：在html中使用javascript。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、在html页面中插入js的主要方法就是使用<script>元素

2、html4.01为<script>定义了以下6个属性：【language已经废弃，其他5个属性都是可选的】

async 表示应该立即下载脚本，但不应该妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本，仅对外部文件有效【指定async属性的目的是不让页面等待脚本下载和执行，从而异步加载页面其他内容，为此，建议异步脚本不要在加载期间修改DOM】

charset 表示通过src属性指定的代码的字符集，由于大多数浏览器会忽略它的值，因此该属性很少有人使用

defer 【立即下载，延迟执行】表示脚本可以延迟到文档完全被解析和显示之后再执行。仅对外部文件有效

language 已废弃

src 表示包含要执行代码的外部文件

type 可以看作language 的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）默认值：text/javascript

3、使用script 元素的方式有两种：

3.1、直接在页面中嵌入js代码

3.2、包含外部的js文件

4、通过<script> 元素的src属性还可以包含来自外部域的js文件，需要注意的是，在访问自己不能控制的服务器上的js文件一定要多加小心，如果不幸遇到了怀有恶意的程序员，那他们随时都可能替换该文件中的代码，因此，如果想包含来自不同于域的代码，则要么你是那个域的所有者，要么那个域的所有者值得信赖

5、只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对他们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后是第三个，第四个....

6、标签的位置

传统的做法，所有<script>元素都放在<head>元素中，这样做的目的就是把所有外部文件（包括css文件和js文件）的引用都放在相同的地方，可是文档的<head>元素中包含所有的<script>元素，就意味着必须等到全部的js代码都被下载，解析和执行完成以后，才能开始呈现也免得内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多js代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都把全部js引用放在<body>元素中页面内容的后面。

7、嵌入代码和外部文件

在html中嵌入js代码虽然没有问题，但是一般认为最好的做法还是尽可能的使用外部文件来包含js代码，不过没有硬性规定必须使用外部文件。使用外部文件的优点：

可维护性，把所有js文件放在一个文件夹中，维护起来轻松很多，

可缓存，浏览器能够根据具体的设置缓存链接的所有外部js文件，也就是说，如果有两个页面都使用同一个文件，那么这个文件只需要下载一次。因此，最终的结果就是能够加快页面的加载速度

8、总结：asnyc和defer区别和适用场合

加了asnyc属性，浏览器在渲染页面的同时，偷偷的下载js脚本文件，下载下来后立马执行里面的js，这时候页面渲染中断

以前html4规范里，有defer属性，加了这个属性，浏览器也偷偷的下载js文件，但是下载下来后，等着浏览器渲染把html标签全部渲染完，才执行js文件

第二章：在html中使用javascript,javascript,html,前端