script元素
在HTML页面中使用「Javascript」语言主要的方法就是使用script元素，script元素内部的代码从上而下依次执行。
在引入多个script元素的时候，浏览器会按照script元素在页面的中的先后顺序进行解析，当上一个解析完成时，才会进行下一个script元素中的内容
在HTML中使用Javascript的两种方法
//第一种方法：直接在标签内使用javascript即可
<script>
console.log('第一种使用方法');
</script>
//第二种方法：引用外部文件
<scriptsrc="example.js"></script>
script元素的属性
script元素比较常用的几个属性
src：可选，用于引用外部javascript文件
type：可选，编写代码使用的脚本语言的类型（也成MIME类型），默认值为text/javascript
async：可选，异步加载脚本，只对外部脚本文件有效
defer：可选，延迟脚本加载，在文档完全被解析后在执行，只对外部脚本文件有效
script元素在HTML中的位置
由于「Javascript」语言是一门单线程语言，在同一时间内，只能执行一个任务，所以只有当上一个任务完成之后才能进行下一个任务，因此会导致script元素在HTML中的位置不同，会表现出不同效果。
所有script元素都放在<head>元素中
这种做法意味着，我们必须等待所有的Javascript代码必须执行完成之后才能开始展示页面的内容，如果页面的Javascript代码非常多，这种方法就会导致我们看到页面的加载会非常慢，用户体验非常差，那么这么样去优化呢？其实很简单。
<!DOCTYPEhtml>
<html>
<head>
<title></title>
<scriptsrc="example1.js"></script>
<scriptsrc="example2.js"></script>
</head>
<body>
<div>页面的内容区域</div>
</body>
</html>
所有script元素都放在页面内容的后面
优化上面所说的页面加载慢的问题，只需要把我们使用的Javascript代码放到页面的内容之后即可，这样页面会首先加载内容然后现实出来，再去执行Javascript代码，这样用户就不会等待很久页面才会显示内容。
<!DOCTYPEhtml>
<html>
<head>
<title></title>
</head>
<body>
<div>页面的内容区域</div>
<scriptsrc="example1.js"></script>
<scriptsrc="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'));
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Title</title>
<scriptdefersrc="example1.js"></script>
<scriptdefersrc="example2.js"></script>
</head>
<body>
<divid="content">这里页面的内容</div>
</body>
</html>
你会发在没有加入defer属性时控制台会打印出如下结果
example1
null
example2
null
当给元素加上defer属性时，结果会发生变化，可以发现在p元素的内容加载完成之后Javascript代码才会执行。
example1
<divid="content">这里页面的内容</div>
example2
<divid="content">这里页面的内容</div>
脚本的异步加载
脚本的异步加载，要用到script元素到async属性，它与defer属性类似，都是修改script元素的加载行为，不过async属性不会影响页面的其他加载，不会阻塞文档呈现，而且带有async属性的脚本不能保证它们执行的前后顺序，这一点与defer属性有着不同之处。
换句话说example2.js的代码可能会先于example1.js中的代码执行，所以在使用async属性时，要避免两个js相互依赖。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Title</title>
<scriptasyncsrc="example1.js"></script>
<scriptasyncsrc="example2.js"></script>
</head>
<body>
<divid="content">这里页面的内容</div>
</body>
</html>
noscript元素
早期的浏览器都会又一个问题，那就是当浏览器不支持Javascript语言时如何显示页面内容，为此的解决方案就是创建了一个noscript元素，它可以在不支持Javascript的浏览器中显示内容，而且只会在不支持Javascript的浏览器中才会显示其中的内容。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<scriptasyncsrc="example1.js"></script>
<scriptasyncsrc="example2.js"></script>
</head>
<body>
<noscript>
当前浏览器不支持Javascript请更换浏览器
</noscript>
</body>
</html>
相关推荐：
script标签在HTML中的作用是什么？script标签中type属性的用法是什么？
HTML中的script标签研究_html/css_WEB-ITnose
html中的<script>标签还能链接非js文件啊_html/css_WEB-ITnose
本文转载自中文网
本文转载自中文网
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54703.shtml
