白山程序员培训关于React应用的优化方法分享


  时间:2020-01-13 16:15 来源: 作者:白山新闻网

随着互联网的不断发展,用户用来访问网络的终端设备也在不断的变化,而今天我们就通过案例分析来了解一下React应用的优化方法。

requestAnimationFrame调用高优先级任务,中断调度阶段的遍历,由于React的新版本调度阶段是拥有三根指针的可中断的链表遍历,所以这样既不影响下面的遍历,也不影响用户交互等行为。

运城程序员培训关于React应用的优化方法分享

使用requestAnimationFrame,当页面处于未激活的状态下,该页面的屏幕刷新任务会被系统暂停,由于requestAnimationFrame保持和屏幕刷新同步执行,所以也会被暂停。当页面被激活时,动画从上次停留的地方继续执行,节约 CPU 开销。

一个刷新间隔内函数执行多次时没有意义的,因为显示器每 16.7ms 刷新一次,多次绘制并不会在屏幕上体现出来

在高频事件(resize,scroll等)中,使用requestAnimationFrame可以防止在一个刷新间隔内发生多次函数执行,这样保证了流畅性,也节省了函数执行的开销 某些情况下可以直接使用requestAnimationFrame替代 Throttle 函数,都是限制回调函数执行的频率

requestIdleCallback,这个API目前兼容性不太好,但是在Electron开发中,可以使用,两者还是有区别的,而且这两个api用好了可以解决很多复杂情况下的问题~。当然你也可以用上面的api封装这个api,也并不是很复杂。

当关注用户体验,不希婷婷五月色综合百望因为一些不重要的任务(如统计上报)导致用户感觉到卡顿的话,就应该考虑使用requestIdleCallback。因为requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态。

【免责声明】:本内容转载于网络,转载目的在于传递信息。文章内容为作者个人意见,本平台对文中陈述、观点保持中立,不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。

 

上一篇:JavaScript编程代码优化的常用三种方法
下一篇:JavaScript编程的编程原理都有哪些环节


白山新闻网 ICP备案:鄂icp备14004636号-1