html中script位置,详谈HTML中script标签

script元素

在HTML页面中使用「Javascript」语言主要的方法就是使用script元素，script元素内部的代码从上而下依次执行。

在引入多个script元素的时候，浏览器会按照script元素在页面的中的先后顺序进行解析，当上一个解析完成时，才会进行下一个script元素中的内容

在HTML中使用Javascript的两种方法

//第一种方法：直接在标签内使用javascript即可

console.log('第一种使用方法');

//第二种方法：引用外部文件

script元素的属性

script元素比较常用的几个属性

src：可选，用于引用外部javascript文件

type：可选，编写代码使用的脚本语言的类型(也成MIME类型)，默认值为text/javascript

async：可选，异步加载脚本，只对外部脚本文件有效

defer：可选，延迟脚本加载，在文档完全被解析后在执行，只对外部脚本文件有效

script元素在HTML中的位置

由于「Javascript」语言是一门单线程语言，在同一时间内，只能执行一个任务，所以只有当上一个任务完成之后才能进行下一个任务，因此会导致script元素在HTML中的位置不同，会表现出不同效果。

所有script元素都放在

元素中

这种做法意味着，我们必须等待所有的Javascript代码必须执行完成之后才能开始展示页面的内容，如果页面的Javascript代码非常多，这种方法就会导致我们看到页面的加载会非常慢，用户体验非常差，那么这么样去优化呢？其实很简单。

页面的内容区域

所有script元素都放在页面内容的后面

优化上面所说的页面加载慢的问题，只需要把我们使用的Javascript代码放到页面的内容之后即可，这样页面会首先加载内容然后现实出来，再去执行Javascript代码，这样用户就不会等待很久页面才会显示内容。

页面的内容区域

脚本的延时加载

脚本如何进行延时加载，这个就要利用script元素的defer属性，在元素使用defer属性时，脚本会被延迟到整个页面解析完成后在执行。

//example1.js中的代码

//console.log('example1');

//console.log(document.getElementById('content'));

//example2.js中的代码

//console.log('example2');

//console.log(document.getElementById('content'));

Title

这里页面的内容