定时器学习：利用定时器分解耗时任务案例

Nino 发布于2019-08-20 15:27 / 3023人阅读

摘要：对于执行时间过长的脚本，有的浏览器会弹出警告，说页面无响应。一个代码块长时间运行，将会导致其他任何任务都必须等待。而其他浏览器，比如上的浏览器，将默认终止运行时间超过秒钟的脚本。利用定时器来分解任务，关键点有两个。实际上每行耗时约左右。

对于执行时间过长的脚本，有的浏览器会弹出警告，说页面无响应。有的浏览器会直接终止脚本。总而言之，浏览器不希望某一个代码块长时间处于运行状态，因为js是单线程的。一个代码块长时间运行，将会导致其他任何任务都必须等待。从用户体验上来说，很有可能发生页面渲染卡顿或者点击事件无响应的状态。

如果一段脚本的运行时间超过5秒，有些浏览器（比如Firefox和Opera）将弹出一个对话框警告用户该脚本“无法响应”。而其他浏览器，比如iPhone上的浏览器，将默认终止运行时间超过5秒钟的脚本。--《JavaScript忍者秘籍》

JavaScript忍者秘籍里有个很好的比喻：页面上发生的各种事情就好像一群人在讨论事情，如果有个人一直在说个不停，其他人肯定不乐意。我们希望有个裁判，定时的切换其他人来说话。

Js利用定时器来分解任务，关键点有两个。

按什么维度去分解任务

任务的现场保存与现场恢复

例子

要求：动态创建一个表格，一共10000行，每行10个单元格

一次性创建

总共耗时180ms, 浏览器已经给出警告！[Violation] "setTimeout" handler took 53ms。

分批次动态创建

这次异步按批次创建，没有耗时的警告。因为控制了每次代码在50ms内运行。实际上每80行耗时约10ms左右。这就不会引起页面卡顿等问题。

私有云 idc机房托管任务定时器 linux定时器任务定时任务定时任务与触发任务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82261.html

React16性能改善的原理一

摘要：接下来看下伪代码调度算法伪代码原来这段写的匆忙且不好，重新更新了一篇讲调度算法的大概实现性能改善的原理二。问题背景 React16 更新了底层架构，新架构主要解决更新节点过多时，页码卡顿的问题。譬如如下代码，根据用户输入的文字生成10000行数据，用户输入框会出现卡顿现象。 class App extends React.Component { constructor( prop...

zhangqh 2019-08-23 15:21 评论0 收藏0
JavaScript同步和异步

摘要：异步如果在函数返回的时候，调用者还不能购得到预期结果，而是将来通过一定的手段得到例如回调函数，这就是异步。的意思是，将回调函数立刻插入消息队列，等待执行，而不是立即执行。大家好，我是wmingren，小伙伴们都知道JavaScript是单线程的语言，所谓的单线程呢就是指如果有多个任务就必须去排队，前面任务执行完成后，后面任务再执行。到这里我们就产生了一个疑问，既然是单线程的，又怎么会...

Eirunye 2019-08-26 11:31 评论0 收藏0
JS高级入门教程

摘要：解析首先简称是由欧洲计算机制造商协会制定的标准化脚本程序设计语言。级在年月份成为的提议，由核心与两个模块组成。通过引入统一方式载入和保存文档和文档验证方法对进行进一步扩展。其中表示的标记位正好是低三位都是。但提案被拒绝了。 JS高级入门教程目录本文章定位及介绍 JavaScript与ECMAScript的关系 DOM的本质及DOM级介绍 JS代码特性基本类型与引用类型 JS的垃...

zsy888 2019-08-20 14:43 评论0 收藏0
前端性能优化之 JavaScript

摘要：大多数情况下，对一个直接量和一个局部变量数据访问的性能差异是微不足道的。前端性能优化之 JavaScript 前言本文为《高性能 JavaScript》读书笔记，是利用中午休息时间、下班时间以及周末整理出来的，此书虽有点老旧，但谈论的性能优化话题是每位同学必须理解和掌握的，业务响应速度直接影响用户体验。一、加载和运行大多数浏览器使用单进程处理 UI 更新和 JavaScri...

Coding01 2019-08-23 18:10 评论0 收藏0
Javascript学习总结 - JS基础系列三

摘要：案例每隔毫秒调用函数并显示时间。当点击按钮时，停止时间代码如下计时器每隔毫秒调用函数，并将返回值赋值给计时器计时器，在载入后延迟指定时间后去执行一次表达式仅执行一次。该值标识要取消的延迟执行代码块。简述本系列将持续更新Javascript基础部分的知识，谁都想掌握高端大气的技术，但是我觉得没有一个扎实的基础，我认为一切高阶技术对我来讲都是过眼云烟，要成为一名及格的前端工程师，必须把...

zlyBear 2019-08-19 17:07 评论0 收藏0