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

script 元素

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

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

在 HTML 中使用 Javascript 的两种方法

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


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

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(&＃39;example1&＃39;);
//console.log(document.getElementById(&＃39;content&＃39;));

//example2.js 中的代码
//console.log(&＃39;example2&＃39;);
//console.log(document.getElementById(&＃39;content&＃39;));




    
    
    
    


    
这里页面的内容

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

example1
null
example2
null

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

example1
这里页面的内容
example2
这里页面的内容

脚本的异步加载

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

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

    
    
    
    


    
这里页面的内容

noscript 元素

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