JavaScript执行优先顺序
js在html中的加载执行顺序
1.加载顺序:引入标记<script />的出现顺序,
页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序,
<script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。
1 2 3 4 5 6 7 8 | <script> alert( "1-第一个执行" ); </script> </head> <body onload= "alert('3-最后执行');" > <script> alert( "2-第二个执行" ); </script> |
每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。
变量的调用,必须是前面已经声明,否则获取的变量值是undefined。
1 2 3 4 5 6 | <script type= "text/javscrpt" > alert(str); //输出 undefined var str= 1; alert(str); //输出 1// </script> |
同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。
1 2 3 4 5 6 7 8 9 10 | <script type= "text/javscrpt" > aa(); //浏览器报错// </script> <script type= "text/javscrpt" > // aa(); //输出 1 function aa() { alert(1); } </script |
document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,
然后在继续解析HTML文档。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type= "text/javascript" > //<![CDATA[ document.write( '<script type="text/javascript" src="test.js"><//script>' ); document.write( '<script type="text/javascript">' ); document.write( 'alert(2);' ) document.write( 'alert("我是" + tmpStr);' ); document.write( '<//script>' ); //]]> </script> <script type= "text/javascript" > //<![CDATA[ alert(3); //]]> </script> test.js的内容是: var tmpStr = 1; alert(tmpStr); |
同名JS函数执行顺序
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <head> <script type= "text/javascript" > function aa() { alert( 'First aa' ) } </script> <title></title> </head> <body> <form id= "form1" runat= "server" > <br /> <input id= "Button1" type= "button" value= "button" onclick= "aa();" /> </form> </body> <script type= "text/javascript" > function aa(s) { alert( 'Second aa' ); } function aa(s) { alert( 'Last aa' ); } </script> </html> |
点击“botton”执行结果: Last aa
额,写上这一段的时候主要还是不明白,好多点反对是对我的随笔不满还是对我随笔质量的不满。。实际上我更多的把这个博客当成个人动态玩的。。。所以还是比较随意的。。。当然如果觉得写得有问题可以在下方评论写出改进建议。。。我会虚心接受,顺便可以知道自己的不足点。。。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架