如何人为控制JS代码片段占用主进程(Main Thread)的时间?
发布于 6 年前 作者 hz0324 3193 次浏览 来自 问答

我知道这是一个前端的问题,但是涉及到很底层的JS代码解析的问题,所以觉得在Cnode论坛问比较合适,毕竟这里的大神对JS理解更深入啊。 问题如下:

我们的Web应用规模比较大,会在后台(指的还是前端)进行大量的计算。这就导致用户的操作,比如touch and move等,感觉到明显的卡顿。原因是Main Thread被后台进行js的代码占用了。

我查了很多资料,看到Google的Web开发建议中,说要把每个JS任务的时长控制在50ms以内,并且尽可能多的给Main thread留出空闲时间,以便Main Thread可以去处理用户输入性操作。

请问,我该如何控制一个方法运行多久啊? 是把大的function写成多个小function?还是把for循环之类的改成多久执行一次?

有没有相关的文章和教程可以学习?

多谢各位

11 回复

多线程 Web Worker 我没用过,理论上就是解决主线程卡的问题

大任务拆分,或者拆成异步的。可以profiling看看那些函数占了时间。只要保证event loop不被阻塞基本就不会有卡顿的问题了

@noe132 对,就是要做大任务拆分,但是具体怎么拆分啊?我有点蒙逼。拆成异步的话,是不是每次调用之间都会有间隔?不会一直占用主进程了?多谢

@liangtongzhuo Web worker在我们这个情况中不是很有效,因为我们有很多跟DOM操作相关的行为,Web worker不支持DOM操作

你上面不是说了吗?touchmove对应函数里面有大量计算,webworker不就是用来计算的吗?

wasm, generator

来自酷炫的 CNodeMD

@fruit-memory 不好意思,我没表述清楚。计算不是在touchmove里引起的,是已经在后面运行着的,问题是touchmove时我需要实时修改某些element的位置,这时候会导致卡顿。主要问题是后面做的计算,卡住了用户的操作。

@zswnew 你说的这是啥??

把计算放到异步代码中就可以了

@hz0324 wasm,把c/c++代码编译运行于浏览器,generator是js的协程,可暂停和恢复

来自酷炫的 CNodeMD

异步没有用的,一次性计算量大的话用webworker。webworker不支持DOM操作,你可以在主线程操作啊。

回到顶部