html中不支持script元素的是,说一说 HTML 中的 script 标签

我们在 《Javascript简史》这遍文章中说过，「Javascript」这门语言是由 Netscape开发而来，当初开发的时候为了能让 「Javascript」这门语言能与 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

这里页面的内容

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

example1

null

example2

null

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

example1

这里页面的内容

example2

这里页面的内容

脚本的异步加载

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

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

Title

这里页面的内容

noscript 元素

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

Title

当前浏览器不支持 Javascript 请更换浏览器

关注微信公众号：六小登登。领取全套学习资源