详谈HTML中script标签（附代码）

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

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

在 HTML 中使用 Javascript 的两种方法

//第一种方法：直接在标签内使用 javascript 即可 script  console.log( 第一种使用方法  /script //第二种方法：引用外部文件 script src= example.js /script 

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

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

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

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

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

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

所有 script 元素都放在 head 元素中

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

 !DOCTYPE html  html  head  title /title  script src= example1.js /script  script src= example2.js /script  /head  body  div 页面的内容区域 /div  /body  /html 

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

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

 !DOCTYPE html  html  head  title /title  /head  body  div 页面的内容区域 /div  script src= example1.js /script  script src= example2.js /script  /body  /html 

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

//example1.js 中的代码//console.log( example1 //console.log(document.getElementById( content //example2.js 中的代码//console.log( example2 //console.log(document.getElementById( content  !DOCTYPE html  html  head  meta charset= UTF-8  title Title /title  script defer src= example1.js /script  script defer src= example2.js /script  /head  body  div id= content 这里页面的内容 /div  /body  /html 

你会发在没有加入 defer 属性时控制台会打印出如下结果

example1example2null

当给元素加上 defer 属性时，结果会发生变化，可以发现在 p 元素的内容加载完成之后 Javascript 代码才会执行。

example1 div id= content 这里页面的内容 /div example2 div id= content 这里页面的内容 /div 

脚本的异步加载，要用到 script 元素到 async 属性，它与 defer 属性类似，都是修改 script 元素的加载行为，不过 async 属性不会影响页面的其他加载，不会阻塞文档呈现，而且带有 async 属性的脚本不能保证它们执行的前后顺序，这一点与 defer 属性有着不同之处。

换句话说 example2.js 的代码可能会先于 example1.js 中的代码执行，所以在使用 async 属性时，要避免两个 js 相互依赖。

 !DOCTYPE html  html  head  meta charset= UTF-8  title Title /title  script async src= example1.js /script  script async src= example2.js /script  /head  body  div id= content 这里页面的内容 /div  /body  /html 

早期的浏览器都会又一个问题，那就是当浏览器不支持 Javascript 语言时如何显示页面内容，为此的解决方案就是创建了一个 noscript 元素，它可以在不支持 Javascript 的浏览器中显示内容，而且只会在不支持 Javascript 的浏览器中才会显示其中的内容。

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title Title /title  script async src= example1.js /script  script async src= example2.js /script  /head  body  noscript  当前浏览器不支持 Javascript 请更换浏览器 /noscript  /body  /html 

相关推荐：

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。