第六章 快速响应的用户界面

1. 浏览器UI线程

UI线程的工作基于一个简单的队列系统,任务会被保存到队列中直到进程空闲。一旦空闲,队列中的下一个任务会被重新提取出来并运行。这些任务要么是运行js代码,要么是执行UI更新,包括重绘和重排。每一次用户输入都会导致一个或多个任务被加入队列。

用户操作时,如果UI线程处于非空闲状态,则浏览器不会立即响应用户行为。所以,应该尽量保持ui线程空闲。

(1). 浏览器限制

浏览器限制了js任务的运行时间。

这种限制是有必要的,它确保了某些恶意代码不能通过永不停止的密集操作锁住用户的浏览器或计算器

此类限制有两种

一、 调用栈大小限制
二、 长时间运行脚本限制(浏览器会记录一个脚本的运行时间,并在达到一定限度时终止它)

一定要避免脚本太长从而触发浏览器限制。

(2). 多久才算“太久”

限制所有 js 任务在100毫秒或更短时间内完成,以提高用户体验。这种测量应该是你必须支持的最慢的浏览器为基准。(难呀!!!)

2. 使用定时器让出时间片段

其实,对于执行比较复杂耗时,且不影响即时用户体验的代码,可以在页面加载时使用异步加载。

(1) 定时器基础

function greeting(){
   alert('hello world');
}

setTimeout(greeting, 250);

注意:第二个参数表示任务何时被添加到UI队列,而不是一定会在这段时间后执行;这个任务会等待队列中其他所有任务执行完毕后才会执行。

(2) 定时器的精度

js定时器延迟通常不太精准,相差大约几毫秒

(3) 分割任务

对较长函数进行函数分割

(4) 记录代码运行时间

var start = +new Date(),
    stop;

//要执行的代码
someLongProcess();

    stop = +new Date();

if( ( (stop - start)  <  50 ){
    alert('just about right');
} else {
    alert('taking too long');
}
  1. Web Workers
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容