script标签作用

script标签放在哪个位置

(资料图片)

defer与async区别

1.script标签作用

在 HTML 中，script标签用来书写JavaScript代码，进行一些交互。可以在标签内部编写代码，也可以通过链接引入外部js代码。

2.script标签放在哪个位置

内部js代码，即在标签内部书写的js代码

将script标签放在head里面，如：

上面的代码打印app为null。

因为浏览器解析html是从上往下的，由于执行script代码时，还没有解析到body，所以获取不到id为app的元素。

解决办法：

1.给js代码用window.onload函数包裹，让js代码在html解析完成后再执行。

2.将script标签放在body标签里面的最下面，从上往下按顺序执行。

外部js代码

script标签通过链接引入外部js代码，此时标签里面就不能书写代码了。

1.可以放head标签里面，需要添加defer或者async属性来延迟执行js，推荐使用defer。

2.将script标签放在body标签里面的最下面，从上往下按顺序执行。

3.defer与async区别

defer：

加载js代码的同时，不阻塞html往下解析，

加载完js代码后，等html解析完成再执行里面的js代码。

多个script标签加了defer，就在html解析完成后按顺序执行。

async：

加载js代码的同时，不阻塞html往下解析，

加载完js代码后，不等html解析是否完成就执行里面的js代码。

多个script标签加了async，不按顺序执行，谁先加载完成谁执行。