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

0x1：前言

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

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

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

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

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

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

0x2：web worker

测试 Demo 代码在此

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

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

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

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

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

<!—->

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

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

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

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

<!—->

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

<!—->

5. 文件限度： 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 下来学习 。

0x3：什么是工夫切片

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

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

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

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

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

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

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

0x4：如何实际工夫切片

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

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)()}

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

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

在理解了 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 点：

1. 在递归过程中，每创立一个新函数，解释器都会创立一个新的函数栈帧，并且压在以后函数的栈帧上，这就造成了调用栈。因此，当递归层数过大之后，就可能造成调用栈占用内存过大或者溢出。
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 代码在此

0x6：总结

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

文 /Davis

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