我知道这是一个前端的问题,但是涉及到很底层的JS代码解析的问题,所以觉得在Cnode论坛问比较合适,毕竟这里的大神对JS理解更深入啊。 问题如下:
我们的Web应用规模比较大,会在后台(指的还是前端)进行大量的计算。这就导致用户的操作,比如touch and move等,感觉到明显的卡顿。原因是Main Thread被后台进行js的代码占用了。
我查了很多资料,看到Google的Web开发建议中,说要把每个JS任务的时长控制在50ms以内,并且尽可能多的给Main thread留出空闲时间,以便Main Thread可以去处理用户输入性操作。
请问,我该如何控制一个方法运行多久啊? 是把大的function写成多个小function?还是把for循环之类的改成多久执行一次?
有没有相关的文章和教程可以学习?
多谢各位
多线程 Web Worker 我没用过,理论上就是解决主线程卡的问题
大任务拆分,或者拆成异步的。可以profiling看看那些函数占了时间。只要保证event loop不被阻塞基本就不会有卡顿的问题了
@noe132 对,就是要做大任务拆分,但是具体怎么拆分啊?我有点蒙逼。拆成异步的话,是不是每次调用之间都会有间隔?不会一直占用主进程了?多谢
@liangtongzhuo Web worker在我们这个情况中不是很有效,因为我们有很多跟DOM操作相关的行为,Web worker不支持DOM操作
你上面不是说了吗?touchmove对应函数里面有大量计算,webworker不就是用来计算的吗?
wasm, generator
来自酷炫的 CNodeMD
@fruit-memory 不好意思,我没表述清楚。计算不是在touchmove里引起的,是已经在后面运行着的,问题是touchmove时我需要实时修改某些element的位置,这时候会导致卡顿。主要问题是后面做的计算,卡住了用户的操作。
@zswnew 你说的这是啥??
把计算放到异步代码中就可以了
异步没有用的,一次性计算量大的话用webworker。webworker不支持DOM操作,你可以在主线程操作啊。