＜script＞标签的详细解释 以及附属的属性 defer async

01:解释

02:使用标签的两种方式：
第一种方法 ：

//此时存在阻塞执行， 浏览器内核 将 它当作是一个普通的 标签一样去解析执行， 且这样的

第二种方法：

//尤其要注意： 使用 外部js的时候 要添加 defer = “defer”属性，或者直接写 defer即可。
//因为 async/defer 属性 是 布尔属性 。

//注：01：包含在标签<script> 内部的 js代码 ， 跟包含在js文件中的代码 的写法是 一摸一样	的。	两者之间可以互换位置，因此我们经常可以 把包含在文件中的 代码 想象成 包含在 标签的内	部的情况。

02：类似 等等这些标签 以及标签中的 内容， 和

03：

03：

//注意：根据上边画红线的 意思 我们知道， 此时 浏览器内核 把

03：利用属性 更好的解决问题：

01：defer属性：
a:仅仅针对的是 外部的js文件。

b:写在 <script>标签中  ， 形式如下： 

//也可以直接添加 defer属性 。

c:这个属性的用法：

02：async属性:
a：适用于外部的 js文件。
b：写法形式：

c:这个属性的目的：


到目前为止：我们处理 html js css代码 是通过 defer async 属性。

他们的属性（defer async）：指定了 js在 html文件的加载顺序： 在 html文档全部加载完成之后 在处理 js代码 ， 这样就保证了 先加载html ,可以保证dom树 加载完成 ，我们 在使用js代码 去选择 以及操作！
或者将 引用外部的 js代码的 script标签 放到 body标签的最底部。 让html加载完了之后 再去加载 这个标签。

或者 写一个window.onload()事件也可以。这个时候 我们可以 使用外部的js代码 ， 且至于 head标签中。

解释 html js css的加载顺序。详解关于html，css，js三者的加载顺序问题：
这篇文章主要介绍了关于html，css，js三者的加载顺序问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值。




<script src="js/*.js>

DOM文档的加载顺序是由上而下的顺序加载；

1、DOM加载到link标签

css文件的加载是与DOM的加载并行的，也就是说，css在加载时Dom还在继续加载构建，而过程中遇到的css样式或者img，则会向服务器发送一个请求，待资源返回后，将其添加到dom中的相对应位置中；

2、DOM加载到script标签

由于js文件不会与DOM并行加载 ，因此需要等待js整个文件加载完之后才能继续DOM的加载，倘若js脚本文件过大，则可能导致浏览器页面显示滞后，出现“假死”状态，这种效应称之为“阻塞效应”；会导致出现非常不好的用户体验；
而这个特性也是为什么在js文件中开头需要$(document).ready(function(){})或者（function(){}）或者window.onload,即是让DOM文档加载完成之后才执行js文件，这样才不会出现查找不到DOM节点等问题；
js阻塞其他资源的加载的原因是：浏览器为了防止js修改DOM树，需要重新构建DOM树的情况出现；

3、解决方法

前提，js是外部脚本；
在script标签中添加 defer=“defer”/ 或者 直接 写一个defer属性 ，则会让js与DOM并行加载，待页面加载完成后再执行js文件，这样则不存在阻塞；

在scirpt标签中添加 async=“async”，这个属性告诉浏览器该js文件是异步加载执行的，也就是不依赖于其他js和css，也就是说无法保证js文件的加载顺序，但是同样有与DOM并行加载的效果；

同时使用defer和async属性时，defer属性会失效；

可以将scirpt标签放在body标签之后，这样就不会出现加载的冲突了。

04：经过测试 我们可以 同时在 head标签中 引用外部的js代码，同时 在 body标签中 再一次 使用