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

script元素

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

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

在HTML中使用Javascript的两种方法

//第一种方法&＃xff1a;直接在标签内使用Javascript即可

console.log(&＃39;第一种使用方法&＃39;);

//第二种方法&＃xff1a;引用外部文件

script元素的属性

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

src&＃xff1a;可选&＃xff0c;用于引用外部Javascript文件

type&＃xff1a;可选&＃xff0c;编写代码使用的脚本语言的类型(也成MIME类型)&＃xff0c;默认值为text/Javascript

async&＃xff1a;可选&＃xff0c;异步加载脚本&＃xff0c;只对外部脚本文件有效

defer&＃xff1a;可选&＃xff0c;延迟脚本加载&＃xff0c;在文档完全被解析后在执行&＃xff0c;只对外部脚本文件有效

script元素在HTML中的位置

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

所有script元素都放在

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

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

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

脚本的延时加载

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

//example1.js中的代码

//console.log(&＃39;example1&＃39;);

//console.log(document.getElementById(&＃39;content&＃39;));

//example2.js中的代码

//console.log(&＃39;example2&＃39;);

//console.log(document.getElementById(&＃39;content&＃39;));

这里页面的内容