`
huangyongxing310
  • 浏览: 494089 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Javascript执行步骤与顺序

阅读更多
Javascript执行步骤与顺序

1.JavaScript是单线程



执行步骤:
step 1.  读入第一个代码块(以<script>指令串</script>)。
step 2.  做语法分析,有错则报语法错误(比如括号不匹配等),并跳转到step5。
step 3.  对var变量和function定义做“预编译处理”(永远不会报错的,因为只解析正确的声明)。
step 4.  执行代码段,有错则报错(比如变量未定义)。
step 5.  如果还有下一个代码段,则读入下一个代码段,重复step2。
step6. 结束。


执行原理:
(1)所有任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。系统把异步任务放到"任务队列"之中,然后继续执行后续的任务。
(3)一旦"执行栈"中的所有任务执行完毕,系统就会读取"任务队列"。如果这个时候,异步任务已经结束了等待状态,就会从"任务队列"进入执行栈,恢复执行。
(4)主线程不断重复上面的第三步。

执行栈中的代码,总是在读取"任务队列"之前执行。



执行顺序:
1.而根据HTML文档流的执行顺序,需要在页面元素渲染前执行的js代码应该放在<body>前面的<script>代码块中
2.需要在页面元素加载完后执行的js放在</body>元素后面,body标签的onload事件是在最后执行的。
<script type="text/javascript">
    alert("first");
    function Fn(){
        alert("third");
    }
</script>
<body onload="Fn()"> //onload事件是在最后执行的

</body>
<script type="text/javascript">
    alert("second");
</script>



body内部的函数会先于onload的函数执行
//html head...
<script type="text/javascript">
function fnOnLoad(){
alert("I am outside the Wall!");
}
</script>
<body onload="fnOnLoad();">
<script type="text/javascript">
alert("I am inside the Wall..");
</script>
</body>
//先弹出“I am inside the Wall..”;
//后弹出“I am outside the Wall!”




JavaScript是单线程
1.你肯定要问:那延时执行、Ajax异步加载,不是多线程的吗?
下面这样的程序确实看起来像“多线程”:
function fn1(){
setTimeout(function(){
alert("我先调用")
},1000);
}
function fn2(){
alert("我后调用");
}
fn1();
fn2();
// 先弹出:“我后调用”,
// 1秒后弹出:“我先调用”


看上去,fn2()和延时程序是分两个过程再走,但其实,这是JavaScript中的“回调”机制在起作用,类似于操作系统
中的“中断和响应” —— 延时程序设置一个“中断”,然后执行fn2(),待1000毫秒时间到后,再回调执行fn1()。



参考原文:http://www.admin10000.com/document/3752.html
参考原文:http://www.cnblogs.com/zxj159/archive/2013/05/17/3084598.html
分享到:
评论

相关推荐

    Javascript在页面加载时的执行顺序.pdf

    JavaScript在页面加载时的执行顺序是网页开发中的关键概念,对于理解JavaScript如何与HTML交互至关重要。以下是关于这一主题的详细解释: 首先,我们来看在HTML中嵌入JavaScript的几种常见方式: 1. **内联脚本**...

    浅谈JavaScript 的执行顺序

    总的来说,JavaScript执行顺序的步骤大致如下: 1. 遇到`&lt;script&gt;`标签,暂停HTML解析。 2. 对当前代码块进行预编译,处理变量和函数声明。 3. 执行代码块,如果有语法错误则停止执行。 4. 如果还有其他代码块,重复...

    EventLoop执行顺序.zip

    总的来说,理解和掌握EventLoop的执行顺序对于编写高效的JavaScript代码至关重要。这不仅涉及到代码的执行效率,还直接影响到异步操作的响应速度和用户体验。在实际开发中,合理安排任务类型和执行顺序,可以避免...

    javascript attachEvent绑定多个事件执行顺序问题

    虽然执行顺序看起来没有规律,但每次页面加载时,只要绑定的顺序固定,执行顺序也是固定的。这种行为在IE8中表现得更为极端,事件处理函数甚至会以完全相反的顺序执行。 在使用jQuery的`$.bind`方法时,不会出现...

    Struts2 拦截器的执行顺序(二十九)

    这篇博客“Struts2 拦截器的执行顺序(二十九)”可能探讨了Struts2拦截器链的工作原理和它们的执行顺序,这对于理解Struts2的内部机制至关重要。 首先,让我们深入理解Struts2的拦截器。拦截器是在Action调用前后...

    很实用的步骤条

    例如,通过JavaScript动态改变步骤状态,或者在特定步骤触发回调函数,执行相应的业务逻辑。 总的来说,这个“很实用的步骤条”是一个集成了jQuery技术的UI组件,旨在提升用户在多步骤流程中的导航体验。它的设计和...

    AutoJS按顺序执行脚本.rar

    总结起来,这个压缩包中的AutoJS项目演示了如何在Android设备上使用AutoJS按照预设顺序执行多个脚本,这对于自动化测试、数据处理或其他需要按步骤操作的任务非常实用。通过理解这个示例,你可以轻松地扩展到自己的...

    jsp页面中的代码执行加载顺序介绍.docx

    在JSP页面中嵌入JavaScript代码时,需要注意其执行顺序: - **全局变量和函数**:在JavaScript中,全局变量和函数可以在定义前被引用,但变量的值默认为`undefined`,而函数则可以直接被调用。 - **AJAX异步请求**...

    JavaScript 的性能优化:加载和执行.docx

    浏览器中的JavaScript执行具有阻塞特性,意味着在执行脚本时,浏览器无法进行其他操作,如下载资源或渲染页面。这直接影响用户体验,特别是当JavaScript代码执行时间过长时。 首先,理解JavaScript阻塞的原因是优化...

    Javascript代码在页面加载时的执行顺序介绍

    1. **执行顺序**:JavaScript代码的执行顺序与它们在HTML文档中出现的顺序一致。所有`&lt;script&gt;`标签(无论内部还是外部)都按顺序执行。外部脚本文件加载完成之后才会执行。 2. **全局变量和函数**:一个脚本中定义...

    深入浅出JAVASCRIPT 中文版

    理解函数的定义、调用以及如何使用函数表达式和匿名函数是学习JavaScript的关键步骤。 控制流语句控制程序的执行顺序,包括条件语句(如if...else)和循环(如for、while)。这些结构使得程序能够根据不同的条件...

    javascript调试器工具

    在使用JavaScript调试器时,应学会有效地利用其特性,如合理设置断点,通过查看调用栈理解代码执行顺序,以及利用监视表达式来跟踪变量的变化。此外,对于复杂的异步问题,还可以利用Promise或async/await的跟踪,来...

    基于JavaScript装饰器Decorator实现的通信库

    5. **处理事件**:在需要响应事件的组件中,标记为@On的方法会在事件触发时执行。 由于eventbus-cjs是基于JavaScript装饰器实现,开发者可以轻松地在已有的代码基础上添加或移除通信功能,保持代码的整洁性,并提高...

    python爬虫 - js逆向之猿人学第三题请求顺序验证+请求头验证.pdf

    总的来说,Python爬虫在应对JavaScript反爬策略时需要深入理解HTTP请求的各个方面,包括请求头、请求体、请求顺序,以及JavaScript的执行逻辑。这是一个涉及编码、解码、模拟执行和理解服务器逻辑的综合挑战,但通过...

    VS 调试 JavaScript.txt

    此步骤确保了Visual Studio能够在启动调试时正确地使用IE。 2. **在代码中插入断点:** - 在JavaScript函数内部添加`debugger;`语句。例如: ```javascript function BtnSubmit_Click() { var aaa; aaa = 'aaa...

    进度顺序插件,Jquery插件 一、二、三、四、五 步骤进度插件

    在文件名`key.schedule`中,“key”可能是指插件的名称或ID,而“schedule”可能表示该插件与时间安排或计划相关,意味着它可能具有时间相关的特性,例如定时推进步骤或者设置每个步骤的预计耗时。 使用此类插件,...

    js.rar_javascript_javascript 图_js_流程_请假

    开发者需要将这些固定的步骤编程到JavaScript代码中,确保流程按照预定的顺序进行。这通常涉及到状态机(state machine)的概念,通过定义不同的状态和状态之间的转换条件,来控制流程的执行。 在压缩包中的...

    javascript经典特效---先后点击链接.rar

    // 执行步骤1的代码 } }); link2.addEventListener('click', function(event) { event.preventDefault(); if (link2.dataset.step !== '2') { alert('请按顺序进行'); } else { // 执行步骤2的代码 } }); `...

    JavaScript运行机制浅探

    这一过程对于理解JavaScript的执行顺序至关重要。 ##### 示例1: ```javascript alert(i); // 输出 "undefined" var i = 1; ``` 在这个例子中,尽管`i`是在代码执行过程中才被赋值的,但在实际执行之前,`i`的声明...

Global site tag (gtag.js) - Google Analytics