快速响应的用户界面

大多数浏览器让一个单线程共用于执行Javascript代码和更新用户界面。这意味着当Javascript执行时，用户界面无法响应。因此浏览器限制了Javascript任务运行时间，确保某些恶意代码不能通过永不停止的密集操作锁住用户的浏览器。此类限制分为两种：

• 调用栈大小限制
• 长时间运行脚本限制

所以Javascript代码一次运行不能太久，否则会触发浏览器的长时间运行脚本限制。

单个Javascript操作花费的时间不应该超过100毫秒！

因为研究表明，超过100毫秒，用户就会感觉自己与界面失去联系。

但是难免有一些复杂的Javascript任务不能在100毫秒内完成，这个时候，理想的方法是让出线程控制权。而定时器可以完成这个需求。

• 定时器setTimeout和setInterval函数中的延时参数，表示在 调用该定时器后多久将该Javascript任务加入队列， 而不一定会在这段时间后执行；
• 如果在某个函数中调用定时器，而这个函数执行的时间较长，那么有可能在此函数执行完后立刻运行定时器内的Javascript任务；
• 定时器延迟通常不精准，相差大约几毫秒。而且windows系统中定时器分辨率15毫秒，也就是说间隔太小的延时，会出问题。普遍来说，延时最好至少 25毫秒 。

用定时器处理数组示例

通过记录代码运行时间，来批处理数据，同时又使得用户察觉不到界面阻塞（使我们脚本运行时间为阈值的一半，即小于50毫秒）

function processArray(items, process, callback) {
    let todo = items.concat();

    setTimeout(() => {
        // 加号表示将date对象转化成数字
        let start = +new Date();

        do {
            process(todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 50));

        if (todo.length > 0) {
            setTimeout(arguments.callee, 25);
        } else {
            callback(items);
        }
    }, 25);
}

总结

• 任何Javascript任务都不应该执行超过100毫秒。过长的运行时间会导致UI更新出现明显的延迟，从而对用户体验产生负面影响；
• Javascript运行期间，浏览器响应用户交互的行为存在差异。无论如何，Javascript长时间运行将导致用户体验变得混乱和脱节；
• 定时器可用来安排代码延迟执行，它使得你可以把长时间运行脚本分解成一系列的小任务；
• Web Worker是新版本浏览器支持的特性，它允许你在UI线程外部执行Javascript代码，从而避免锁定UI。