for循环次数太多的时间优化_React 优化技巧在 Web 版光线追踪里的应用(中)

@工业聚：携程研发高级经理，负责前端框架和基础设施的设计、研发与维护。开源项目 react-lite 和 react-imvc 作者。本文已获得作者授权转载。

在上篇中，我们介绍了 JS 里的操作符重载方案，它就像 React 里使用 JSX 代替 React.createElement 那样。可以优化我们的代码，使之更加简洁和直观。

可以点击 《React 优化技巧在 Web 版光线追踪里的应用(上)》查看上篇。

然而，它仅仅是语法糖，并不能解决性能问题。光线追踪算法的巨大运算量，需要别的优化技巧。今天我们就来讲一下这些技巧。

解决方案：Time Slicing

时间分片，或叫异步渲染，或叫并发模式，不管叫什么名字，大概描述的都是将一个长时间执行的任务，分成一小块一小块，每执行一段时间，就停下来让主线程里积压的其它任务(比如渲染)得到释放。

React 和 Vue 都曾展示过这种效果。在我们的场景里，也能用这个思路，并且并不需要先实现一个 Concurrency 框架。用 async/await 和 generator function 就可以简单地满足需求。

我们先来看一下，如何把光线追踪的计算任务进行分块。

光线追踪算法的思路是，逐个像素地计算这个像素位置的颜色。因此是两个 for 循环，i = 0~width 加 j = 0~height，每组 i, j 对应该像素的位置。