javascript的执行顺序2

最新推荐文章于 2024-07-14 14:30:57 发布
最新推荐文章于 2024-07-14 14:30:57 发布
阅读量393 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/limingluzhu/article/details/24363145
版权

测试一：

test.html

<html>
    <head>
        <title>
            javascript记载顺序研究
        </title>
        <script type="text/javascript" src="1.js" ></script>
        <script type="text/javascript" src="2.js" ></script>
        <script type="text/javascript" src="3.js"></script>
    </head>
    <body>
        <div>
            this is just a Test 
        </div>
        <div id="container1">
        </div>
    </body>
</html>

*.js

alert("1") //1.js
alert("2") //2.js
alert("3") //3.js

执行结果：在“this is just  a Test出现前，alert()语句依次执行，执行完成后，this is just  a Test 出现”

测试2：

test.html

<html>
    <head>
        <title>
            javascript记载顺序研究
        </title>
        
    </head>
    <body>
        <script type="text/javascript" src="1.js" ></script>
        <div>
            this is just a Test 
        </div>
        <div id="container1">
        </div>
        <script type="text/javascript" src="2.js" ></script>
        <script type="text/javascript" src="3.js"></script>
    </body>
</html>

*.js

alert("1") //1.js
alert("2") //2.js
alert("3") //3.js

执行结果：alert("1")->"this is just a Test 出现"->alert("2")->alert("3")

测试3：

test.html

<html>
    <head>
        <title>
            javascript记载顺序研究
        </title>
    </head>
    <body>
        <script type="text/javascript" src="a.js" ></script>
        <div>
            this is just a Test 
        </div>
        <div id="container1">
        </div>
        <script type="text/javascript" src="b.js" ></script>
    </body>
</html>

a.js

alert("aaa");
document.getElementById("container1").innerHTML="aaa";

b.js

alert("bbb");
document.getElementById("container1").innerHTML="bbb";

执行结果：alert("aaa")->“运行document.getElementById("container1").innerHTML="aaa"报错，document.getElementById("container1")为空”->alert("bbb")->"运行document.getElementById("container1").innerHTML="bbb"成功"

由一，二，三测试可以看出，在页面中的<script></script>同样会被作为一般的页面元素，按页面顺序加载。与普通DOM不同的是，<script>中的脚本会在加载过程中解释执行。在执行过程中，不能使用未加载的DOM

测试四：

test.html

<html>
    <head>
        <title>
            javascript记载顺序研究
        </title>
        <script type="text/javascript" src="a.js" ></script>
    </head>
    <body>
        <div>
            this is just a Test 
        </div>
        <div id="container1">
        </div>
        <div id="container2">
            Test
        <div>
        <script type="text/javascript" src="b.js" ></script>
    </body>
</html>

a.js

window.οnlοad=function (){
    alert("aaa");
    document.getElementById("container1").innerHTML="aaa";
}

b.js

alert("bbb");
document.getElementById("container2").innerHTML="bbb";

执行结果：

alert("bbb");->document.getElementById("container2").innerHTML="bbb";->window.onload()->...

测试四表面：window.onload()函数是在页面元素全部加载后再执行。

测试五：

test.html

<html>
    <head>
        <title>
            javascript记载顺序研究
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="a.js" ></script>
    </head>
    <body>
        <div>
            this is just a Test 
        </div>
        <div id="container1">
        </div>
        <div id="container2">
            Test
        <div>
    </body>
</html>

a.js

window.οnlοad=function (){
    alert("aaa");
    document.getElementById("container1").innerHTML="aaa";
}
$(function(){
    alert("$aaa");
})

测试结果：alert("$aaa")->alert("aa")表明jquery的$(document).ready(function(){})比window.onload先执行。

黎明露珠
关注
JavaScript执行顺序详细介绍
10-26
JavaScript执行顺序是JavaScript编程中的一项基础而重要的知识点，理解其执行顺序，有助于我们编写出更加高效、出错率更低的代码。 首先，我们来看JavaScript代码的执行顺序。在HTML文档中，脚本的执行遵循“从上到...
浅谈Javascript 执行顺序
10-26
Javascript是一种脚本语言，它的执行顺序遵循至上而下的原则，除非有特别的说明。这意味着，当浏览器解析HTML文档时，如果在页面完全加载之前遇到Javascript代码，它将立即执行这些代码。这对于依赖页面上已经加载的...
JavaScript执行顺序总结
qq_41872385的博客
03-11 4765
js的执行顺序
如何控制Javascript执行顺序？
滴水石穿
07-14 663
如何控制Javascript执行顺序？在JavaScript中，控制代码执行顺序的方法有很多种。
JavaScript 执行顺序梳理 ， 建议收藏！
Jack, what else can you do besides holding your little darling?
10-19 1471
一.概念 1.解释型语言执行步骤 预编译 扫描上下文。扫描错误 函数和变量声明的提升 解释执行 一条一条执行代码 2.任务队列event queue ????异步任务进入event queue任务队列 所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务
html语言执行顺序,浅谈JavaScript 的执行顺序
weixin_35097989的博客
05-31 556
虽然现代浏览器可以并行的下载JavaScript(部分浏览器)，但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。在 html 文档中的执行顺序js代码执行顺序比较的形象，用户可以直观的感受这种执行顺序。但是，js代码的执行顺序是比较复杂的。有时候我们会把js代...
JavaScript 文件加载执行顺序
LvLin_60的博客
01-18 2679
你不知道的关于众所周知，<script>标签是用于将JavaScript代码插入到HTML的主要方法。它具有内联和外部形式两种使用方式。 内联代码是将JavaScript代码直接写在标签里，外部形式则是通过标签的src属性引入外部的JavaScript文件。当<script>标签具有src属性的时候，标签内的代码会被忽略，如下所示: <!DOCTYPE html> <html> <head> <title>Example HTML
JavaScript--Promise执行顺序
qq_45633813的博客
09-09 1311
promise执行顺序1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。2、系统将微任务执行完以后，才会去执行下一个宏任务。3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。4、宿主环境提供的属于宏任务：例如setTimeout。由语言标准提供的属于微任务：例如promise.then。可以以此来区分宏任务和微任务。
JavaScript 的顺序执行 执行机制
pinbolei的博客
06-19 2293
先上一个今日头条的面试题 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(function() { console.log('setT
JavaScript执行机制之执行顺序
热门推荐
SweetoDream
08-19 1万+
JavaScript是一种描述型的脚本语言，不同于C#或者java，它不需要进行编译成中间语言，而是由浏览器动态的解析和执行。今天我们就来说一个JavaScript是如何解析的，它的执行顺序是怎么样的？在此之前，我们先来了解几个术语。一、代码块       JavaScript中的代码块是指由<Script>标签分割的代码块。例如：<script> console.log("这是代码块一"); </
JavaScript alert 函数执行顺序问题
༺墨༒眉༻
02-21 1885
问题 alert()弹窗总数优先于其他的代码执行：代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id...
Promise的执行顺序
weixin_63681863的博客
05-06 1454
Executor 是在创建 Promise 实例时作为参数传递的一个函数，它用于定义 Promise 的行为。这个函数会立即执行，并且接收两个参数：resolve 和 reject，它们是两个由 JavaScript 引擎提供的函数，用于改变 Promise 的状态。// 这里是执行器函数// 在这个函数内部，你可以编写异步或同步的代码// 你可以根据具体的情况调用 resolve 或 reject");// 将 Promise 状态设置为 resolved}, 1000);});
探析浏览器执行JavaScript脚本加载与代码执行顺序
10-22
以一个示例来解释脚本执行顺序，我们可以考虑两个JavaScript文件（1.js和2.js）的加载。当这两个文件通过`<script>`标签按顺序引入时，无论它们是否并行下载，1.js总是在2.js之前执行。这可以通过延迟发送文件内容的...
深入理解javascript的执行顺序
10-26
这种语言的执行顺序的理解对于掌握JavaScript至关重要。 首先，我们需要了解JavaScript代码块的概念。JavaScript代码块是由标签分隔的代码片段。这些代码块在JavaScript中是独立的，这意味着在一个代码块中出现的...
AI企联系统 Ai企业级系统开心版 uniapp适配 Web+H5+微信小程序+抖音小程序+双端APP
11-12
AI企联系统 Ai企业级系统开心版 uniapp适配 Web+H5+微信小程序+抖音小程序+双端APP 一款市面上新出的AI企联系统，项目uniapp开发的，支持3.5 4.0 Mj，此套系统5端适配，Web+H5+微信小程序+抖音小程序+双端APP，支持流量主! 自己有能力的可以二开，UI后台也可以自己改。
2000d.doc
11-12
2000d
通过SpringCloud实现微服务：Eureka+Ribbon+Feign+Zuul.zip
最新发布
11-12
根据书籍《Java微服务架构实践》提供源码，通过SpringCloud实现微服务：Eureka+Ribbon+Feign+Zuul
基于CNN-BiLSTM-Adaboost的自行车租赁数量预测研究附Matlab代码.rar
11-12
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
C2005.doc
11-12
C2005
JavaScript代码执行顺序解析
"JavaScript执行顺序主要分为按照HTML文档流顺序执行和预编译两个阶段。JavaScript代码在HTML文档中的执行顺序是由脚本标签`<script>`出现的位置决定的，从上到下依次执行。外部JavaScript文件也会按照引入的顺序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值