关于实践:得物技术时间切片的实践与应用

每一个领有【高级资深】title 的前端工程师，必定会对我的项目的整体性能优化有本人的独到见解。这是往前端业务架构方向转变的必须要具备的能力之一。

本文就给大家介绍一个性能优化的伎俩之一：工夫切片（Time Slicing）

依据 W3C 性能小组的介绍，超过 50ms 的工作就是长工作。

序号	工夫散布	形容
1	0 to 16 ms	Users are exceptionally good at tracking motion, and they dislike it when animations aren’t smooth. They perceive animations as smooth so long as 60 new frames are rendered every second. That’s 16 ms per frame, including the time it takes for the browser to paint the new frame to the screen, leaving an app about 10 ms to produce a frame.
2	0 to 100 ms	Respond to user actions within this time window and users feel like the result is immediate. Any longer, and the connection between action and reaction is broken.
3	100 to 1000 ms	Within this window, things feel part of a natural and continuous progression of tasks. For most users on the web, loading pages or changing views represents a task.
4	1000 ms or more	Beyond 1000 milliseconds (1 second), users lose focus on the task they are performing.
5	10000 ms or more	Beyond 10000 milliseconds (10 seconds), users are frustrated and are likely to abandon tasks. They may or may not come back later.

表格内容摘抄自应用 RAIL 模型评估性能

依据下面的表格形容咱们能够晓得，当提早超过 100ms，用户就会察觉到轻微的提早。所以为了解决这个问题，每个工作不能超过 50ms。

为了防止当提早超过 100ms，用户就会察觉到轻微的提早这种状况，咱们能够应用两种计划，一种是 Web Worker，另一种是工夫切片 （Time Slicing）。

测试 Demo 代码在此

家喻户晓，JavaScript 语言采纳的是单线程模型，也就是说，所有工作只能在一个线程上实现，一次只能做一件事。后面的工作没做完，前面的工作只能等着。

针对咱们业务上来讲，一旦咱们执行了过多的长工作，执行过程很容易就被阻塞，呈现页面假死的景象。尽管咱们能够将工作放在工作队列中，通过异步的形式执行，但这并不能扭转 JS 的实质。

所以为了扭转这种现状，whatwg 推出了 Web Workers。

对于 web worker，不须要深刻，想理解的同学能够查看 MDN – web worker

Web Worker 为 Web 内容在后盾线程中运行脚本提供了一种简略的办法。
线程能够执行工作而不烦扰用户界面。

<!—->

能够应用 XMLHttpRequest 执行 I/O (只管 responseXML 和channel属性总是为空)。一旦创立，一个 worker 能够将音讯发送到创立它的 JavaScript 代码, 通过将音讯公布到该代码指定的事件处理程序（反之亦然）。

Worker 线程一旦新建胜利，就会始终运行，不会被主线程上的流动（比方用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。然而，这也造成了 Worker 比拟消耗资源，不应该适度应用，而且一旦应用结束，就应该敞开。

Web Worker 有以下几个应用留神点。

同源限度： 调配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。
DOM 限度： Worker 线程所在的全局对象，与主线程不一样，无奈读取主线程所在网页的 DOM 对象，也无奈应用 document、window、parent 这些对象。然而，Worker 线程能够 navigator 对象和 location 对象。

<!—->

通信联系： Worker 线程和主线程不在同一个上下文环境，它们不能间接通信，必须通过音讯实现。
脚本限度： Worker 线程不能执行 alert() 办法和 confirm() 办法，但能够 XMLHttpRequest 对象收回 AJAX 申请。

<!—->

文件限度： Worker 线程无奈读取本地文件，即不能关上本机的文件系统（file://），它所加载的脚本，必须来自网络。

咱们能够看看应用了 Web Worker 之后的优化成果：

worker.js

self.onmessage = function () {const start = performance.now()
  while (performance.now() - start < 1000) {}
  postMessage('done!')
}

myWorker.js

const myWorker = new Worker('./worker.js')
setTimeout(_ => {myWorker.postMessage({})
  myWorker.onmessage = function (ev) {console.log(ev.data)
  }
}, 5000)

测试 Demo 代码在此 , 有趣味的小伙伴能够 down 下来学习。

工夫切片的核心思想是：当一群工作在一个通道内执行，如果以后的工作不能在 50 毫秒内执行完，那么为了不阻塞主线程，这个工作应该 让出主线程的控制权，使浏览器能够解决其余工作。让出控制权意味着进行执行当前任务，让浏览器去执行其余工作，随后再回来继续执行没有执行完的工作。

所以工夫切片的目标是不阻塞主线程，而实现目标的技术手段是将一个长工作拆分成很多个不超过 50ms 的小工作扩散在宏工作队列中执行。

上图能够看到主线程中有一个长工作，这个工作会阻塞主线程。应用工夫切片将它切割成很多个小工作后，如下图所示。

能够看到当初的主线程有很多稀稀拉拉的小工作，咱们将它放大后如下图所示。

能够看到每个小工作两头是有空隙的，代表着工作执行了一小段时间后，将让出主线程的控制权，让浏览器执行其余的工作。

应用工夫切片的毛病是，工作运行的总工夫变长了，这是因为它每解决完一个小工作后，主线程会闲暇进去，并且在下一个小工作开始解决之前有一小段提早。

然而为了防止卡死浏览器，这种取舍是很有必要的。

工夫切片充分利用了“异步”，在晚期，能够应用定时器来实现，咱们称之为“手动切片”，例如：

btn.onclick = function () {someThing(); // 执行了 50 毫秒
  setTimeout(function () {otherThing(); // 执行了 50 毫秒
  });
};

下面代码当按钮被点击时，本应执行 100 毫秒的工作当初被拆分成了两个 50 毫秒的工作。

在理论利用中，咱们能够进行一些封装，封装后的应用成果相似上面这样：

btn.onclick = timeSlicing([someThing, otherThing], function () {console.log('done~');
});

当然，对于 timeSlicing 这个函数的 API 的设计并不是本文的重点，这里想阐明的是，在晚期能够利用定时器来实现 手动形式 的“工夫切片”；

如果切片的粒度不大，那么手动本人革新函数其实也能承受，然而如果须要切割成粒度十分小的逻辑，那么应用 generator 函数个性，会更加不便。

ES6 带来了迭代器的概念，并提供了生成器 Generator 函数用来生成迭代器对象，尽管 Generator 函数最正统的用法是生成迭代器对象，但这无妨咱们利用它的个性做一些其余的事件。

Generator 函数提供了 yield 关键字，这个关键字能够让函数暂停执行。而后通过迭代器对象的 next 办法让函数继续执行

利用这个个性，咱们能够设计出更方便使用的工夫切片，例如：

btn.onclick = timeSlicing(function* () {someThing(); // 执行了 50 毫秒
  yield;
  otherThing(); // 执行了 50 毫秒});

能够看到，咱们只须要应用 yield 这个关键字就能够将本应执行 100 毫秒的工作拆分成了两个 50 毫秒的工作。

咱们甚至能够将 yield 关键字放在循环里：

btn.onclick = timeSlicing(function* () {while (true) {someThing(); // 执行了 50 毫秒
    yield;
  }
});

下面代码咱们写了一个死循环，但仍然不会阻塞主线程，浏览器也不会卡死。

上面咱们正式利用 Generator 开始封装一个工夫切片执行器。利用 generator 的个性把每一次 yield 都放在 requestIdleCallback 里执行，直到全副执行结束，就能够轻松达到工夫切片的成果了。

// 首先咱们封装一个工夫切片执行器
function timeSlicing(gen) {if (typeof gen !== "function")
 throw new Error("TypeError: the param expect a generator function");
 var g = gen();
 if (!g || typeof g.next !== "function")
 return;
 return function next() {var start = performance.now();
 var res = null;
 do {res = g.next();
 } while (res.done !== true && performance.now() - start < 25);
 if (res.done)
 return;
 window.requestIdleCallback(next);
 };
}
// 而后把长工作变成 generator 函数，交由工夫切片执行器来管制执行
const add = function(i){let item = document.createElement("li");
 item.innerText = 第 ${i++}条;
 listDom.appendChild(item);
 }
function* gen(){
 let i=0;
 while(i<100000){yield add(i);
 i++
 }
}
// 应用工夫切片来插入 10W 条数据
function bigInsert(){timeSlice(gen)()}

每学习一门新编程语言，便就会被要求本人从新实现一遍斐波那契数列算法。那时，罕用的办法即递归法和递推法。那时只对后果感兴趣，只有后果进去了，其余的好像就无所谓了。

在理解了 generator 生成器的办法后，便开始能够尝试应用 generator 办法去切片长工作执行。

首先介绍下斐波那契序 0，1，1，2，3，5，8，… 就每一项的值都是前两项相加失去的。

递归办法：

首先，先把之前的递归办法再再再实现一遍。

const fibonacci = (n) => {if(n === 0 || n === 1)
        return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

// 调用
console.log(fibonacci(40))

递归的思路很简略，即一直调用本身办法，直到 n 为 1 或 0 之后，开始一层层返回数据。

应用递归计算大数字时，性能会特地低，起因有以下 2 点：

在递归过程中，每创立一个新函数，解释器都会创立一个新的函数栈帧，并且压在以后函数的栈帧上，这就造成了调用栈。因此，当递归层数过大之后，就可能造成调用栈占用内存过大或者溢出。
剖析能够发现，递归造成了大量的反复计算。

generator 生成器：

Generator 是 ES2015 的新个性，得益于该个性，咱们能够应用生成器办法，制作一个斐波那契数列生成器。

function *fibonacci(n, current = 0, next = 1) {if (n === 0) {return current;}
    yield current;
    yield *fibonacci(n-1, next, current + next);
}

// 调用
const [...data] = fibonacci(num)
console.log(data);

测试 Demo 代码在此

工夫切片不是什么高级的 api，而是一种依据浏览器渲染个性衍生出的优化计划，是一种优化思维，把计算量过大，容易阻塞渲染的逻辑切割成一个个小的工作来执行，留给浏览器渲染的工夫来达到肉眼可见的晦涩，实质上并没有优化什么 js 的计算性能，所以，有些算法的逻辑该优化还是须要从算法的思维下来优化。

文 /Davis

关注得物技术，做最潮技术人！

关于实践:得物技术时间切片的实践与应用

0x1：前言

0x2：web worker

0x3：什么是工夫切片

0x4：如何实际工夫切片

0x5：工夫切片实现斐波那契数列

0x6：总结