JavaScript定时器分析

简介:

一、事件循环

JavaScript是单线程,同一个时间只能做一件事情,所以执行任务需要排队。如果前一个耗时很长,那么下一个只能等待。

1)两种任务

为了更好的处理任务,JavaScript语言的设计者将任务分为两种:同步任务(synchronous)与异步任务(asynchronous)。

同步任务:在主线程上排队执行的任务。

异步任务:放在“任务队列”(task queue)中,只有当主线程空了,才会将“任务队列”中的任务放到主线程中。

这就是JavaScript的运行机制,这个过程会不断重复,这个机制叫事件循环(Event Loop)。

2)事件循环

事件循环模型可以用下图描述,图片来自Philip Roberts的演讲《Help, I’m stuck in an event loop》:

1. “WebAPIs”内的就是异步任务,包括DOM事件、Ajax和setTimeout。

2. “callback queue”内的是一个任务队列,包括click、load、done。

3. “stack”内的就是同步任务,只有当“stack”内的清空后,才会去轮询任务队列。

下面是一段代码说明,图片中的内容是打印结果,没什么悬念。

console.log('Hi');
setTimeout(function() {
  console.log('there');
},5000);
console.log('SJS');

1. 将log('Hi')方法入栈,这是个普通方法,出栈被引擎执行,输出“Hi”。

2. 将setTimeout方法入栈,这是个WebAPIs内的方法,出栈被引擎交给了相应模块,继续处理后面代码。

3. 将log('SJS')加入执行栈,出栈输出“SJS”。

4. 在setTimeout方法执行5秒后,到达触发条件,将setTimeout加到任务队列中。

5. 此时的执行栈为空,所以引擎开始轮询检查任务队列,有个setTimeout,于是将setTimeout加入执行栈中。

6. 在setTimeout中有个log('there')方法,将此方法入栈,输出“there”。

3)循环过程去取Ajax

下图展示的是主线程通过事件循环过程去取Ajax的消息:

 

二、定时器

定时器就是setTimeout(fn, delay)setInterval(fn, delay),定时器设定的延时是没有保证的。

如果setTimeout在时间点“n”被调用,那么执行定时器代码的JavaScript任务会在“n+delay”后才加入到消息队列中。

下图是JQuery的作者John Resig画的一张示例图:

左边是运行时间(单位ms),中间是JavaScript代码段,右边是代码计划开始执行时间

1. 0ms时JavaScript开始执行,2ms启动setTimeout,6ms加入Mouse Click,10ms启动setInterval,12ms加入setTimeout,20ms加入setInterval,30ms、40ms、50ms加入setInterval。

2. 第1段JavaScript执行了大概18ms,在18ms时,setTimeout过期了。

3. 按照单线程FIFO规则,接下来执行Mouse Click,再依次运行setTimeout和setInterval。

4. 第1个setInterval(20ms加入)还在排队等候中,30ms又要加入setInterval,但浏览器只让一个setInterval排队,其它的都废弃掉。

5. 第1个setInterval在36ms时开始执行,此程序需要执行6ms,第2个setInterval在40ms时开始排队,42ms时开始执行。

6. 第2个执行的setInterval在48ms时完成执行,50ms时第3个setInterval开始执行,不需要排队,直接运行。

 

三、分割任务

在JavaScript执行的时候,页面渲染的所有更新操作都要暂停。在执行繁忙的时候,可能会导致浏览器很卡或似乎要挂掉。

定时器,可以有效暂停一段JavaScript代码的执行,还可以将代码的各个部分,分解成不会让浏览器挂掉的碎片

1)未优化代码

长时间运行的任务,用手机扫二维码看效果会更明显

var tbody = document.getElementsByTagName("tbody")[0];
for (var i = 0; i < 20000; i++) { //创建20000个tr
  var tr = document.createElement("tr");
  for (var t = 0; t < 6; t++) { //每个tr有6个td
    var td = document.createElement("td");
    td.appendChild(document.createTextNode(i + "," + t));
    tr.appendChild(td);
  }
  tbody.appendChild(tr); //将tr添加到tbody中
}

2)已优化代码

利用定时器分解任务,将强循环转化为非阻塞操作:

//配置部分
var rowCount = 20000; 
var divideInto = 4; 
var chunkSize = rowCount / divideInto; //将20000分成4个部分
var iteration = 0; 

var table = document.getElementsByTagName("tbody")[0];

setTimeout(function generateRows() {
  var base = chunkSize * iteration; //计算上次中断的地方
  //添加tr部分
  for (var i = 0; i < chunkSize; i++) {
    var tr = document.createElement("tr");
    for (var t = 0; t < 6; t++) {
      var td = document.createElement("td");
      td.appendChild(document.createTextNode((i + base) + "," + t + "," + iteration));
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  iteration++; //调度下一阶段
  if (iteration < divideInto) 
    setTimeout(generateRows, 0); 
}, 0);

 

 

参考资料:

JavaScript的计时器的工作原理

JavaScript:彻底理解同步、异步和事件循环(Event Loop)

从setTimeout说事件循环模型

JavaScript 运行机制详解:再谈Event Loop

JavaScript忍者秘籍

一家之言:说说 JavaScript 计时器的工作原理

分类:  JavaScript


本文转自 咖啡机(K.F.J) 博客园博客,原文链接:http://www.cnblogs.com/strick/p/6644528.html    ,如需转载请自行联系原作者
相关文章
|
7月前
|
Web App开发 监控 JavaScript
监控和分析 JavaScript 内存使用情况
【10月更文挑战第30天】通过使用上述的浏览器开发者工具、性能分析工具和内存泄漏检测工具,可以有效地监控和分析JavaScript内存使用情况,及时发现和解决内存泄漏、过度内存消耗等问题,从而提高JavaScript应用程序的性能和稳定性。在实际开发中,可以根据具体的需求和场景选择合适的工具和方法来进行内存监控和分析。
|
3月前
|
数据采集 前端开发 JavaScript
金融数据分析:解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术,从金融网站(如东方财富网)抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent,突破反爬机制;借助Selenium等待页面渲染,精准定位动态数据。同时,提供了常见错误解决方案及延伸练习,帮助读者掌握金融数据采集的核心技能,为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱,确保数据抓取高效稳定。
98 17
|
7月前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
213 62
|
7月前
|
JavaScript 前端开发 API
Vue.js与Angular的优劣分析
Vue.js和Angular都是非常流行的JavaScript框架,它们在构建现代Web应用程序方面各有优劣
195 64
|
7月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
211 4
|
7月前
|
运维 监控 JavaScript
鸿蒙next版开发:分析JS Crash(进程崩溃)
在HarmonyOS 5.0中,JS Crash指未处理的JavaScript异常导致应用意外退出。本文详细介绍如何分析JS Crash,包括异常捕获、日志分析和典型案例,帮助开发者定位问题、修复错误,提升应用稳定性。通过DevEco Studio收集日志,结合HiChecker工具,有效解决JS Crash问题。
294 4
|
7月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
984 9
|
7月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
226 1
|
7月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
267 1
|
8月前
|
JavaScript 前端开发
js之一次性定时器
js之一次性定时器
73 1