本文摘自PHP中文网,作者寻∝梦,侵删。
script标签在HTML中的作用是什么?script标签中type属性的用法是什么?本篇文章主要讲解了HTML Script标签用处的相关知识和script标签中的type属性用法是什么HTML Script标签的相关知识及作用:
关于script这个经常使用的标签,你了解多少,这个script标签随着改善,增加了一些html5的东西,比如async 和 defer,crossorigin,for / event等。
正如你可能知道的,script 标签是用来指定在网页上执行哪个 JavaScript 的。Script 标签可以直接包含 JavaScript 代码,或者指向一个 JavaScript 外链 URL。
Script 标签按照它们出现的顺序被执行,下面的代码很直观地说明了这一点:
1 2 3 4 5 6 7 |
|
使用外链资源时加载次序没有那么直观,但依然是成立的:
1 2 3 |
|
如果你混合使用外链和内联的 JavaScript,这个规则同样适用。
这意味着如果你的网站有很慢的脚本在页面较前部分被加载,你的网页加载就会被显著拖慢。这也意味着后加载的脚本可以依赖先加载的脚本。
页面元素在它之前的所有脚本都加载完毕之前是不会执行渲染的。这意味着你可以你可以在页面加载之前在网页上做各种疯狂的事情,当然前提是你不在意因此而造成的性能问题。
然而这个规则不适用于你在网页加载完成之后通过 document.appendChild 之类的方法添加 script 标签到 DOM 中。这些标签会根据浏览器请求处理完成的先后执行脚本,不再保证加载顺序。
当一个 script 标签被执行,在它之前的 HTML 元素可以访问(但是在它之后的还不能用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
你可以想象 HTML 解析器一个标签一个标签地访问文档,当它解析到 script 标签时,马上执行其中的 JavaScript。这意味着只有当开始标签出现在当前脚本之前的 DOM 节点才可以在当前 JavaScript 中被访问(通过 querySelectorALl,jQuery 等等)。
相关阅读 >>
Html中的name属性的有哪些作用?默认的name属性又是什么?
更多相关阅读请进入《Html》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者