事件处理机制--浏览器流程处理分析

事件处理机制--浏览器流程处理分析

js的运行是单线程的，单线程即一个时间只能做一件事。浏览器的运行是多线程的。

如下三种情况会进入事件队列（任务队列）中，但不立即执行：

　　1．定时函数

　　2．事件函数

　　3．ajax的回调函数（xhr.onreadystatechange = function(){}; //会调用多次）

主线程中先执行非事件队列函数，再执行事件队列函数，事件队列中的事件先进去的先被判断，但不一定先被执行。事件队列中谁先满足条件先执行谁。

事件队列中的任务执行是有条件的：(前提条件：主线程必须是空闲的)

　　1．定时函数的触发条件（到达延时事件）（延时时间不精确）定时器从放入队列时开始计时，超时的定时函数优先执行

　　2．事件函数的触发条件（特定的事件发生）

　　3．Ajax回调函数的触发条件（服务器有数据响应时触发：xhr.readyState状态发生变化时触发）

事件队列中的任务先进先出

先进先出：优先被判断，但不一定优先被执行

举例说明：

1. 定时函数：

<script type="text/javascript">console.log(1);setTimeout(function(){console.log(2);}, 0); //0表示以最小延时去执行var sum = 0;for(var i = 0; i < 100; i++) {sum += i;}console.log(sum);console.log(3);
</script>

所以以上代码的输出结果为：

　　1
　　4950
　　3
　　2

2. 事件函数

<input type="button" value="按钮" id="btn"><script type="text/javascript">var btn = document.getElementById('btn');console.log(1);btn.onclick = function(){console.log(2);}console.log(3);
</script>

运行后点击按钮，输出结果为：　

　　1
　　3
　　2

3. Ajax回调函数

var xhr = new XHLHttpRequest();
xhr.open();
xhr.send();
console.log(1);
var data = null;
xhr.onreadystatechange = function(){console.log(2);data = xhr.responseText;
}
console.log(data); // data先输出才执行函数,所以应使用回调函数实现
console.log(3);

转载于:https://www.cnblogs.com/-lizi/p/7098183.html

事件处理机制--浏览器流程处理分析相关推荐

【SemiDrive源码分析】【X9芯片启动流程】21 - MailBox 核间通信机制介绍（代码分析篇）之 Mailbox for Linux 篇
[SemiDrive源码分析][X9芯片启动流程]21 - MailBox 核间通信机制介绍(代码分析篇)之 Mailbox for Linux 篇一.Mailbox for Linux 驱动框架分 ...
【SemiDrive源码分析】【X9芯片启动流程】20 - MailBox 核间通信机制介绍（代码分析篇）之 MailBox for RTOS 篇
[SemiDrive源码分析][X9芯片启动流程]20 - MailBox 核间通信机制介绍(代码分析篇)之 MailBox for RTOS 篇一.Mailbox for RTOS 源码分析 1. ...
Action与ActionListener的事件处理机制及实例分析
xjtuer最好不要抄,五次作业都是去年优秀作业,被老师逮住全给0分就得不偿失了,放在这里是给大家一个思路不用再去查找很多资料,了解之后再自己总结写一写事件处理机制的分析 swing的事件处理机制其 ...
【SemiDrive源码分析】【X9芯片启动流程】23 - MailBox 核间通信机制介绍（代码分析篇）之 RPMSG-IPCC Kernel 篇
[SemiDrive源码分析][X9芯片启动流程]23 - MailBox 核间通信机制介绍(代码分析篇)之 RPMSG-IPCC Kernel 篇一.RPMSG 接口 1.1 Linux Kern ...
【SemiDrive源码分析】【X9芯片启动流程】25 - MailBox 核间通信机制介绍（代码分析篇）之 RPMSG-IPCC RTOS QNX篇
[SemiDrive源码分析][X9芯片启动流程]25 - MailBox 核间通信机制介绍(代码分析篇)之 RPMSG-IPCC RTOS & QNX篇一.RPMSG 接口 1.1 Lin ...
事件争夺战 Android事件处理机制与原理分析
事件争夺战 Android事件处理机制与原理分析文章目录事件争夺战 Android事件处理机制与原理分析 View的继承关系 View的事件处理源码总结: ViewGroup的事件分发源码总结 ...
core java 8~9(GUI AWT事件处理机制)
MODULE 8 GUIs -------------------------------- GUI中的包: java.awt.*; javax.swing.*; java.awt.event.*; ...
iOS的界面触摸事件处理机制,然后用一个实例来说明下应用场景.
2019独角兽企业重金招聘Python工程师标准>>> 主要是记录下iOS的界面触摸事件处理机制,然后用一个实例来说明下应用场景. 一.处理机制界面响应消息机制分两块,(1)首先在 ...
QT开发（十二）——QT事件处理机制
一.QT事件简介 QT程序是事件驱动的, 程序的每个动作都是由内部某个事件所触发.QT事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. 常见的QT事件类型如下: 键盘事件: 按键按下和松开 ...

事件处理机制--浏览器流程处理分析

事件处理机制--浏览器流程处理分析相关推荐

最新文章

热门文章