哪家网站雅虎全球购做的好,做网站多少钱西宁君博示范,网站备案每年一次,动漫制作专业认识一、JavaScript 引擎是单线程的可以从下面的代码中看到#xff0c;第一个用setTimeout中的代码是死循环#xff0c;由于是单线程#xff0c;下面的两个定时器就没机会执行了。setTimeout( function(){ while(true){} } , 100);setTimeout( function(){ alert(你好!setTimeou…一、JavaScript 引擎是单线程的可以从下面的代码中看到第一个用setTimeout中的代码是死循环由于是单线程下面的两个定时器就没机会执行了。setTimeout( function(){ while(true){} } , 100);setTimeout( function(){ alert(你好!setTimeout); } , 200);setInterval( function(){ alert(你好!setInterval); } , 200);浏览器的内核是多线程的它们在内核制控下相互配合以保持同步一个浏览器至少实现3个常驻线程javascript引擎线程GUI渲染线程浏览器事件触发线程。JavaScript引擎是基于事件驱动单线程执行的JS引擎一直等待着任务队列中任务的到来然后加以处理浏览器无论再什么时候都只有一个JS线程在运行JS程序。GUI渲染线程负责渲染浏览器界面当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的当JS引擎执行时GUI线程会被挂起GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。浏览器事件触发线程当一个事件被触发时该线程会把事件添加到待处理队列的队尾等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。由上图可看出浏览器中的JavaScript引擎是基于事件驱动的这里的事件可看作是浏览器派给它的各种任务JavaScript引擎一直等待着任务队列中任务的到来由于单线程关系这些任务得进行排队一个接着一个被引擎处理。t1、t2....tn表示不同的时间点tn下面对应的小方块代表该时间点的任务。t1时刻1、GUI渲染线程2、浏览器事件触发线程在t1时间段内首先是用户点击了一个鼠标键点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件由图可知对于JavaScript引擎线程来说这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务这个鼠标点击事件正在等待处理。3、定时触发线程这里的浏览器模型定时计数器并不是由JavaScript引擎计数的因为JavaScript引擎是单线程的如果处于阻塞线程状态就计不了时它必须依赖外部来计时并触发定时所以队列中的定时事件是异步事件。4、在这t1的时间段内继鼠标点击事件触发后先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说定时触发线程产生了一个异步定时事件并放到任务队列中该事件被排到点击事件回调之后等待处理。同理还是在t1时间段内接下来某个setInterval定时器也被添加了由于是间隔定时在t1段内连续被触发了两次这两个事件被排到队尾等待处理。5、ajax异步请求浏览器新开一个http线程请求当请求的状态变更时如果先前已设置回调这异步线程就产生状态变更事件放到JavaScript引擎的处理队列中等待处理。二、任务的执行顺序不同显示结果也不同1)未使用setTimeout函数在网上找到的一段代码实例这里用来演示一下。do somethingvar doBtn document.getElementById(doBtn), status document.getElementById(status);function sleep(ms) {var start new Date();while (new Date() - start ms) {}}doBtn.onclick function(e) {status.innerHTML doing...please wait...;sleep(3000); // 模拟一个耗时较长的计算过程3sstatus.innerHTML done;return false;};我在firefox中执行了上面的代码。计划是点击“do something”按钮然后显示“doing...please wait...”接着执行sleep最后显示“done”。但是结果是点击后浏览器卡住3秒左右最后直接显示done。分析下看出在做status.innerHTML设置的时候是需要执行GUI渲染线程的但是现在还在执行JavaScript引擎线程而JavaScript引擎线程与GUI渲染线程是互斥的所以就最后显示了done。2)使用了setTimeout函数do something timervar doBtn2 document.getElementById(doBtn2), status2 document.getElementById(status2);function sleep2(ms) {var start new Date();while (new Date() - start ms) {}}doBtn2.onclick function(e) {status2.innerHTML doing...please wait...;setTimeout(function() {sleep2(3000);status2.innerHTML done;}, 100);return false;};在“doing...please wait...”后面加了个setTimeout延时执行给了浏览器渲染的时间这个时候会显示出“doing...please wait...”的字样然后执行sleep函数最后显示“done”。后面有网友发现在firefox中不起作用的确有这个问题后面我修改了一下代码将局部变量的声明onclick的绑定放到了window.onload事件中等页面结构加载完成后我再做脚本操作。function sleep(ms) {//...}window.onload function() {var doBtn document.getElementById(doBtn),status document.getElementById(status);var doBtn2 document.getElementById(doBtn2), status2 document.getElementById(status2);doBtn.onclick function(e) {//...};doBtn2.onclick function(e) {//...};};以上就是本文的全部内容希望对大家的学习有所帮助。
