首页
前端技术
编程语言
人工智能
运维知识
资源下载
常用小工具
技术问答
客户端JavaScript-如何执行 客户端JavaScript程序有四部分：内联脚本、HTML事件处理程序、URL中的JavaScript、外联脚本；所有这些单独的代码共用同一个全局Window对象，它们可以看到相同的Document对象，且共享相同的全局函数和变量的集合：如果在一个脚本定义了新的全局属性，那么这个属性在脚本执行后对任意代码可见；（
内嵌的窗体有不同的全局对象）；</a></h1> </div> </header> <main class="content" role="main"> <div class="leftbox"> <article class="post tag-uifont tag-webview"> <header class="post-header"> <footer class="tc"> <time class="post-date" datetime="2022-12-23">2022-12-23</time> </footer> </header> <section class="post-content"> <div class="contentbef"> </div> <div class="postBody"> <div> <div> 客户端JavaScript程序执行分两个阶段：1、载入文档内容，当HTML解析器遇到<script>标签时，默认必须先执行脚本(除非指定延迟执行defer、异步执行async)，然后在进行文档的解析和渲染，注册事件处理程序；2、当文档载入完成，且所有脚本执行完毕，进入第二阶段，由事件驱动的异步执行阶段，这个阶段的第一个事件是load事件，指示文档已经载入完成并可以操作，load事件会触发onload事件；</div> <div> <div> 核心JavaScript和客户端JavaScript都有一个单线程执行模型，脚本、事件处理程序在同一时间只能执行一个，没有并发性；参考HTML5的WebWorker可并发执行；</div> <div> 当浏览器遇到<script>标签时，先判断type属性是否可识别，之后按type属性指定的脚步语言来运行代码，若无法识别类型，则浏览器仅解析<script>标签，忽略其他所有属性，标签内的内容也不显示和执行，这意味着可以在<script>标签内部嵌入任意的文本数据到文档里，然后把它当做普通标签来读取text内容；</div> <div> 当<script>标签使用src属性时，将下载并使用src指定的文件，即使type类型可识别，标签内的内容也将被忽略；可在标签内嵌入一些文本信息；</div> </div> <div><strong>defer、async异步加载执行脚本：</strong></div> <div> <script defer src='test.js'></script>指定延迟执行defer，表示解析文档和脚本下载可同时进行，但脚本的执行要在文档载入和解析完成并可以操作后，并在DOMContentLoaded 事件触发之前完成。多个defer延迟脚本按照加载顺序先后执行；</div> <div> <script async src='test.js'></script>指定异步执行async，表示解析文档和脚本下载可同时进行，但在脚本加载完成后先立即执行脚本，脚本执行完毕后再继续解析文档，执行顺序是先加载完毕先执行；</div> <div> 从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析；</div> <div> 可以在不支持async属性时通过动态创建<script>标签并把它插入到文档中来实现异步加载和执行src属性指定的脚本。</div> <div><strong>URL中的JavaScript：</strong></div> <div> 在URL后面跟一个JavaScript:协议限定符，指定URL内容为任意的会被JavaScript解释器运行的代码的字符串，它被当做单独的一行代码对待，语句之间分号隔开，代码执行的返回值将成为该URL的‘资源’，该资源将作为内容显示在新文档中，旧文档将被替换，可用void运算符让返回值为undefined，防止旧文档被替换，如：<a href="javascript:void window.open('about:blank');">打开</a></div> <div> <strong>事件处理程序</strong>：</div> <div> HTML中定义的事件处理程序的属性可以包含任意多条JavaScript语句，之间用逗号隔开，注释必须使用多行注释/* */，这些语句组成一个函数体，然后这个函数作为属性的值；</div> <div> 响应一个事件需要：1、事件处理函数(事件监听器、回调函数)；2、注册这个函数，以在事件发生时调用它，可通过HTML属性完成注册，但不建议将代码和HTML混在一起，提倡分离，最简单的注册方法是将事件处理函数赋值给目标对象的属性；如：（代码里没有任何函数调用，事件触发是自动调用）</div> <div> window.onload = function(){...}; document.getElementById('btn1').onclick=function(){...};</div> <div> “冒泡”：有些事件的目标对象是文档元素，该元素没有处理事件，则事件将会在文档树里往上传递，这个过程就叫冒泡</div> </div> </div> <div> 客户端JavaScript程序执行分两个阶段：1、载入文档内容，当HTML解析器遇到<script>标签时，默认必须先执行脚本(除非指定延迟执行defer、异步执行async)，然后在进行文档的解析和渲染，注册事件处理程序；2、当文档载入完成，且所有脚本执行完毕，进入第二阶段，由事件驱动的异步执行阶段，这个阶段的第一个事件是load事件，指示文档已经载入完成并可以操作，load事件会触发onload事件；</div> <div> <div> 核心JavaScript和客户端JavaScript都有一个单线程执行模型，脚本、事件处理程序在同一时间只能执行一个，没有并发性；参考HTML5的WebWorker可并发执行；</div> <div> 当浏览器遇到<script>标签时，先判断type属性是否可识别，之后按type属性指定的脚步语言来运行代码，若无法识别类型，则浏览器仅解析<script>标签，忽略其他所有属性，标签内的内容也不显示和执行，这意味着可以在<script>标签内部嵌入任意的文本数据到文档里，然后把它当做普通标签来读取text内容；</div> <div> 当<script>标签使用src属性时，将下载并使用src指定的文件，即使type类型可识别，标签内的内容也将被忽略；可在标签内嵌入一些文本信息；</div> </div> <div><strong>defer、async异步加载执行脚本：</strong></div> <div> <script defer src='test.js'></script>指定延迟执行defer，表示解析文档和脚本下载可同时进行，但脚本的执行要在文档载入和解析完成并可以操作后，并在DOMContentLoaded 事件触发之前完成。多个defer延迟脚本按照加载顺序先后执行；</div> <div> <script async src='test.js'></script>指定异步执行async，表示解析文档和脚本下载可同时进行，但在脚本加载完成后先立即执行脚本，脚本执行完毕后再继续解析文档，执行顺序是先加载完毕先执行；</div> <div> 从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析；</div> <div> 可以在不支持async属性时通过动态创建<script>标签并把它插入到文档中来实现异步加载和执行src属性指定的脚本。</div> <div><strong>URL中的JavaScript：</strong></div> <div> 在URL后面跟一个JavaScript:协议限定符，指定URL内容为任意的会被JavaScript解释器运行的代码的字符串，它被当做单独的一行代码对待，语句之间分号隔开，代码执行的返回值将成为该URL的‘资源’，该资源将作为内容显示在新文档中，旧文档将被替换，可用void运算符让返回值为undefined，防止旧文档被替换，如：<a href="javascript:void window.open('about:blank');">打开</a></div> <div> <strong>事件处理程序</strong>：</div> <div> HTML中定义的事件处理程序的属性可以包含任意多条JavaScript语句，之间用逗号隔开，注释必须使用多行注释/* */，这些语句组成一个函数体，然后这个函数作为属性的值；</div> <div> 响应一个事件需要：1、事件处理函数(事件监听器、回调函数)；2、注册这个函数，以在事件发生时调用它，可通过HTML属性完成注册，但不建议将代码和HTML混在一起，提倡分离，最简单的注册方法是将事件处理函数赋值给目标对象的属性；如：（代码里没有任何函数调用，事件触发是自动调用）</div> <div> window.onload = function(){...}; document.getElementById('btn1').onclick=function(){...};</div> <div> “冒泡”：有些事件的目标对象是文档元素，该元素没有处理事件，则事件将会在文档树里往上传递，这个过程就叫冒泡</div> <div style="margin-top: 10px;"> </div> </section> <footer class="post-footer"> <section class="author"> </section> </footer> <p class="mt10">相关文章：</p> <div style="width: 100%;" class="contentcard"> <div style="width: 100%;height: auto;" class="carditem litem clearfix"> <ul style="padding-left: 0rem;" class="cardcont"> <li> <a title="全局对象属性" href='/show-305972555.html' target="_blank"></a> <span>2021-07-17</span> </li> <li> <a title="JavaScript 全局对象" href='/show-205071302.html' target="_blank"></a> <span>2021-07-11</span> </li> <li> <a title="javascript全局对象" href='/show-306631445.html' target="_blank"></a> <span>2021-12-18</span> </li> <li> <a title="Javascript全局对象" href='/show-306450071.html' target="_blank"></a> <span>2021-05-30</span> </li> <li> <a title="小程序全局对象属性的定义与使用" href='/show-826099.html' target="_blank"></a> <span>2021-12-03</span> </li> <li> <a title="Node全局对象上的属性" href='/show-306581815.html' target="_blank"></a> <span>2021-06-07</span> </li> <li> <a title="JavaScript中局部变量与全局变量的不同" href='/show-308077523.html' target="_blank"></a> <span>2022-12-23</span> </li> </ul> </div> </div> </article> </div> <div class="rigthbox contentcard mt10"> <div style="height: auto;" class="carditem litem"> <div class="cardtit">猜你喜欢 </div> <ul class="cardcont"> <li> <a title="java中如何取到一个对象的所有属性值，并且在创建一个相同的对象" href="/show-306986689.html" target="_blank"></a> <span>2022-12-23</span> </li> <li> <a title="jsp的局部代码 全局代码和脚本段" href="/show-205066432.html" target="_blank"></a> <span>2021-09-13</span> </li> <li> <a title="全局变量都是window对象的属性" href="/show-308243091.html" target="_blank"></a> <span>2022-12-23</span> </li> <li> <a title="JS全局对象的属性" href="/show-306199141.html" target="_blank"></a> <span>2021-08-25</span> </li> <li> <a title="JavaScript中全局变量和局部变量的不同" href="/show-803478.html" target="_blank"></a> <span>2021-11-17</span> </li> <li> <a title="WCF 同一个代理共享全局变量" href="/show-307547310.html" target="_blank"></a> <span>2022-12-23</span> </li> <li> <a title="apipost利用全局执行脚本，生成（定义）全局变量" href="/show-204879273.html" target="_blank"></a> <span>2021-05-25</span> </li> </ul> </div> <div style="height: auto;" class="carditem litem"> <div class="cardtit">相关资源 </div> <ul class="cardcont"> <li> <a title="JavaScript的RegExp对象 WORD版下载" href="/down-35260.html" target="_blank">下载</a> <span>2022-12-10</span> </li> <li> <a title="一个完全可以自定义指定对象的提示信息效果的jQuery插件chilltip下载" href="/down-38631.html" target="_blank">下载</a> <span>2021-06-07</span> </li> <li> <a title="nodejs 服务器端的JavaScript脚本(node.js)下载" href="/down-60335.html" target="_blank">下载</a> <span>2021-06-27</span> </li> <li> <a title="一个在线打包压缩网站内容的PHP脚本(Hacklog修改版)下载" href="/down-5821.html" target="_blank">下载</a> <span>2023-03-31</span> </li> </ul> </div> <div style="height: auto;" class="carditem litem"> <div class="cardtit">相似解决方案 </div> <ul class="cardcont"> </ul> </div> <div style="height: auto;background-color: #ddd;text-align: center;" class="carditem litem"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> <div style="height: auto;" class="carditem litem mt20"> <div class="cardtit">热门标签 </div> <div class="tagbox"> <a target="_blank" title="Java" href="/default/index/tags?cid=164&cname=Java" >Java</a> <a target="_blank" title="Python" href="/default/index/tags?cid=367&cname=Python" >Python</a> <a target="_blank" title="linux" href="/default/index/tags?cid=274&cname=linux" >linux</a> <a target="_blank" title="javascript" href="/default/index/tags?cid=169&cname=javascript" >javascript</a> <a target="_blank" title="Mysql" href="/default/index/tags?cid=237&cname=Mysql" >Mysql</a> <a target="_blank" title="C#" href="/default/index/tags?cid=187&cname=C%23" >C#</a> <a target="_blank" title="Docker" href="/default/index/tags?cid=243&cname=Docker" >Docker</a> <a target="_blank" title="算法" href="/default/index/tags?cid=344&cname=%E7%AE%97%E6%B3%95" >算法</a> <a target="_blank" title="前端" href="/default/index/tags?cid=160&cname=%E5%89%8D%E7%AB%AF" >前端</a> <a target="_blank" title="SpringBoot" href="/default/index/tags?cid=168&cname=SpringBoot" >SpringBoot</a> <a target="_blank" title="Redis" href="/default/index/tags?cid=227&cname=Redis" >Redis</a> <a target="_blank" title="Vue" href="/default/index/tags?cid=236&cname=Vue" >Vue</a> <a target="_blank" title="spring" href="/default/index/tags?cid=696&cname=spring" >spring</a> <a target="_blank" title="设计模式" href="/default/index/tags?cid=632&cname=%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F" >设计模式</a> <a target="_blank" title=".net core" href="/default/index/tags?cid=381&cname=.net+core" >.net core</a> <a target="_blank" title=".net" href="/default/index/tags?cid=300&cname=.net" >.net</a> <a target="_blank" title="kubernetes" href="/default/index/tags?cid=2179&cname=kubernetes" >kubernetes</a> <a target="_blank" title="c++" href="/default/index/tags?cid=312&cname=c%2B%2B" >c++</a> <a target="_blank" title="数据库" href="/default/index/tags?cid=284&cname=%E6%95%B0%E6%8D%AE%E5%BA%93" >数据库</a> <a target="_blank" title="数据结构" href="/default/index/tags?cid=247&cname=%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84" >数据结构</a> <a target="_blank" title="大数据" href="/default/index/tags?cid=888&cname=%E5%A4%A7%E6%95%B0%E6%8D%AE" >大数据</a> <a target="_blank" title="js" href="/default/index/tags?cid=159&cname=js" >js</a> <a target="_blank" title="机器学习" href="/default/index/tags?cid=171&cname=%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0" >机器学习</a> <a target="_blank" title="微服务" href="/default/index/tags?cid=832&cname=%E5%BE%AE%E6%9C%8D%E5%8A%A1" >微服务</a> <a target="_blank" title="Android" href="/default/index/tags?cid=282&cname=Android" >Android</a> <a target="_blank" title="Go" href="/default/index/tags?cid=839&cname=Go" >Go</a> <a target="_blank" title="程序员" href="/default/index/tags?cid=327&cname=%E7%A8%8B%E5%BA%8F%E5%91%98" >程序员</a> <a target="_blank" title="面试" href="/default/index/tags?cid=637&cname=%E9%9D%A2%E8%AF%95" >面试</a> <a target="_blank" title="JVM" href="/default/index/tags?cid=727&cname=JVM" >JVM</a> <a target="_blank" title="ASP.net core" href="/default/index/tags?cid=179&cname=ASP.net+core" >ASP.net core</a> <a target="_blank" title="云原生" href="/default/index/tags?cid=22056&cname=%E4%BA%91%E5%8E%9F%E7%94%9F" >云原生</a> <a target="_blank" title="人工智能" href="/default/index/tags?cid=270&cname=%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD" >人工智能</a> <a target="_blank" title="后端" href="/default/index/tags?cid=1089&cname=%E5%90%8E%E7%AB%AF" >后端</a> <a target="_blank" title="PHP" href="/default/index/tags?cid=281&cname=PHP" >PHP</a> <a target="_blank" title="git" href="/default/index/tags?cid=226&cname=git" >git</a> <a target="_blank" title="CSS" href="/default/index/tags?cid=817&cname=CSS" >CSS</a> <a target="_blank" title="golang" href="/default/index/tags?cid=409&cname=golang" >golang</a> <a target="_blank" title="k8s" href="/default/index/tags?cid=5067&cname=k8s" >k8s</a> <a target="_blank" title="Nginx" href="/default/index/tags?cid=373&cname=Nginx" >Nginx</a> <a target="_blank" title="Django" href="/default/index/tags?cid=634&cname=Django" >Django</a> <a target="_blank" title="mybatis" href="/default/index/tags?cid=720&cname=mybatis" >mybatis</a> <a target="_blank" title="深度学习" href="/default/index/tags?cid=345&cname=%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0" >深度学习</a> <a target="_blank" title="多线程" href="/default/index/tags?cid=986&cname=%E5%A4%9A%E7%BA%BF%E7%A8%8B" >多线程</a> <a target="_blank" title="React" href="/default/index/tags?cid=560&cname=React" >React</a> <a target="_blank" title="架构" href="/default/index/tags?cid=2070&cname=%E6%9E%B6%E6%9E%84" >架构</a> <a target="_blank" title="devops" href="/default/index/tags?cid=2662&cname=devops" >devops</a> <a target="_blank" title="爬虫" href="/default/index/tags?cid=905&cname=%E7%88%AC%E8%99%AB" >爬虫</a> <a target="_blank" title="云计算" href="/default/index/tags?cid=361&cname=%E4%BA%91%E8%AE%A1%E7%AE%97" >云计算</a> <a target="_blank" title="Spring Boot" href="/default/index/tags?cid=201&cname=Spring+Boot" >Spring Boot</a> <a target="_blank" title="LeetCode" href="/default/index/tags?cid=342&cname=LeetCode" >LeetCode</a> </div> </div> <div id="rightadbox" style="height: 300px;background-color: #ddd;text-align: center;" class="carditem litem"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5446233687289962" data-ad-slot="2607637140" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script> </div> </div> <div class="clearfix"></div> </main> <div class="yllinks alink"></div> <footer class="site-footer clearfix"> <section class="copyright">By © 2026 <a href="/" title="www.likecs.com">likecs</a> 版权所有,<br/>本站所有数据收集于网络如有侵犯到您的权益请联系 进行下架处理1。 </section> <section class="poweredby"> <a target="_blank" href="https://beian.miit.gov.cn/">粤ICP备22038628号</a>Powered By WordPress </section> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "Je3PjbvUssp6BbvY",ck: "Je3PjbvUssp6BbvY"})</script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?2eb031e42d29b7c1a1f16948d2ae2a9f"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> </div> <script> $(function(){ $(".post-content").append('<p style="padding: 20px;color: #cacaca;">原文链接：https://www.cnblogs.com/zys8119/p/5710676.html</p>') }) </script> </body> </html>