详谈HTML中script标签(附代码)
script 元素
在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素,script 元素内部的代码从上而下依次执行。
在引入多个 script 元素的时候,浏览器会按照 script 元素在页面的中的先后顺序进行解析,当上一个解析完成时,才会进行下一个 script 元素中的内容
在 HTML 中使用 Javascript 的两种方法
//第一种方法:直接在标签内使用 javascript 即可script> console.LOG('第一种使用方法'); /script> //第二种方法:引用外部文件script src="example.js"> /script> @H_304_12@script 元素的属性
script 元素比较常用的几个属性
src:可选,用于引用外部 javascript 文件
tyPE:可选,编写代码使用的脚本语言的类型(也成MIME类型),默认值为 text/javascript
async:可选,异步加载脚本,只对外部脚本文件有效
defer:可选,延迟脚本加载,在文档完全被解析后在执行,只对外部脚本文件有效
script 元素在 HTML 中的位置
由于「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 属性时控制台会打印出如下结果
example1nullexample2null
当给元素加上 defer 属性时,结果会发生变化,可以发现在 p 元素的内容加载完成之后 Javascript 代码才会执行。
example1div id="content"> 这里页面的内容/div> example2div 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>
noscript 元素
早期的浏览器都会又一个问题,那就是当浏览器不支持 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>
相关推荐:
script标签在HTML中的作用是什么?script标签中type属性的用法是什么?
HTML中的script标签研究_html/css_WEB-iTnose
html中的script> 标签还能链接非js文件啊_html/css_WEB-ITnose
以上就是详谈HTML中script标签(附代码)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 详谈HTML中script标签(附代码)
本文地址: https://pptw.com/jishu/590166.html