高性能Javascript第六章快速响应的用户界面
笔记:
- 用于执行javascript和更新用户界面的进程通常被称为“浏览器UI线程”。
- UI线程工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲。一旦空闲,队列中关系爱一个任务就被重新提取出来并运行。
- 浏览器限制了JS任务的运行时间,调用栈大小限制和长时间运行脚本限制。
- 单个JS操作花费的总时间最大值不应超过100毫秒
- 可以通过定时器来让出时间片段。
- setTimeout()创建了执行一次的定时器,setInterval创建了一个周期性重复运行的定时器。
- Windows定时器分辨率为15毫秒。所以延迟的最小值建议为25毫秒,以确保有15毫秒的延迟。
- 定时器处理数组
- 分隔任务
-
- 可以通过Date对象跟踪代码的运行时间。
- 限制高频率重复定时器的数量。建议,创建一个独立的重复定时器,每次执行多个操作。
- WebWorkers H5,接口,不占用浏览器UI线程时间代码运行。
- 每个WebWorker 都有自己的全局运行环境,功能只是JS特性一个子集。
-
- 通信postMessage(), onMessage() ImportScripts()
- Web Workers适用于处理纯数据,或者与浏览器UI无关的长时间运行脚本。
小结:
- 任何JS任务不应该执行超过100毫秒,过长运行时间会导致UI更新出现明显的延迟,从而对用户体验产生负面影响。
- JS运行时间,浏览器响应用户交互的行为存在差异。JS长时间运行将导致用户体验变得混乱和脱节。
- 定时器可以用来安排代码延迟执行,长时间脚本分解成一系列的小任务。
- Web Workers 是新版浏览器支持的新特性,它允许你在UI线程外部执行JS代码,从而避免锁定UI。